Grow your CSS skills. Land your dream job.

CSS height and positioning for IE

  • # November 27, 2008 at 6:28 am

    Hi!

    This is my first post here, and I am not a professional (as I am sure a quick look at the code below would reveal). I am trying to adapt wiki software and skins to suit the needs of a project website. The site looks ok in all browsers except IE, and I was hoping that someone here could give me some tips on how the code can be adapted, or what a separate css sheet for IE could look like to achieve the same results.

    An excerpt from the css file for English language:

    Code:
    /* body
    ————————————————–*/
    body {
    margin:0;
    padding:0 0px;
    font-family:Lucida Grande, Lucida Sans Unicode, Helvetica, Arial, sans-serif;
    font-size:75%;
    line-height:1.6em;
    text-align:center;
    }
    body {height:100%;}
    html {height:100%;}

    /* header
    ————————————————–*/
    #header {
    height:100px;
    _height:auto;
    _position:fixed;
    width:600px;
    float:right;
    padding:4px 0px 0 0px;
    }

    #header .sitelang ul {
    margin:0px;
    padding:0px;}

    #header .sitelang li {
    margin:2px 0 0 0px;
    padding:0px;
    float:left;
    font-size:1.2em;
    line-height:0.85em;
    list-style-type:none;
    white-space:nowrap;}

    #header .sitelang li a {
    padding:0px 5px 4px 5px;
    background:#444444;}

    #header .fontsize ul {
    margin:0px;
    padding:0px;}

    #header .fontsize li {
    margin:-10px 0 0 0px;
    padding:0px;
    font-size:0.8em;
    font-weight:bold;
    list-style-type:none;}

    #header .fontsize li a {
    display:block;
    margin:0px 0 0 0;
    height:2.2em;
    width:1em;
    float:left;
    line-height:1em;
    text-align:center;
    color:white;

    background:#cccccc;
    border-right:1px solid #eCeCeC;
    }

    #header .login {
    margin:0px 0px;
    width:100%;
    list-style-type:none;}

    #header .login li {
    float:right;
    margin:0px;
    padding:0px;
    padding-right:0px;
    list-style-type:none;
    white-space:nowrap;}

    #header .login ul {
    margin:0;
    padding:0;
    list-style-type:none;
    }
    #header .login li a {
    display:block;
    padding:0 5px 0px 5px;
    clear:right;
    line-height:1.6em;
    background:#444444;
    border-left:1px solid #eCeCeC;
    list-style-type:none;
    }

    #header .pactions li {float:right;}

    #header .pactions li a{
    display:block;
    padding:0 5px 1px 5px;
    color:white;
    clear:right;
    font-size:0.95em;
    background:#cccccc;
    line-height:1.7em;
    border-left:1px solid #eCeCeC;
    list-style-type:none;
    white-space:nowrap;
    }

    #header .pactions ul li {
    list-style-type:none;}

    #header .pagegroup {
    padding: 14px 0 7px;
    display: block;
    }
    #pagetitle {
    float:left;
    clear:both;
    margin:-77px 0px 0 65px;
    }

    #pagetitle h1 {
    font-size:1.1em;
    line-height:1.2em;
    font-weight:normal;
    }

    #sitelogo {
    }
    #header .sitetitle {
    font-size: 22px;
    width:600px;
    line-height:1.1em;
    padding: 60px 0 0px 0px;
    text-align: left;
    }

    /* navigation
    ————————————————–*/
    #navigation {
    height:1.6em;
    line-height:1.6em;
    width:600px;
    clear:right;
    float:left;
    _line-height:0px;
    }
    #navigation ul {
    margin:0px;
    padding:0px;
    }

    #navigation li {
    float:left;
    margin:0px;
    padding:0px;
    padding-left:0px;
    list-style-type:none;
    white-space:nowrap;
    }

    #navigation .navres li {
    border-right:0px solid;
    float:right;
    margin:0px;
    padding:0px;
    padding-left:0px;
    list-style-type:none;
    white-space:nowrap;
    }

    #navigation .navlinks li a {
    display:block;
    padding:0 5px 0 5px;
    border-left:1px solid #eCeCeC;
    border-bottom:1px solid #eCeCeC;
    }

    #navigation .navres a {
    float:right;
    display:block;
    padding:0 5px 0 5px;
    background:#cccccc;
    border-left:1px solid #eCeCeC;
    border-bottom:1px solid #eCeCeC;
    }

    #navigation .navres ul {
    float:right;
    display:block;
    padding:0 0 0 0;
    background:#cccccc;
    border-left:1px solid #eCeCeC;
    border-bottom:1px solid #eCeCeC;
    }

    #navigation .navlinks, .navres, .selflink li a {
    font-size:1em;
    letter-spacing:0px;
    }
    * html #navigation a {width:1%;}

    The div classes login, pactions, sitelang and fontsize enclosed in #header, and with the div navres enclosed in navlinks. This is what the html template looks like:

    Code:


    Let me know if screenshots are helpful, and I will make some to post here. Hope there is a way to get the layout to work in IE as well without too much trouble.

    Cheers,
    -V

    # November 27, 2008 at 10:29 am

    Some screenshots to illustrate:

    Site in MSIE 6.0
    Site in MSIE 7.0
    Site in FF 3 (as intended, almost)

    Rob
    # November 29, 2008 at 10:43 am

    hey – could you link to the site? or copy and paste in the code from "Veiw source" so we have the full code as its rendered?

    Thanks :D

    # December 1, 2008 at 4:48 am

    Here’s the code for the page as displayed:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">





    Project Goals

    Test image, height should be reduced.

    Result 1

    text…

    Result 2

    text…

    Result 3

    text…


    class='inputbox searchbox' size='40' /> class='inputbutton searchbutton' value='Go' />

    Donor

    Implemented by

    Contributors

    Where is Mohajareen?

    Useful Links

    edit SideBar

    mohajareen.net © NRC (Norwegian Refugee Council) 2008


    Rob
    # December 1, 2008 at 5:11 am

    I would say, that you are probably going to start having problems because of the ammount of code you have.

    For example

    Code:

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

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