margin-top and firefox

#1 March 10th, 2006, 06:25 PM

Hello,

I have the following css :

body {
background-color: #CACACA;
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
}

#divMain
{
width: 770px;
background-color: #FFFFFF;
margin: 0 auto;
}

#topPanelGrey
{
position:relative;
width: 750px;
margin-left: 10px;
margin-top: 10px;
background-color: #64646E;
border: solid 1px red;
}

and this html :

<body>
<div id="divMain">
<div id="topPanelGrey">
<img src="images/rainbow.gif">
<img src="images/cslogo-grey.gif">
<p class="linkwhite"><A href="who.html">Who is this site
for?</A></p>
</div>
</div>
</body>

In IE everything looks fine (it looks the way id expect it to look.

In firefox it seems to ignore margin-top: 10px; but it honours the
left margin ok. So theres a 10px gap between the left of divMain and
topPanelGrey but no gap at all between the top of divMain and
topPanelGrey.

If i increase the top margin in topPanel grey to 20 px it brings
everything down the screen by 10px, its as if ive increased the margin
of divMain by 10px.

Im confused, thanks for any help.

Paul

What is Bytes?

Popular Articles