SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru LinhGB's Avatar
    Join Date
    Apr 2004
    Location
    Melbourne, Australia
    Posts
    902
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't get positioning right in IE

    Hi everyone, a friend of mine just introduced me to sitepoint. I've been reading articles on here, and they have been very helpful Atm I'm working with a few friends in an uni project which involves designing a databased driven site. Anyway I assign myself to do the web design part. I just started last night and atm I'm stuck with this positioning problem in IE. Things work as intended for me in all other browsers but IE.

    This is the sample page: http://members.optusnet.com.au/~linhgb/351/sample.html

    I can't get those content blocks to start at the same level as the user menu in IE.

    This is what I have in my CSS file:

    Code:
    #container {    
        position: absolute;
        width: 800px;
        height: 100%;
        top: 0px;
        right: 0px;
        bottom: auto;
        left: 0px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: auto;
        margin-left: 0px;
        padding: 0px;
    }
    
    #menublock {
        margin: 0;
        padding: 0;
        position: fixed;
        z-index: 10;
        display: block;
        width: 800px;
        height: 150px;
        top: 0px;
        right: 0px;
        bottom: auto;
        left: 0px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: auto;
        margin-left: 0px;
    }
    
    #content {
        position: absolute;
        width: 800px;
        height: auto;
        top: 150px;
        right: auto;
        bottom: auto;
        left: 0px;
        padding: 0px;
    }
    
    .usermenu {
        position: fixed;
        width: 170px;
        height: auto;
        top: 150px;
        right: auto;
        bottom: auto;
        left: 0px;
        margin: 10px 0px 0px 0px;
        padding: 0px;
    }
    
    .contentblock {
        position: relative;
        z-index: 0;
        width: 598px;
        margin: 10px 0px 10px 200px;  
    }
    I'm using fixed positioning for #menublock (the top horizontal menu) and .usermenu (the left side menu). I know that IE doesn't support it and current workarounds aren't as good. I just want to have that feature exclusively available for users who have better browsers ^_^ (I like that feature) and for the IE folks, they can just scroll the whole thing down. I hope that doesn't affect the .contentblock one and screw up its position.

    Edit: I also have this doctype, which is recommended by the MSDN site to turn on standard compliant mode for IE

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    How can I get .contentblock to start at the same level as the user menu ? I just started learning CSS not so long ago so excuse the newbieness. Many thanks in advance !

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    IE doesn't understand position:fixed so you will have to offer alternative positioning.

    Add this to the end of the stylesheet (after all the other styles so it doesn't get overwritten).

    Code:
    *html .contentblock {top:10px}
    * html .usermenu {position:absolute;top:0px;}
    (including the asterisk)

    This should even things out a bit.

    Paul

  3. #3
    SitePoint Guru LinhGB's Avatar
    Join Date
    Apr 2004
    Location
    Melbourne, Australia
    Posts
    902
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works beautifully, thank you so much, Paul !


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •