Try this bit of HTML with IE 7. Then try changing the "sdiv" tags to "div". Without the seemingly meaningless div, IE adds the padding to the outermost div to all of the box class elements. With the div, it doesn't add it to any of them.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style type="text/css">
.box {
width: 200px;
clear: both;
margin-bottom: 6px;
background: white;
float: left;
}
</style>
</head>
<body style='background: #999999'>
<div style='padding-top: 60px'>
<sdiv><!-- Turn into start/end DIVs to see the difference -->
<div class="box"></div>
</sdiv><!-- Turn into start/end DIVs to see the difference -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Floating the containing div should get things under control (in IE's own special way) without the extra html.
ReplyDeleteI use the Float Nearly Everything technique as soon as I get any weirdness with IE floats and it sorts most of them out.
(but, yes, that is weird one)
ReplyDelete