Why won't the vertical margins between <p> and <hr> collapse in IE7
Posted
by Nicolas
on Stack Overflow
See other posts from Stack Overflow
or by Nicolas
Published on 2010-05-26T13:03:23Z
Indexed on
2010/05/26
13:11 UTC
Read the original article
Hit count: 289
Hello all,
Perhaps I am missing something, but I can't explain this from any IE bug I know of. Why in this example do the margins of the <p> and <hr> elements collapse as expected in standards compliant browsers (i.e. FF3, IE8, etc) but not in IE7 (including IE8 compatibility mode)?
<!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" xml:lang="en" >
<head>
<title>IE7 Box Model</title>
<style type="text/css">
p {
border: 1px solid #00f;
background-color: #fefecb;
margin: 20x 0 20px 0;
}
hr {
margin: 20px 0 20px 0;
}
</style>
</head>
<body>
<p>
box 1
</p>
<hr />
<p>
box 2
</p>
<hr />
<p>
box 3
</p>
</body>
</html>
© Stack Overflow or respective owner
