Can't get positioning right in IE

**LinhGB** · Apr 22, 2004 08:28

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 !

**Paul O'B** · Apr 22, 2004 09:02

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

**LinhGB** · Apr 22, 2004 09:08

That works beautifully, thank you so much, Paul !

User Tag List

Thread: Can't get positioning right in IE

Thread Tools

Display

Can't get positioning right in IE

Bookmarks

Bookmarks

Posting Permissions