Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Tabs disappear in IE

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #26304

    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.

    #64917
    screencat
    Member

    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.