The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Tabs disappear in IE

  • # September 30, 2009 at 11:37 pm

    Take a gander at 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.

    # October 1, 2009 at 4:41 am

    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:

    #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:
    I favor the so called clearfix method:

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

    #uniqueid_d {
    font-weight: 700;
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed