A Newbie Margin ? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

MCD -> A Newbie Margin ? (7/23/2008 7:58:09)

I'm in the process of building my second tableless website. I am creating a basic header, 3 column, footer layout. I want a 1% margin around my header. The following works fine in IE7 but there is no top margin in FF. Would someone give me or point me to the problem of this dilemma? Here is my header css.

#outerWrapper #header {
background-color: #99cc99;
margin: 1% 1% 1% 1%;
padding: 10px 10px 10px 10px;
font-weight: bold;
border-bottom: solid 1px #627850



Tailslide -> RE: A Newbie Margin ? (7/23/2008 8:22:57)

Sounds like a border collapse issue. If you have margins on different divs touching each other they'll collapse in Mozilla (and opera?) browsers. This is to prevent double margins (e.g. on a paragraph with top and bottom margins in theory there'd be double margin between paragraphs which isn't what you actually want - you'd actually want only one margin-depth between paragraphs).

The simplest way around this is to add a border-top to the header in the same colour as the header or the outer div. This is because in theory with a border there now the two margins aren't touching.

Other ways around it are to use absolute or relative positioning (usually more trouble than it's worth - sometimes using RP is ok) or floating the div - again generally not the best solution in this sort of situation.



MCD -> RE: A Newbie Margin ? (7/23/2008 8:38:59)


quote:

ORIGINAL: Tailslide

Sounds like a border collapse issue. If you have margins on different divs touching each other they'll collapse in Mozilla (and opera?) browsers. This is to prevent double margins (e.g. on a paragraph with top and bottom margins in theory there'd be double margin between paragraphs which isn't what you actually want - you'd actually want only one margin-depth between paragraphs).


I knew you would solve the mystery for me. My hair is getting thinner every day. Thanks for your help Tailside.



Tailslide -> RE: A Newbie Margin ? (7/23/2008 9:19:40)

No problem at all!



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.1074219