Ie Absolute In Relative

From CSS Discuss

Jump to: navigation, search

IEWin 5.5 and upwards seem to have a bug with the absolute positioning within relative position. Recall that Absolute In Relative is the correct way to take elements out of flow, but have them positioned according to some element that is in the flow. An example is a sidebar that sits below a masthead.


Example


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><html><head>
<style type="text/css">
#outer {
	position:relative;
}
#middle {
	margin-left:200px;
}
#left {
	position:absolute;
	top:0px;
	left:0px;
	width:200px;
	}
</style>
</head>
<body>
<div id="outer">
	<div id="middle">
		middle
	</div>
	<div id="left">
		left
	</div>
</div>
</body>
</html>

Fixing

Using a Css Hack is not a terribly good plan, since most hacks feed to all WinIE, and in this case Win IE 5 is well-behaved.


The solution appears to be to set a height rule on the containing relatively-positioned element. You can set height:1px; with the Star Html Hack , and IE (stupidly) ignores it but behaves correctly with the inner elements.


As the bug appears to involve not considering the padding, a different Star Html Hack fix also works at least with IE6. You can set "left" of the absolute positioned element to a negative value. This may not work with Win IE 5 (confirm), so the height hack could be better.



Personal tools