Forums

Get help. Give help. A Web Design and Development Community.

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)

    # November 29, 2008 at 10:43 am

    This reply has been reported for inappropriate content.

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




    ar_title | Reconstructing Mohajareen, Nahr al-Bared


    Project Goals

    Test image, height should be reduced.

    Result 1

    text…

    Result 2

    text…

    Result 3

    text…


    Donor

    Implemented by

    Contributors

    Where is Mohajareen?

    Useful Links

    edit SideBar

    mohajareen.net © NRC (Norwegian Refugee Council) 2008


    # December 1, 2008 at 5:11 am

    This reply has been reported for inappropriate content.

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

    For example

    <

    div class=”bbcode_code”>

    Code:

    <

    div class=”bbcode_code_body”>ar_title | Reconstructing Mohajareen, Nahr al-Bared

    <

    div id=”pagecont”>

    <

    div id=”container”>

    <

    div id=”subcontainer”>

      <div>
         <!--PageHeaderFmt-->
         <div id="sitelogo"><div class="login"></div>
    

    you open 5 divs before you get to the header, personally I would change it to be like this:

    <

    div class=”bbcode_code”>

    Code:
    ar_title | Reconstructing Mohajareen, Nahr al-Bared

    DIV’s are great, its true, but other elements are just as good. Firstly you can style your <body> and <html> tags, then you can use a single wrapper for the whole site.

    You could even use your html/body tags as the wrapping elements – although it works ok in FF, IE says no… :cry: so don’t :)

    Now im not sure if you want your nav bar on the right as high as that, but you can style your whole nav bar within the "ul" tags and create it as a list. This is because the UL tag is rendered the same as a DIV – a block element.

    I would use the H1 tag for your sites main header, this also renderes like a DIV because it is also a block element. This means you can use it like you would use a div, but without the need for another div!

    Problems mostly happen when code gets too heavy. The more code you have, the more chance there is for something not to work across the browsers – then when you have that problem, tring to fight your way through pages of code to make it work is a real battle. Because of the nature of CSS the problem might not even origionate from the place you are seeing it manifest, cause major hairloss for you :)

    personally I would recode, styling what is there first and adding divs when needed. Here are some helpful links to give you an idea about what elements are what :)

    Block Elements
    Inline Elements

    I hope that helps as a starter…

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

You must be logged in to reply to this topic.

We have a pretty good* newsletter.