Forums

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

Home Forums CSS IE h1 and first:letter problem

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #22980
    Biofobico
    Member

    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 :(

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.