CSS Borderless tabs using images

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]

Answers


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>

May be the sliding doors technique could come in handy

This example does work in Firefox and IE


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!


Need Your Help

Different server request behaviour within web workers

javascript jquery ajax xmlhttprequest web-worker

Within our web application we are using the following method of server communication

How to send a subprocess to the background & without using shell=True

python multithreading shell process subprocess

I'm trying to write a part of a Python script what changes the root MySQL password under Linux for a small web-admin interface. I've followed the official MySQL documentation on changing the root

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.