FF not parsing CSS file 3

[1DMF]

I'm a bit confused why FireFox isn't using the CSS file in my code.

IE 7 is fine, and W3C has validated my page and CSS file, so why is the page white in FF?

here is the link....

http://www.stepnstomp.co.uk/seniorsmoneycalc/

cheers,
1DMF

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

 

[BillyRayPreachersSon]

It's the floated columns that are doing it. You can either put something like this right before the closing tag for the "wrapper" div:

<div style="clear:both;"></div>

or use the clearfix code on Position Is Everything - which I swear by.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

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

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

[/tt]

 

[1DMF]

I'm still confused why this is happenening , is it a bug in FireFox?

Would seem so if I have to add an unwanted element to the code just to make it work in FF.

not seen this one before!

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

 

[BillyRayPreachersSon]

I don't think it's a Firefox bug, although my knowledge of floating behaviour cross-browser isn't 100%... I'd say that IE is the odd-one out in this case.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

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

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

[/tt]

 

[Vragabond]

No, there is no bug. This is how things are supposed to work. And have been working for a long time now. I am very surprised you have not seen this before. Anyway, as described on the W3C page and also in Dan's mention of Position is Everything, floated elements do not follow the normal document flow and do not contribute to the height of their parent element. Because they are made to be able to hang over the parent element and also hang over the next element, if the floated element is long (high) enough and the next element comes before the end of the floated element -- and the next element is not clearing the float.

This effectively means that putting three floated elements in a container that has nothing but those three elements, will render that element 0 high. Because your floated elements are hanging over and don't contribute to the height of the element and there is nothing inside the element that would attribute to its height, so it remains 0. In order to cause some positive height in the box, you would need some non-floated elements. If you just put the element in, the floats will cause the element to be flush with the floated ones. This is not what you're after, so your element will have to clear the floats. As it clears the floats, the new element is positioned at the bottom of the longest float and causes the height of the parent to end at the bottom of this new element. Since element is empty, that means that the container ends at the bottom of the longest float.

Surely, the IE way is easier for an inexperienced programmer, because IE automagically helps you out. However, when you sometimes need the float to hang over and IE won't let you do that, you will be wishing nothing ever happened automagically and you had the control of what you wanted.

That said, there is a way to force FF to wrap the container around the floated elements without the added element (or content) at the bottom of the floats, albeit it sometimes causes additional problems. If you put [tt]overflow: auto;[/tt] on the parent element, it should work the same as with the clearing element.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[1DMF]

What makes you say that Dan?

FF ignoring a CSS file if the page only has floated content doesn't sound like desirable behaviour to me.

forcing me to add un-wanted, un-necessary, so therefor non-semantic code, just doesn't seem right.

but hey, what do I know, either way, it's fixed now, and at least I now know FF requires junk code if the rest of the page is floating if it is to parse the CSS file.

thanks for the heads up.

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

 

[1DMF]

Vragabond - thanks for the reply, though I still do not understand, the page displayed fine, the content was all there, it just ignored the CSS file, that's what I don't understand.

I guess i'll never fully understand the standards because they just don't make any logical sense to me, I'm just glad I've got nice people like you guys to help me out when i'm stuck.



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

 

[Vragabond]

It is not ignoring the stylesheet that FF does. It just seems like there is no styling on the container, because the container ended at the end of the header. I have removed your clearing element from your page and all that has changed was the side column colours and the border around the main container. The border moved from the bottom of the floated columns to the bottom of the header and the colours were gone (because they were covered by the header images). If FF would be ignoring the CSS, all the styling would be gone. Since it only "ignores" the styling of the container, it does that because the container is not where you suppose it is. And the explanation I gave above tells you why the container is not where you thought it was.

If FF is really ignoring the stylesheet, could you please show an example of that? I know that does not happen, so the reason for that must be elsewhere.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[1DMF]

as always Vragabond , you are quite correct.

I added float:left to the wrapper and it worked fine.

It was not ignoring my CSS , it was my perception of what was happening, and as usual, my conclusion was incorrect.

Once again , many thanks for showing the patience and humility of a saint and bothering to help me understand.

Tek-Tips really is a god send!

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

 

[Vragabond]

As long as I manage to de-confuse people, this is a fulfilling job.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]