CSS Borderless tabs using images

Question

On the user pages of Stack Overflow where the tabs are (Stats, Recent, Responses, etc.) you get the illusion that the tabs are extensions of the line they're sitting on. Stack Overflow creates this effect by defining pure CSS borders. I want to achieve the same effect but I have images both for the tabs and for the line they're sitting on.

I have a box with rounded corners (white background, grey outline). Tabs are across the top, same colors. The tabs have rounded top corners and no bottom border. The tabs are in a div before the box's div.

To accomplish the aforementioned effect, I imagine that the tab will have to come down and cover that part of the box's border where they meet. I accomplished this in Firefox but in IE you can still see the line of the box's border.

How can you adjust this to work in both browsers?

Here's my example that works in FF but not in IE: http://www.mcrackan.com/recipes/csstest-loggedin.htm

[Edit: fixed URL]

Answer 1

May be the sliding doors technique could come in handy

This example does work in Firefox and IE

Answer 2

I have previously done something similar by giving the "active" tab class a negative bottom position, thus moving it so it sits on top of the frame border. Could perhaps be the solution? For example:

<style>
ul.tabs {
border-bottom: 1px solid blue;
height: 20px;
margin: 0;
padding: 0;
list-style-type: none;
}
    ul.tabs li {
    float: left;
    position: relative;
    bottom: 5px;
    margin: 0;
    padding: 0;
    }
        ul.tabs li img {
        float: left;
        height: 20px;
        width: 50px;
        border: none;
        }
    ul.tabs li.selected {
    bottom: -1px;
    }
</style>

<ul class="tabs">
    <li><a href=""><img src="tab1.gif" /></a></li>
    <li class="selected"><a href=""><img src="tab2.gif" /></a></li>
    <li><a href=""><img src="tab3.gif" /></a></li>
</ul>

Answer 3

Although I've since taken to rolling my own, one of the examples that helped me most when I was first figuring out CSS tabs was this:

http://unraveled.com/projects/css_tabs/

That method of relative positioning is usually what ends up working best for me.

Good luck!

Answer 4

This tab generator may be help.