RichardKline
asked on
Why does this html footer always float upwards in FireFox?
I have this Love/Hate thing going with stylesheets.
What must I do to make this sample stylesheet (http://rkline.net/csstest/StyleSheet1.css ) produce more similiar results in FrieFox and IE? Specifically, I want the footer section to stay where it belongs (at the bottom of the document).
Example: http://rkline.net/csstest/default.htm
Renamed Source Files:
StyleSheet: http://rkline.net/csstest/StyleSheet1.txt
HTML: http://rkline.net/csstest/default.txt
Browser Versions: IE 7, Firefox 2
I'm quite certain that the IE interpretation is a result of non-compliance with standards. However, it does seem to make more sense....
Thank you.
default.txt
StyleSheet1.txt
What must I do to make this sample stylesheet (http://rkline.net/csstest/StyleSheet1.css ) produce more similiar results in FrieFox and IE? Specifically, I want the footer section to stay where it belongs (at the bottom of the document).
Example: http://rkline.net/csstest/default.htm
Renamed Source Files:
StyleSheet: http://rkline.net/csstest/StyleSheet1.txt
HTML: http://rkline.net/csstest/default.txt
Browser Versions: IE 7, Firefox 2
I'm quite certain that the IE interpretation is a result of non-compliance with standards. However, it does seem to make more sense....
Thank you.
default.txt
StyleSheet1.txt
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
To further your understanding on why the div's "HeaderSection" and "CenterSection" are being ignored and not treated as a whole.
When you float all the elements in a division, like I said in my previous comment, the floated elements are basically removed from the normal flow of the document. This causes the containers of these elements to collapse to a height of zero pixels. You can see this effect in your example if you remove the borders from everything except the HeaderSection and the CenterSection divisions.
Another way to fix the problem you were having would be to add a span within these sections that cleared the floats within it. This would cause the sections to keep from collapsing. Unfortunately, this can cause other problems in IE and Firefox both. The span or division you are adding must contain some content to be of any use (even a &nbps; will work). This will cause the section boxes to have a gap at the bottom to contain this content.
I have a love hate relationship with CSS myself. I love what it can do, but there are things in it that do not work as common sense would say they should. Not to mention that browsers fail to keep up the pace with the changes made in the recommendations or interpret those recommendations differently.
When you float all the elements in a division, like I said in my previous comment, the floated elements are basically removed from the normal flow of the document. This causes the containers of these elements to collapse to a height of zero pixels. You can see this effect in your example if you remove the borders from everything except the HeaderSection and the CenterSection divisions.
Another way to fix the problem you were having would be to add a span within these sections that cleared the floats within it. This would cause the sections to keep from collapsing. Unfortunately, this can cause other problems in IE and Firefox both. The span or division you are adding must contain some content to be of any use (even a &nbps; will work). This will cause the section boxes to have a gap at the bottom to contain this content.
I have a love hate relationship with CSS myself. I love what it can do, but there are things in it that do not work as common sense would say they should. Not to mention that browsers fail to keep up the pace with the changes made in the recommendations or interpret those recommendations differently.
ASKER
Hube02, Thank you for the extra information I understand better (though time will see how well) now.
To both Hube02 and SteveH_UK, I appreciate your time and assistance!
To both Hube02 and SteveH_UK, I appreciate your time and assistance!
You're welcome :)
ASKER
My CSS understanding hasn't reached the "intuitive stage" yet. I would have thought that the Display:Block with the Header and Center sections would've completely encapsulated those areas -- making the Footer treat them as single solid objects rather than as something with holes.