firefox and margin-top

**c4g3** · Sep 1, 2007, 11:42

Hi, this is my first topic here.

Why Firefox don't show the "margin-top" and "margin-bottom" of the first and
last elements of the code below?

The code:

XHTML

<!DOCTYPE ETC> .....
<body>
<div id="rap">
<h1 id="header">Header</h1>
<h1 id="content">Content</h1>
<h1 id="footer">Footer</h1>
</div>
</body>
....

CSS

* { margin:0; padding:0; }

body { background-color:#099; }

#rap { margin:10px auto; width:760px; background-color:black; }

h1 { margin:105px; width:750px; border:1px solid green; }

#header { background-color:red; }

#content { background-color:white; }

#footer { background-color:blue; }

Thanks from BraSil

**mattalexx** · Sep 1, 2007, 11:46

Off Topic:

I think you can get rid of the "rap" DIV. Just take the styles from it and apply it to BODY

**all4nerds** · Sep 1, 2007, 11:52

Hello

margin collapse
http://www.maxdesign.com.au/presenta...op/slide46.htm
a bit more heavy explanation
http://complexspiral.com/publication...psing-margins/

PS there usually is only one H1 tag on a page

width 750 + left right margin of 2 x 105 = ?

A dirty simple trick is to add a border top bottom to the wrapper

**c4g3** · Sep 1, 2007, 12:02

Ops, i posted wrong css code. The correct is:

* { margin:0; padding:0; }

body { background-color:#099; }

#rap { margin:10px auto; width:760px; background-color:black; }

h1 { margin:5px; width:750px; }

#header { background-color:red; }

#content { background-color:white; }

#footer { background-color:blue; }

@ all4nerds: the h1 is only for this example

.

Firefox would not have to show the margins as the IE (6)?

how I can resolve this problem?

**all4nerds** · Sep 1, 2007, 12:10

Hello

read my post Please , H1 is block level and don't need a width set , with a margin or padding or border they adjust to a screen or container ( wrapper )

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<!-- saved from url=(0022)http://www.domain.com/ -->
	<style type="text/css">
	* { margin:0; padding:0; }

body { background:#099; }

#rap{margin:10px auto;width:760px; background:black;border-top:1px solid #ffff00;border-bottom:1px solid #ffff00;}

h1{margin:5px;border:1px solid green; }

#header{background:red;}

#content{background:white;}

	</style>
	<script type="text/javascript">

	</script>
</head>
<body>

<div id="rap">

<h1 id="header">Header</h1>

<h1 id="content">Content</h1>

<h1 id="footer">Footer</h1>

</div>

</body>
</html>

**c4g3** · Sep 1, 2007, 12:30

Ok, but firefox don't show the margin-top black (the color of div rap) as in IE 6.

**all4nerds** · Sep 1, 2007, 12:42

Originally Posted by c4g3

Ok, but firefox don't show the margin-top black (the color of div rap) as in IE 6.

Hello

My example looks the same in IE 6 7 FF OP ?

**c4g3** · Sep 1, 2007, 12:54

@all4nerds

Yes, but if you removed all the borders?

and thank you

**all4nerds** · Sep 1, 2007, 12:57

Hello

See links above, you can't always get what you want, you get what you need M J

PS div for main containers and proper use of H and P tags , there are ways to solve this by separating css (hack) or use floats, etc, both use more code and also need understanding, H Tags usually only need padding, and your model is rather theoretical

PS use a border color the same as your body background color

**c4g3** · Sep 1, 2007, 13:08

Thanks, man... Just one more thing...

And if i set the "overflow:auto" in the #rap? Same effect, but no extra padding or border... Any problem with this?

**all4nerds** · Sep 1, 2007, 13:11

Hello

No

**Paul O'B** · Sep 2, 2007, 07:58

Ok, but firefox don't show the margin-top black (the color of div rap) as in IE 6.

Due to collapsing margins the margin on the h1 collapses and would effectively become the margin on #rap instead thus pushing #rap further down the page. As #rap already has a 10px top margin then the effect is just to collapse the h1's margin to zero.

Collapsing margins are a complicated subject and you should read the links all4nerds pointed to, or my own take on this.