Menu
In an HTML 5 document, I am trying to place two pre elements side by side using float:left like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Pre and Float Test</title>
</head>
<body>
<pre style="float:left; margin-right:1em"> 1
2
3
4</pre>
<pre>The quick
red fox
jumped over
the lazy brown dog.</pre>
</body>
</html>Internet Explorer 9 renders the HTML in the way I expected with the top of the left pre element aligned with the top of the other pre element, like this:
However, both Google Chrome and Firefox render the document with the pre that is floated left about one line lower than the other pre, like this:
Given the history of Internet Explorer, I have to believe that Chrome and Firefox are correctly following the standard. Even more interesting is that when I replace the pre elements with div elements and use <br> tags at the end of each line, like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Pre and Float Test</title>
</head>
<body>
<div style="float:left; margin-right:1em"> 1<br>
2<br>
3<br>
4</div>
<div>The quick<br>
red fox<br>
jumped over<br>
the lazy brown dog.</div>
</body>
</html>the left div does not move down:
Why does the standard require the left pre to move down? How can I stop Chrome and Firefox from moving the left pre down? I know how to work around it with CSS "position:relative; top:-1em", but this seems like a hack waiting to break. Is there a better way to stop Chrome and Firefox from moving the left pre down?
942
Why does the standard require the left pre to move down?
It doesn't. The difference is simply in the 'user agent stylesheets'. Firefox and Chrome both use:
pre {
margin:1em 0;
}
As the floating element is no longer part of the flow due to the floating itself, its top margin cannot collapse with the default margin on the body (8px in my Chrome here). The non-floating element however does, and its margin thus correctly collapses, rendering it a bit higher - the difference between 1em and 8px to be precise.
None of the referenced browsers are 'wrong', there are no strict rules for details like this in the user agent stylesheets - apart from the special meaningless elements <div> and <span>, which should by their very definition have no stylings, specifically margin or padding. As such the elements render as expected when replaced with divs.
IE9 isn't wrong, just different. Apparently it was changed in later versions to be more in line with the other main browsers.
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
