FF margin collapsing? cannot understand why 2

[1DMF]

Hello,

I seem to be getting a margin collapse in FireFox and cannot understand why.

the site is

http://www.justlifecover.co.uk

You will see the bottom footer is not applying the 10px margin applied to the #footer section.

help fixing this is appreciated.

1DMF.

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

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[1DMF]

It's ok , worked it out.

FF doesn't allow non-floated elements to clear floated elements, so although I don't need a float on the footer technically, i do for FF.

I then have to add a width, because IE requires you to set the div width, where as FF does this automatically, as DIV's are block elements!

Why does IE not treat DIV's as true block elements (ie max width of contianer / screen

And why does FF force you to float eveything even when there is no requirement to float the div, as it's not going to be stacked!

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

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[BillyRayPreachersSon]

AFAIK, FF will allow non-floated elements to clear floated ones... Perhaps your footer wasn't the right element to set the clear style on?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

but it was/is a DIV Dan?

#footer is the ID to a DIV with an anchor and simple text in it.



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

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[ChrisHunt]

FF doesn't allow non-floated elements to clear floated elements, so although I don't need a float on the footer technically, i do for FF.

Not true. However, your original question talked about margins - you may be confused by the way floated items react to unfloated items' margins (generally they float into them).

I then have to add a width, because IE requires you to set the div width, where as FF does this automatically, as DIV's are block elements!

Why does IE not treat DIV's as true block elements (ie max width of contianer / screen

Once you float an element, it will shrink to fit the content, block element or not. That's expected behaviour IIRC.

And why does FF force you to float eveything even when there is no requirement to float the div, as it's not going to be stacked!

It doesn't.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

Well i'm stumped then, coz now i've floated it the footer is now floating over the top of a floated div, even with clear:both applied.

look at the articles page from the right hand menu


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

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[1DMF]

well i've worked out the odd IE behaviour with #footer floating over the #links div, it's because #links is floated right, and IE doesn't seem to handle float:right; very well.

So I removed the float from the #footer and I is displaying fine, yet i'm back to the FF margin collapsing (or something) problem.

Where the #footer seems to be hard against #pagetext when the middle div extends past the #links div.

The only way I've been able to resolve this by removing the top margin from #footer and add a spacer DIV after the fieldset in #pagetext.

Is this the only solution?

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

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[ChrisHunt]

How about putting a bottom margin on your floated div(s), instead of a top margin on the footer?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

nice one! , that works, but explain to me the difference (apart from the fact it works!)

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

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[Vragabond]

A complex problem, but one that has rather simple explanation.

You have to take into account what Chris said about the margins of the non-floated element following floated elements. It's top margin does not reflect that of the bottom end of the floated element, but that of the bottom end of the first non-floated element preceding it. In your case that is the header. So top margin on the footer will be calculated based on it's distance from the bottom of the header. Since there are other elements in the way and they are all part of the normal document flow, the top margin of the footer will not be visible. This is a bit hard to understand, but if you deal with left/right margins next to left/right floated items, the same thing happens (margin is always calculated from the edge, regardless of the floated element), but it seems to be more used and thus more understood.

So how does the other solution work? As you know, clearing element will position itself at the bottom of the longest floated item. And by floated item we do mean it's height, padding, border and margins. So adding bottom margin to the floated elements gives you the gap you're looking for without this gap disappearing anywhere.

I hope this makes sense. I know it is a bit complicated, but if you get your head around it, it does make sense.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[1DMF]

Ok , so I was sort of right with my

FF doesn't allow non-floated elements to clear floated element

it's not the elements themselves, but the margins.

Is there a reson for this behaviour, is it in the specifications for margins to be ignored between floated and non-floated elements?

Well having said that, it's not ignored if applied to the floated element, but it is ignored if applied to the non-floated element.

I understand what's happening I think, but I don't think it makes sense.

So is it always true to say that floated elements margins are always respected by non-floated elements, but non-floated elements margins are ignored floated elements.


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

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[Vragabond]

You're correct. Imagine this scenario. You have an image that is floated to the right. On the left you have paragraph text that is not floated. A very normal thing to have on a page, right? Now add borders on the paragraph. Then background. And finally margin. You will see that the paragraph itself lies beneath the floated element and it is only the contents of the paragraph (actual text) that is wrapping around the paragraph. And when start applying the right margin, the margin will be beginning from the right edge of the screen and not the left edge of the floated element.

The same rule applies with the floated and non-floated elements coming together vertically.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[1DMF]

1stly - wow i'm correct, now there's a first - lol

No seriously that's what I love about TT and the regulars in this forum, I don't just get a problem solved, I gain the knowledge to understand why I had the problem, how the fix worked and how to take that knowledge forward to apply it to further projects / websites.

No cargo cult in this place!!

I stil need to get my head round your scenario , but are you saying to make the text have a right margin relative to the image, you would need to add left margin to the image as right margin to the paragraph is relative to the edge of the screen not the edge of the floated image!



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

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!