H1 tag pushes DIV down in firefox

FF CSS Bug?

[designaweb]

Hi all!

I've got the following HTML:

<div class="maincontainer">

 <div class="mainleft"></div>

 <div class="mainright">

 <div class="header"></div>

 <div class="content">

  <div class="text">
      <h1>title</h1><p>text</p>
     </div>

 </div>

 </div>

</div>

And the following CSS:

body {
background-color: #7E7E7E;
text-align: center; /* IE fix */
}

.maincontainer {
width: 750px;
background-color: #292929;
margin-left: auto;
margin-right: auto;
height: auto;
text-align: left; /* reset text alignment */
}

.mainleft {
position: relative;
}

.mainright {
position: relative;
left: 210px;
}

.header {
width: 540px;
height: 180px;
background-image: url('../images/header_bg.jpg');
background-repeat: no-repeat;
background-position: bottom left;
}

.content {
font-family: Arial;
width: 540px;
height: auto;
background-color: #525252;
}

.text {
background-color: #fff;
}

In IE, all works well, but in FF (1.5.0.1) the content DIV is being pushed down by the H1 tag... As soon as I remove the <h1> tag, all works as expected... Anyone know a workaround?

[designaweb]

I have simplified my example below, which has the same issue... It is not just the <h1> tag causing this weird behaviour in FF, but the <p> tag does the same thing...

Try this:

<div style="width: 300px; background-color: blue;">
<div style="height: 100px; background-color: green;"></div>
<div style="height: 100px; background-color: orange;">
<p>text</p>
</div>
</div>

Also, strangely enough, adding a border to the div holding the "text" solves the issue... But, that's not how it should work, should it?

[outrun]

To make sure you code is consistent in all browser make sure you add a doctype and addtionally add padding and margins to all your elements including in your case <p></p> and <h1></h1>.

[designaweb]

I think I have that covered, but I will check and report back, thanks for the suggestion!

[JAB Creations]

Set your header to have no margins as they do by default. Once you do in effect your code would look like this...

<h1></h1>
<br>
<p></p>

Because your header is still a block element by default you don't need to add the br element, it will still break the line on it's own.

So what I'm saying is remove the margin and your problem should be solved.

John

[saucey]

Adding the following should fix your problem.

.text h1
{
margin:0px;
}

[designaweb]

Adding a margin to the <p> or <h1> seems to do the job as suggested, thanks for the help.

However, I have no idea as to "why" it works. Is there someone who can explain this to me? I like fixes, but I love learning new stuff...

[Demaestro]

Actually FF was doing the correct behavior it was IE that was doing it wierd, it just turns out that the weird thing is was doing was what you wanted.

the reason the margin:0px works is all the block leel elements are padded by default. It is kind of like the cellpadding in a <td> tag. If you add a border then say cellpadding="0" then the text will be right up against the border. If you make it 5 then it moves away, giving the <td> element some padding.

Same for the <h1> tags except the padding goes around the whole title element.

[designaweb]

Demaestro, I see what you mean. However, for me, not knowing much about how CSS *actually* works, it doesn't make sense that is pushes the whole DIV down. In my opinion it should only push the H1 down *within* the DIV?

[saucey]

Yeah, it's hard to get your head around how it 'should' act and how it 'does' act sometimes.

When I first went to CSS exclusive sites, I would put a border around everything when I ran into a problem. That helped me A Lot to see what was going on.

For your situation, it might have helped as you can see that the space beneath the h1 text is the same as the space above it. And since you know that it isn't padding, since the box is tight around the h1 text, it has to be margin...

<div style="width: 300px; background-color: blue;">
<div style="height: 100px; background-color: green;"></div>
<div style="height: 100px; background-color: orange;">
<h1 style="border:1px solid red;">Testing Margin</h1>
<span style="background-color:#ffffff;">test text beneath</span>
</div>
</div>

[kk5st]

Margin collapse can be a frustrating subject, especially when IE makes such a mess of it. Modern browsers are doing exactly what you really would want them to do; it's just that it doesn't always seem that way. :) See Meyer on Uncollapsing Margins [complexspiral.com].

cheers,

gary