Relative Posiitioning ( and margins) in IE

I know it’s a bit of a general question but i am trying to grasp how IE (5.5- 8) handles positioning, especially relative positioning.

On nice browsers, I know that setting position:relative on an element allows that element to be displayed relative to where it was going to be displayed originally ( in the document flow, leaving the space that element would have occupied, originally, “blank”). More importantly, descendants of that element will be positioned relative to tat element. In a sense , the last ancestor with RP sets the grid used for any descendants AP coordinates, and becomes the beginning of the "flow: for any descendants RP.

I know that sounded kinda clumsy , but it serves me well when trying to predict how a compliant browser will interpret positioning. but IE still seems rather random.

example one:switching VERTICAL display order.
Lets say the goal is to make and element that appeared sencond in the code, appear first.

Code order:
Div1= Height 340px;
Div2=Height 2em;
Div3=height 5em

in a compliant browser if works in a very straight forward manner.

DIV1= top:5em( the height of DIV2)
DIV2=top:-340px (the height of DIV1)

in IE these seem to to not add up. I have simplified this example. so there is no padding…or even margin to worry about and it still behaves wonk in IE.

example2:

I was helping someone on this forum create a fluid-center , equal height column layout that included a 10px gap between columns. I used floats, margins and relative positioning. works fine on compliant browsers. IE browsers refuse to position the two floated children element over the left/right borders o the parent element. Again i know IE has it quirks , but this just seems random , changing any of the parameters for margin or position has no actual effect…???

CSS:
#left, #right, #center{ float:left;}
#left{ margin-left:-100%; background:red; position:relative;left:-210px; width: 200px; }
#right{margin-left:-200px;background: orange; width: 200px; position:relative;right:-210px;}
#center {width:100%; background: gray; }
Content{border-left:200px solid pink; border-right:200px solid orange; padding:0 10px; min-width: 220px; position: relative }
.clr{display: block; clear: both}

MARKUP
<div id=“content”>
<div id=“center”>Center content<br>dadfads</div>
<div id=“left”>left</div>
<div id=“right”>right</div>
<span class=“clr”></span>
</div>

If someone here can clue me in how IE browsers are “thinking” it woudl be greatly appreciated

Hi,

You can’t position from a relative parent in IE less than 8 unless the element has a layout or all bets are off and the positions will be an IE “best guess” as it doesn’t keep track of children unless haslayout is present (which is the way IE was designed).

However in your example 1 I get identical results in all versions of IE and Firefox (assuming I’ve copied your code correctly).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.div1 {
    height:340px;
    top:2em;
    position:relative;
    background:red
}
.div2 {
    height:2em;
    position:relative;
    top:-340px;
    background:blue
}
.div3 {
    height:5em;
    background:green
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>


In your example2 IE treats the margin-left:100% as 100% of the screen width and to bring it back you would need to use left:210px and not left:-210px as per other browsers. You also need haslayout on the main container or the columns won’t show anyway.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#left, #right, #center {
    float:left;
}
#left {
    margin-left:-100%;
    background:red;
    position:relative;
    width: 200px;
    [B]left:-210px;
}
* html #left{left:210px}[/B]
#right {
    margin-left:-200px;
    background: orange;
    width: 200px;
    position:relative;
    right:-210px;
}
#center {
    width:100%;
    background: gray;
}
#content {
    border-left:200px solid pink;
    border-right:200px solid orange;
    padding:0 10px;
    min-width: 220px;
    position: relative
}
[B]#content{zoom:1.0}[/B]
.clr {
    display: block;
    clear: both
}
</style>
</head>
<body>
<div id="content">
    <div id="center">Center content<br>
        dadfads</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <span class="clr"></span> </div>
</body>
</html>


The problem with using that method anyway is that at small screen widths the whole thing goes to pot and the columns jump around which is why you added the min-width which of course ie6 doesn’t understand. It is the same issue as seen on nearly all the layouts here and why I don’t like it.

Hope that explains some of it :slight_smile:

In example 2 you can make IE6 behave if you nest a 100% inner so that it can calculate its -100% correctly.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#left, #right, #center {
    float:left;
}
#left {
    margin-left:-100%;
    background:red;
    position:relative;
    width: 200px;
    left:-210px;
}
#right {
    margin-left:-200px;
    background: orange;
    width: 200px;
    position:relative;
    right:-210px;
}
#center {
    width:100%;
    background: gray;
}
#content {
    border-left:200px solid pink;
    border-right:200px solid orange;
    padding:0 10px;
    min-width: 220px;
    position: relative
}
#content{zoom:1.0}
.clr {
    display: block;
    clear: both
}
#main{
    width:100%
}
</style>
</head>
<body>
<div id="content">
<div id="main">
    <div id="center">Center content<br>
        dadfads</div>
    <div id="left">left</div>
    <div id="right">right</div>
    </div>
    <span class="clr"></span> </div>
</body>
</html>


However it gets the same effect as the using the hack +210px and it’s more mark up.

PS don’t use a span as a clearer as that is non semantic and can (rarely) be buggy in IE. Clear only applies to block elements anyway so use a block element from the start.:slight_smile:

Paul,
as usual, thank you for being quite helpful.

  1. Yeah, I am beginning to avoid having non semantic clearing elements (favouring overflow:hidden/auto) but in this case I did want to see the effect, because I honestly had zero clue as to what IE was doing.

  2. I was under the impression that setting height/width on an element triggered hasLayout in IE? Or did you mean the parent has to have hasLayout. In which case I would still have to ask if you mean that in my example I would have to set hasLayout to the body element?!?

  3. does IE 5.5 mac have the same bug?

Yes setting a dimension will cause the element to gain a layout. The body element is one of a number of elements that always have a layout. You can see the full list in the reference here.

The element in your layout that doesn’t have a layout in IE6 is this one:


#content{border-left:200px solid pink; border-right:200px solid orange;  padding:0 10px; min-width: 220px; position: relative }

min-width is a haslayout trigger for ie7 only.

(The first part of my post was just a general remark that you shouldn’t use position:relative as a stacking context unless you give it a layout first.)

  1. does IE 5.5 mac have the same bug?

I have wiped all my ie5 mac knowledge from my tiny brain as I no longer support it :slight_smile: It did not however have haslayout issues as far as I can remember but it does have a myriad of other wonderful issues and was the hardest browser to code for although at the time it had more support than most.

IE5.x PC has the similar issues as IE6 … and many more of its own. :slight_smile:

Thanks again, Paul.

I seem to be the only one who still struggles with IE5.5 MAC. :o