Forum Moderators: not2easy
1. There must be at least 1 item below this in the markup
2. The inner div must have any bottom padding
Here's a code example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title></title>
<style type="text/css">
.shortcuts
{
background: #ccc;
margin: 0;
padding: 0;
}
.shortcuts h4
{
margin: 0;
border-bottom: 1px solid #fff;
padding: 0 0 0 5px;
}
.shortcuts h4 span
{
padding-right: 5px;
}
.shortcuts div.section
{
background: #eee;
margin: 0;
padding: 0;
}
.shortcuts div.wrapper
{
margin:0;
padding: 0;
padding-bottom: 1px; /* ANY BOTTOM PADDING TRIGGERS THE BUG */
}
</style>
</head>
<body>
<div class="shortcuts" id="adminshortcuts">
<h4><span>Administration Shortcuts</span></h4>
<div class="section">
<div class="wrapper">
Test
</div>
</div>
</div>
X <!-- Deleting me cures the bug... why? -->
</body>
</html>
I can't seem to figure out which IE bug this is, and how to fix it.
I can't figure out if it has been "named" yet ;) but it is an IE hasLayout [webmasterworld.com] error. (and I don't think it is a specific bug as it has *not* been fixed in IE7)
It also occurs with border and if there is only one div nested and there is an HTML comment! don't ask me why heh :o
here's minimum markup I got it triggered with
<body>
<div class="box">X<div class="wrapper">Test</div><!----></div>
X<!-- Delete me -->
</body>CSS:
.box {
background: #fcf; /* this background stretches */
}.wrapper {
background: #cfc;
border: 1px solid #000;
/* border-bottom: 0; */ /* uncomment to test border too */
}
Fix = set hasLayout == true on the
.wrapper.wrapper {zoom: 1;}width: 100%;Strange one!
Suzy
Microsoft has explained why it's problematic to just enable hasLayout pr. default in an article [msdn.microsoft.com]. IE is ages behind when it comes to CSS and rendering, even in v.7...
