It gets me every single time… I start building a navigational component with tabs and I have a sudden attack of short-term tabbed-memory-loss. One thing that always trips me up is how to get the tab to bleed onto the main page to make the active tab look as if it’s part of the current page. Each time I run into this problem I hack away at it and find a solution, but really, how long must this go on? Time to start documenting stuff like this.

Let’s start with our basic unordered list and move straight into the basic structure of a simple horizontal tabbed menu. I have put the red border on the bottom of the <ul> element to represent the background or border we would usually be trying to bleed over when trying to create this effect.

I have set a fixed height on the <ul> (25px) and the anchors do not reach the bottom of the <ul> element as they are currently inline elements. For this to work I must set the anchors to display: block (or just float:left which I have done which defaults to a block level element) and also set the height of the anchor to match the <ul>.

Now this is getting closer, but what I really want is for the hover affect to extend over the red border so I can create the effect that the tab is bleeding into the main page.For this I will extend the height of the anchor to 27px, to compensate for the 2px red border it needs to extend across.

This is where I start to hit problems. Firefox does exactly what I want, the tab extends outside of it’s parent element and crosses over into the main page to create the desired effect.

Internet Explorer does not behave as expected as the parent container automatically gets pushed down to accommodate the new size of it’s child element. Suddenly Internet Explorers ’self clearing’ habit is becoming a pain.

Next I decide to read Douglas Bowman’s classic A List Apart article documenting the Sliding Doors technique. I probably also read this each time I run into this problem, here is the interesting bit I will now reflect on:

To complete the tab effect, we need to bleed the current tab through the border. You might think we would apply bottom borders to our tabs matching the border color…

Well, yes that is exactly what I might think we should do… but the basic idea is that you can’t really push the tab through the border unless you change the flow of the element. This would have to be achieved with absolute positioning and that’s just a bit convoluted for such a simple task.

So, one background image in the parent <ul> element to create the border effect is all that is necessary to create this effect. Make sure it is aligned to the bottom of the <ul> element and set the height so it is enough to display the entire background image, now make the anchor the same height to create the bleeding effect.

There you go, it now works in all browsers consistently.

I am sure there are many ways to do this, but at least now I have one documented for any future attacks of tabbed-memory-loss. Let us know if you would achieve this effect differently.