problem with margin. (different result in IE and firefox)

**amirabbas** · Sep 12, 2007 04:48

hi

i have problem with this piece of code
i've search but i couldn't find any answer for this problem

please see this code

Code:

<div style="width:700px; height:100px; background:#ccc;">
	<h1 style="font:10pt tahoma; margin:30px; background:#eee;">hello</h1>
</div>

IE (7, 6):

firefox, opera:

im using xhtml 1.0 doctype
it seems that opera and firefox ignore margin that applied to h1 tag but IE take that margin into account.

when i change the code to this form:

Code:

<div style="width:700px; height:100px; background:#ccc; border:1px solid #fff;">
	<h1 style="font:10pt tahoma; margin:30px; background:#eee;">hello</h1>
</div>

just with adding 1px border to div tag, all browsers show the page correctly and opera and firefox won't ignore margin his time.

what is the problem

thanks in advance

**all4nerds** · Sep 12, 2007 05:27

Hello

Collapsing margins
http://www.sitepoint.com/forums/showthread.php?t=500949

problem solved ?

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">
	*{padding:0;margin:0;}
	
	.x{width:700px;background:#ccc;padding:30px 0;}
	
	.x h1{font:12px tahoma,sans-serif;background:#eee;margin:0 30px;}
	</style>
	<script type="text/javascript">

	</script>
</head>
<body>

<div class="x">

<h1>hello</h1>

</div>

</body>
</html>

**amirabbas** · Sep 12, 2007 06:14

ow.
margin collapsing ?
i'd thought that margin collapsing won't apply to nested elements.
i found this article too:

http://www.researchkitchen.de/blog/a...collapsing.php

this article explain this problem completely
thanks a bunch all4nerds