IE7 rendering bug: Heading before a floated list
Posted
by Tomalak
on Stack Overflow
See other posts from Stack Overflow
or by Tomalak
Published on 2010-04-30T22:47:00Z
Indexed on
2010/04/30
22:57 UTC
Read the original article
Hit count: 210
Can somebody please explain this IE7 bug to me? It occurs in Standards and Quirks mode rendering, it does not occur in Firefox, Chrome or IE8 (though switching the rendering engine via IE8 developer tools will provoke it). Here's the HTML to reproduce the behavior:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
/* h1 { margin: 0px; } */
ul { padding: 0; margin: 0; list-style-type: none; }
ul li { float: left; width: 140px; padding: 3px; }
div { clear: left; padding: 3px; }
div, li { background-color: OrangeRed; }
/* ul { border: 1px solid blue; } */
</style>
</head>
<body>
<h1>Heading 1</h1>
<ul class="t">
<li>bla 1</li><li>bla 2</li><li>bla 3</li>
</ul>
<div>yada</div>
</body>
</html>
- This renders a floated
<ul>above a<div>(supposed to be a tabbed user interface). - There's an unexplained gap between the
<div>and the<ul>. - Now do one of the following:
- Uncomment the CSS rule for
<h1>. The gap disappears and the list is rendered tight to the<div>, but also very close to the<h1>. - Alternatively, uncomment the CSS rule for
<ul>. Now a narrow blue border is rendered above the<ul>, but the gap disappears.
- Uncomment the CSS rule for
My questions:
- How can the
<h1>margin (I suppose any block level element with a defined margin will do) affect the space below the list? - Can I prevent this from happening without having to set header margins to 0 or messing with the
<ul>borders (settingborder-width: 0;does not work BTW)?
I suppose it is connected to the <ul> having no width because it has only floated children. Maybe someone with more insight into IE7 peculiarities than I have can explain what the rendering engine is doing here. Thanks!
© Stack Overflow or respective owner
