Geek asks and answers

CSS Tabs Borderless Using Images

On the Stack Overflow custom pages where the tabs are located (statistics, recent, answers, etc.), you get the illusion that the tabs are extensions of the row on which they are sitting. Stack overflow creates this effect by defining pure CSS borders. I want to achieve the same effect, but I have images for both tabs and the line on which they are sitting.

I have a box with rounded corners (white background, gray outline). Tabs are located on top, the same colors. The tabs have rounded upper corners and do not have a lower border. Bookmarks are in the div before the div field.

To achieve the aforementioned effect, I believe that the tab will have to go down and cover that part of the border of the box where they meet. I did this in Firefox, but in IE you can still see the frame line.

How can you configure this to work in both browsers?

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

[ Edit: fixed URL]

+3
source share
4 answers

Earlier, I did something similar, giving the “active” tab class a negative bottom position, thereby moving it so that it sits on top of the border of the frame. Maybe this is a solution? For instance:

<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>
+1
source

Firefox IE

+3

Despite the fact that since then I started skating on my own, one of the examples that helped me the most when I first figured out the CSS tabs was as follows:

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

This relative positioning method is usually best for me.

Good luck

+1
source

This generator tab may help.

0
source

More articles:


All Articles