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