odd gap in FF & Opera 1

[1DMF]

I can't work out why there is a gap between the #header and #content divs

http://www.independentmortgagenetwork.co.uk/index.html

in IE they look fine but in FF & Opera the applied background image seems to disapear for the top row of the div.

however if I place a border on #content then the div displays correctly.

why is this happening?

thanks 1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

ok i've worked out why it's doing it, because i have a background applied, and then a nested div with class .post which has a padding-top of 20px, that means technically there is nothing in the top part of the the div.

ok I understand why, but surely that is wrong, I have a div in it and that div has content which has padding of 20px, not margin.

anyway I understand what's happening rightly or wrongly, the question is how do I fix it?

I tried placing   but that then increased the gap by twice as much even though the background image showed.

would the only way round this is to place a transparent image 1px high within the div?

placing content on the page for the sake of it can't be semantic nor good practice, can someone offer an alternative?

thanks 1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

You are going to love me. It is the problem that has plagued you forever. The dreaded "collapsing margins". You have a margin-top on your h1 element in the content. That produces that gap. Refer to the old website I gave you on methods for fixing it.

 

[1DMF]

lol - no not that please not that!!!!

odd though the gap seems to stay so the margin isn't collapsing persae it's more like the BG image isn't showing.

Why does mozilla and opera do this, you have to admit IE handles margins much better, especial now IE7 is more CSS compliant!

Oh well better go dig out that link and see if this time i can understand it!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

nope still don't see how it's effecting my page, neither .post nor #content have margins applied to them so why is the h1 margin collapsing? it's not a matter of one margin winning over the other oas I understand this ...

http://www.andybudd.com/archives/2003/11/no_margin_for_error/

Where are there two margins meeting for one to collapse?

I have a main div '#content' with no margin or padding, then a div of class '.post' with no margin or padding and then the <h1> with the margin.

So what do i apply to what to resolve this?


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

Here's an answer to your previous query:
Since the standards say that margins should behave this way, I will say that Opera and Geckos are better at it, following the standards. Standards sometimes make little to no sense, but it is appropriate to respect them (and maybe file a complaint about certain behaviour and see if they fix it).

Look on the bright side. At least you know what it is and there are easy fixes described on that website.

And to the new one:
Huh? Have you tried applying any of the solutions described there? If you would, you would see that they work.

By removing the border around the outer div, the margins of the contained elements are now adjacent to the margin of the preceding element (in this case a paragraph tag) and have all collapsed together. Now while this is what margin collapsing is supposed to do, if you don't know what's going on here, this kind of thing can be a bit of a head scratcher.

Ok, a bit of a head scratcher, but just look at the graphic right next to this text. It is exactly what you describe.

 

[1DMF]

I appreciate your input, but I do not beleive this is the problem I am experiencing.

The reason for this is if I was having margin collapsing the element would not be positioned where I want it, obeying the margin on the element.

The margin would collapse, and so the element would appear higher up the containing div, but it doesn't.

the element <h1> is obeying the margin applied to it, however the image applied to the background on #content, seems to vanish? the layaout is exactly where I want it - everything is perfect, it's just the image 5px tall repeat-y applied to #content, the first 'row' or should I say the space which has a margin 'whitespace' does not show the BG image, but the gap is still there.

I have to therefor conclude the margin is not collapsing, otherwise the space would not be there, isn't that right?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

To make it easier for me to explain i've created an example page with some simple code

http://www.independentmortgagenetwork.co.uk/test.html

you will see I do not have any margin collapsing, the <h1> is placed 1.5em from the top of it's containing div .post, however the BG image applied to #content does not show for the area of the margin within the .post div.

so the space within the .post div is not showing the BG image applied to the containing div #content

it's as though the .post div is adopting the page BG because the top part has no content and failing to recognise the image being applied to the containing div behind it.

Any ideas anyone?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

Oh, you're right. It's not the collapsing margins thing because you don't believe it is. The fact that removing the margin on <h1> fixes your problem does not matter. The fact that the problems looks exactly the same as the example shown on Andy's website does not matter. The fact that applying any of the fixes Andy describes fixes your problem does not matter either. Because you say it is not, because your (failed) inner logic makes you believe it is not. So, you're right. It is not. Since it is not, and all Andy's fixes won't work, then I admit I cannot help you solve this.

 

