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