Grow your CSS skills. Land your dream job.

browser independence (ie fix)

  • # November 24, 2008 at 7:15 am

    I got this page, and have some problems with ie < 7 and opera 7.11

    This is what i hoped to be the layout in all browsers:
    http://browsershots.org/png/original/c5/c5bac9b3838ba30cfebae2f03f896548.png

    and these are the IE ones:
    http://browsershots.org/screenshots/97347e42778e88203c896cc3f30134bd/

    http://browsershots.org/screenshots/b53d6391290363ea1e7ada0e77bdca20/

    the xhtml is quite simple:

    Code:
    print “

    “;

    The content is some posts, and a post looks like this:

    Code:

    Newcastleben betiltották a ketreces tojást

    warnew | 2008. october 16. 20:26

    Az angliai Newcastle Városi Tanácsa kitiltotta a ketreces baromfitartásból származó tojásokat az iskolai étkeztetésb?l, személyzeti éttermekb?l, rendezvényekr?l es a “hospitality outletekb?l”.

    A ketreces csirke- és pulykahúst még nem tiltották be, de vizsgálják a kérdést, ahogy a Halal hús és a ketreces tojásból készült sütemények és tésztafélék tiltását is.

    And the boxes are like this one:

    Code:
    Viridis matrica

    viridis matrica

    Some CSS:

    Code:
    body {
    background : transparent url(/images/design/background.png) repeat;
    }

    #page {
    margin : 0px auto;
    width : 994px;
    background : transparent url(/images/design/header.jpg) no-repeat top left;
    }
    div#header {
    width : 746px;
    margin : 0px auto;
    }
    div#header ul#nav {
    padding-top : 170px;
    margin-left : 3px;
    margin-right : 3px;
    border-bottom : #896e51 solid 7px;
    overflow : hidden;
    }

    div#header ul#nav li {
    display : block;
    float : left;
    width : 120px;
    margin-bottom : 7px;
    }

    div#main {
    width : 746px;
    margin : 0px auto;
    }

    div#main div#main-in {
    padding : 30px 20px;
    background : transparent url(/images/design/content-background.png) repeat-y top left;
    overflow : hidden;
    }
    div#main div#main-in div#left {
    width : 460px;
    overflow : hidden;
    float : left;
    }

    div#main div#main-in div#left div.post {
    clear : left;
    margin-bottom : 35px;
    }

    div#main div#main-in div#right {
    width : 215px;
    float : right;
    }

    div#main div#main-in div#right div.box {
    margin-bottom : 30px;
    clear : both;
    }

    The live version is at http://viridis.hu/index3.php, but after i got it fixed it’s gona move – thats the reason for the long codes in the post.

    My question is of course: how can i fix the ie versions?

    # November 25, 2008 at 7:24 am

    So ie did not picked up the correct heights for ul#nav and div#main-in, adding ‘height: 100%’ to the css solved the problem.

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