Nested Div problem in Firefox

programming web dev
1

The following is a snippet of the code I’ve written for a site:


....
<div id="content">
		<div id="header">
			test
			<h1>Title</h1>
		</div>
		<jdoc:include type="module" name="breadcrumbs" />
		<jdoc:include type="modules" name="top" />
		<jdoc:include type="modules" name="left" />
		<jdoc:include type="component" />
		<jdoc:include type="modules" name="right" />
	</div>
</div>
...

Now that “header” div is supposed to appear at the very top boundary of the “content” div. With that word “test” exactly where it is, this works correctly in firefox. If I remove that word “test” then suddenly there is a gap between the top of my “content” div and the top of my “header” div.

Does anyone know why this is happening? I’m thinking it must have something to do with the interactions of block level elements because <div> and <h1> are block level, while just having the word “test” is not…

I need to be able to take the word “test” out of there and still have it work…and by the way, this problem does not appear in Internet Explorer (go figure).

Thanks.