Grow your CSS skills. Land your dream job.

IE h1 and first:letter problem

  • # July 24, 2008 at 8:51 pm

    As usually everything works fine except IE6 and IE7
    The right way: http://img440.imageshack.us/my.php?i…icture1bz6.png

    On IE6: http://img384.imageshack.us/my.php?image=ie6tw7.png

    On IE7: http://img140.imageshack.us/my.php?image=ie7vg3.png

    html:

    Code:

    Hello and welcome to Qoska!

    and the css:

    Code:
    /*
    HEADER
    */

    #header:after
    {
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    #header
    {display: inline-block;}

    /* Hides from IE-mac */
    * html #header
    {height: 1%;}

    #header
    {display: block;}
    /* End hide from IE-mac */

    h1#logo { width: 174px; height: 35px;
    background: url(images/logo.jpg) top left no-repeat;
    margin-top: 35px;
    float: left; }

    /*
    MENU
    */

    ul#main-nav { width: 278px; margin-top: 55px; float: right;}
    ul#main-nav li { display: inline; }
    ul#main-nav li a { text-transform: uppercase; color: #6c6c6c; font-size: 1.3em;
    padding: 3px 0px 3px 20px; }
    ul#main-nav li a:hover, a:active { color: #ae0c0c; }

    /*
    WELCOME MESSAGE/SHOWROOM
    */

    #welcome { margin-top: 5px; height:117px;
    background: url(images/welcome-bg.jpg) repeat-x; position: relative;
    display: inline-block;}

    #welcome:after
    {
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    /*#welcome
    {display: inline-block;}*/

    /* Hides from IE-mac */
    * html #welcome
    {height: 1%;}

    #welcome
    {display: block;}
    /* End hide from IE-mac */

    h1#welcome-msg, h1#showroom, h1#sucess-msg { width: 100%; margin-top: 45px; margin-left: 45px; color: #4b4a4a; text-align: left;
    text-transform: uppercase;
    font-weight: normal;
    float: left;
    /*display: inline;*/
    }

    h1#welcome-msg:first-letter, h1#showroom:first-letter, h1#sucess-msg:first-letter { font-size: xx-large; text-transform: uppercase; color: #ae0c0c; }

    /*
    HIRE ME
    */

    #hire-me { background: url( images/hire-me.png) no-repeat;
    width: 227px;
    height: 216px;
    /*clear: both;*/
    position: absolute;
    top: 35px;
    right: 35px;
    }

    I think i tried everything that i remember to solve this, but unfortunately with zero sucess :(

    # July 28, 2008 at 12:43 pm

    IE6 just doesn’t support the :first-letter pseudo class. If it’s super important, you could use something like jQuery (which supports CSS3 selectors) to target that letter and change its color. I think of these things as progressive enhancement. Newer browsers get snazzier design, but older browsers aren’t penalized.

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".