PDA

View Full Version : IE6 margin-top inside division - bug ?



rich8374
Nov 23rd, 2006, 01:22 PM
Hi, the code below behaves differently in IE6 to other browsers (IE7, Firefox 2, Opera 9). In IE, the browser puts the margin-top inside the coloured div - in the others, it puts the space above the div.
If I remove the width from the div it behaves like the others again.
It is easy to work around but I was wondering if anyone knew if it had a name or explanation.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Code Test</title>
<style type="text/css">
h1 {
margin-top: 80px;
}
.child {
width : 540px;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<div class="child" id="child">
<h1>Code Test</h1>
<p>With no width, the margin on the H1 takes space outside the division. When width is added to the child division no change for most browsers but IE 6 includes the margin in the child division.</p>
</div>
</body>
</html>

Thanks.

armyman
Nov 23rd, 2006, 10:29 PM
are u talking about the space above the Code Test if so to remove that just do: (this worked when i tested it)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Code Test</title>
<style type="text/css">
.child {
width : 540px;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<div class="child" id="child" style="width: 487px; height: 192px">
<h1>Code Test</h1>
<p>With no width, the margin on the H1 takes space outside the division. When width is added to the child division no change for most browsers but IE 6 includes the margin in the child division.</p>
</div>
</body>
</html>