Edinburgh Web Development

Margin problem in Firefox and Safari

by Iain Wilson

20 March 2008

We came across a problem the other day using margin-top with Firefox and Safari. It occurs when you have a containing div with a background followed immediately by another div with margin-top. For example:

<div style="background-color:#FF0000; height:80px;"> 
<div style="margin-top:40px; background-color:transparent;">
content here 40px down 
</div></div>

 

The problem in Firefox and Safari is that the margin of the second div is applied to the containing div. The content of the second div is positioned ok but it does not inherit the background of the container.

The solution The only way we've found around it is to change the margin-top element to a padding-top :

<div style="background-color:#FF0000; height:80px;"> 
<div style="padding-top:40px; background-color:transparent;"> 
content here 40px down 
</div></div>

 

Liked this article? Please share it with your friends and colleagues.


comments powered by Disqus
 
Blot Design,
10 Colinton Road, Edinburgh, EH10 5DT,
0131 208 1792
Terms, Cookies & Privacy