In this case, internet explorer doesn't seem to give the right amount of margin. It looks like it measures the margin from the top of the box and ignores the padding. Why is this? Is there a good workaround? Here's an example:
<!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">
<head>
<title></title>
<style type="text/css">
.messagebox
{
border: solid 2px black;
background: blue;
color: white;
padding: 10px; /* Problem only when padding set */
}
h1, h2, h3, h4
{
margin-top: 12px;
}
</style>
</head>
<body>
<div class="messagebox" style="width: 300px">
<h4 style="text-align: center">In IE, this text is 10px higher than in FF.</h4>
</div>
</body>
</html>
I'm working in IE7 and FF3. Thanks.