Menu
I have a problem with nested divs and using margin-top. I am hoping somebody could help me find a solution. I made a really simple example of what I am trying to do. Here is the link: [url]http://www.barretmonchka.com/connections/marginprob.html
In IE, the top margin is properly applied to the red div to distance it from the top of the blue div. However, in Firefox, the top margin of the red div is applied to the blue div (it’s parent element). Does anybody know what I could do? Your help would be so much appreciated.
Different doctypes did not help the matter.
Here is the code:
<html>
<head>
<title></title>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<style type=”text/css”>
table#main{
width: 100%;
height: 100%;
}
table#main td{
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
}
div#blue{
margin-right: auto;
margin-left: auto;
width: 780px;
background-color: blue;
text-align: left;
height: auto;
}
div#red{
width: 611px;
height: 484px;
background-color: red;
margin-top: 55px;
margin-left: 130px;
}
</style>
</head>
<body>
<table id=”main”>
<tr>
<td>
<div id=”blue”>
<div id=”red”></div>
</div>
</td>
</tr>
</table>
</body>
</html>
thanks so much,
Barret