[1DMF]

andy states in his example that the collapsing margin works as follows.

1 element has 20px, another 20px put them together they should have a 40px gap , but they do not they have a 20px gap because 1 margin colapses. -> this is not what is happening to my element.

the gap is not less than that applied so how is it this phenomena, that's what I don't understand?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

Told you before. You can either accept it that what Andy and I are telling you is the truth, apply the fix and have it working. Or you can pursue your fruitless endeavor of not understanding that article (still) and look for a non-existant fix for your problem. Who knows, maybe you'll find some other way of screwing it up.

 

[1DMF]

ok ok , I accept this was the probelm, but come on Vragabond, why didn't you simply say.

<h1> margin collapses, .post collapses to <h1> and even #content collapses to <h1> so now all three are touching, however it then applies the margin to #content and so the <h1> element stays in the correct place because the margin in now between #content and #header!

I was not seing that #content nor .post had collapsed, in the manner you meant and thought the <h1> margin was still being applied between .post and <h1>, I was expecting if the margin collpased it would move the element up the page -> ie have no margin as they had collapsed.

It didn't, it collapsed all 'boundries' into each other THEN applied the margin to it, that is actually a missleading statement 'margin collapsing', the margin doesn't necesserily collapse, just the boundries and then the margin is applied to the outstanding elements not collapsed!

man, could have saved me one hell of a headache , oh well I got there in the end.

Thanks for you not so concide input , but thanks for sticking with me, definately worth a star



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

Well, I am here to help you with individual problems with your html&css code, not to teach you how to read articles in English. I myself had no problem understanding what Andy Budd was talking about in his article and did not know how to explain it better to you.

If you have a problem with the name 'collapsing margins' you need to take that up with W3 consortium, which came up with that name.

 

[1DMF]

lol - fair point, but the example did not show any corrilation to elements above the block having the problem and concentrated on a single block collpasing in on itself, it didn't show that once the margins had collpased it still applied the margin to elements above it! -> which was my problem.

also the 20px->20px = 40px but collpased to 20px example didn't help either. I was expecting my 0.5em margin to collapse to nothing!

oh well, nothing is ever simple nor in plain english when it's to do with computers, so I guess I shouldn't have expected anything else.

If you have a problem with the name 'collapsing margins' you need to take that up with W3 consortium, which came up with that name.

No, I have more of a problem with this behaviour , regardless of what they call it, it shouldn't happen in the first place IMO.

Maybe the standards will change maybe they won't at least I know what's going on now!



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

but the example did not show any corrilation to elements above the block having the problem and concentrated on a single block collpasing in on itself, it didn't show that once the margins had collpased it still applied the margin to elements above it! -> which was my problem.

I strongly disagree. The example pointed out how a paragraph embedded in a div has only one margin (all margins collapsed into one) that is above the div. When he put the borders around it, the margins were no longer adjacent and they didn't collapse and everything looked normal again. Andy mentions this is a bit of a head scratcher but after I have pointed out this paragraph I would expect you to read it until you understood it (correctly). Even by just looking at the example above that paragraph (which I also pointed out) should make you see that it was describing the same situation you were in.

 

[1DMF]

but the example is a nested div

<div style="background-color: #ECECEC; border: solid 1px #ccc;">
  <div style="margin: 20px; background-color: #ccc; border: solid 1px #ccc;">
    <p style="margin: 20px; background-color: #B4CEEF; border: solid 1px #ccc;">The same example but this time each element has been given a border</p>
	</div>
</div>

where is the correlation to having another div above it like this....

<DIV> SEPERATE DIV</DIV>
<div style="background-color: #ECECEC; border: solid 1px #ccc;">
  <div style="margin: 20px; background-color: #ccc; border: solid 1px #ccc;">
    <p style="margin: 20px; background-color: #B4CEEF; border: solid 1px #ccc;">The same example but this time each element has been given a border</p>
	</div>
</div>

The example does not show whatsoever any correlation to what happens to the margins relative to the SEPERATE DIV , and that's my point.

all I can see in that example is the outside boundries collapsing in, with no bearing to anything else around it, be it the edge of the page or other elements, that's the missing bit on that example, which is what was throwing me.

But obviously you can see something I can't in that example, so I guess it's my bad.





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.