Forum Moderators: not2easy
I'm breaking my head over this for a while. I have a page with 3 boxes, each containing the next: red, white and blue. The blue box has a margin of 60px and the white box has a margin of 90px. It looks find on IE but on FF the top margin of the blue board isn't applied and both top and bottom margins of the white box aren't applied. When I add a border to those boxes, everything looks normal (except that I'm not interested in borders :))
Here's my code:
<!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" lang="en">
<head>
<title>Whatever</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
<!--
html, body
{
text-align: center;
}
html, body
{
text-align: -moz-center;
}
-->
</style>
</head>
<body>
<div style="width:800px;background-color:red;">
<div style="width:100%">
<div style="background-color:white;width:600px;margin:90px">
<div style="background-color:blue;width:300px;margin:60px">blue box with 60px margin.</div>
<div>
Text inside the white box
</div>
</div>
</div>
</div>
</body>
</html>
I appreciate any help...
Thank you
Rizoto
First, you have too many </div> tags, but that is not the problem. Using the code below will result in the same display in IE and FF:
<div style="width:800px;background-color:red;padding:90px;">
<div style="background-color:white;width:600px;padding:60px;">
<div style="background-color:blue;width:300px;">blue box with 60px margin.</div>
Text inside the white box
</div>
</div>
Marshall
Thank you very much for both the greetings and the solution. From what I've read, it looks like it's a "collapsed margins" problem so your "padding" solution makes sense.
Thanks again
Rizoto
