2 replies [Last post]
elvendil
Offline
newbie
Last seen: 16 years 42 weeks ago
Joined: 2004-04-09
Posts: 4
Points: 0

Hi
I was refered to here by a few people who couldnt help with a problem i'm having with CSS layout in Mozilla.

http://www.tellstar.freeserve.co.uk/test/index.htm

The main-container DIV tag is the one that has the background graphic (the greyscale image) there should be grey right to the very top as that div tag starts at the top of the page. The banner DIV has a top border of 27px, which should push it down to reveal 27px of the main-container background. Only it doesnt in mozilla - because the outer tag has dropped 27px to where the banner tag starts. I just dont get why that's the case. Can anyone help?

blakems
blakems's picture
Offline
Enthusiast
UTah, USA
Last seen: 17 years 42 weeks ago
UTah, USA
Timezone: GMT-7
Joined: 2003-04-07
Posts: 60
Points: 0

relative positioned elements moving when they shouldnt

Change the following:
#banner-container{margin: 27px 0 0 0;}
to

#banner-container{margin: 27px 0 0 0;}
 and modify 
#master-container {padding: 27px 0 0}

It is a collapsing margin issue that you are dealing with.

-bMs-
http//www.blakems.com !important;

elvendil
Offline
newbie
Last seen: 16 years 42 weeks ago
Joined: 2004-04-09
Posts: 4
Points: 0

relative positioned elements moving when they shouldnt

brilliant! That's fixed it. thanks for that Smile

*goes to read up about collapsing margins*