Grow your CSS skills. Land your dream job.

Tabs disappear in IE

  • # September 30, 2009 at 11:37 pm

    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.

    # October 1, 2009 at 4:41 am

    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;
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".