Tabs disappear in IE

[fiveeightfive]

Take a gander at http://www.fiveeightfive.com/shirtness in Firefox then in IE. The tabs that I made seem to just go away. Are they going behind the #main div? It’s times like these that I want to pimpslap Microsoft.

[screencat]

http://www.quirksmode.org/css/contents.html

Unfortunately, "inline-block" isn’t supported by IE which I just found out (thanks for actually teaching me a new property, never heard of it).

You need to do it differently and btw. you should declare properties for ALL elements at once (if you can) instead redeclaring the same properties again for each element. You can write much shorter CSS that way and avoid mistakes.

The code structure should look something like so:

Code:

#nav ul {
overflow: hidden; /* so it wraps the ‘li’ or ‘a’ tags */
}

#nav li {
display: block;
float: left;
margin-right: 10px;
} /* you can probably put the margin on ‘#nav a’ instead and delete the ‘#nav li’ declaration */

#nav a {
display: block;
height: 23px;
float: left;
overflow: hidden;
text-indent: -9999px;
width: 89px;
}

#nav .li1_name a { background: url(picture1_default.jpg); }
#nav .li1_name a:hover { background: url(picture1_hover.jpg); }
#nav .li2_name a { background: url(picture2_default.jpg); }
#nav .li2_name a:hover { background: url(picture2_hover.jpg); }

…and so on.

In case you need to learn about clearing floats: http://www.quirksmode.org/css/clearing.html
I favor the so called clearfix method: http://www.positioniseverything.net/easyclearing.html

…and in case you didn’t know it, you can add multiple classes/id to a declaration with comma.

Code:

.someclass_a,
.someclass_b,
.someclass_c,
#uniqueid_d {
font-weight: 700;
}

[Author]

Posts