CCS layout differences in Firefox and IE - and how to make them work together…
IE and Firefox/Mozilla use different methods of calculating percentages of widths in Tables and Divs…
When IE renders a TABLE that has a WIDTH like 100%, the browser doesn’t just use the available space of its container as a basis for applying the percentage. It only does so IF its container has an explicitly specified WIDTH (if its a DIV tag, the browser should assume 100% width by default!) Unfortunately, if the container doesn’t have a specified WIDTH, it looks at the container’s parent, and then the parent’s parent and so on until it either finds an explicit WIDTH or eventually reaches the BODY element (which always has a available WIDTH property.)
IE then uses the WIDTH it found as the basis for the TABLE’s percentage calculation. For instance, if the TABLE is in a DIV that doesn’t have a WIDTH specified (DIV’s should be considered 100% wide by default!), the TABLE will instead look at the DIV’s parents recursively until it finds a WIDTH - and it will IGNORE the DIV’s MARGINS.
The result is often a TABLE that tries to be as wide as the BODY’s original WIDTH, without taking into account its immediate container, and completely ignoring any MARGINs and BORDERs that are supposed to take away from the available display width! The result is usually a distortion of the container’s intended width, which often forces content off the screen horizontally.
Fortunately, the fix is simple: just set the width of the TABLE’s immediate container to a 100% or so (which then allows the TABLE to calculate its WIDTH based on its correctly offset parent.) Unfortunately, if you have a MARGIN on the parent, Firefox/Mozilla browsers will now start doing the same thing IE did!
Unfortunately, Firefox applies a DIV’s WIDTH first, then applies MARGINs after. So, if you have a DIV with a 20% LEFT MARGIN and the DIV is set to 100%, the total space taken will be 120%. So you usually find yourself scrolling horizontally again.
In Internet Explorer, the LEFT-MARGIN is applied first and its width is subtracted from the remaining space - so the DIV takes up only the remaining 80% - for a nice 100% fit.
—— SOLUTIONS ——
So, you have to tell Internet Explorer, and NOT Firefox, to set the container WIDTH to 100%. You could use script or separate CSS file for the each type of browser (just when we thought we were getting past that!) but I found a simpler solution: just specify the container’s width like so…
<div style="width:expression('100%')">
This works because IE uses the expression() syntax to return a string of 100%, while Firefox ignores it and leaves the WIDTH unset.
Here is an illustration of the differences:
Comments
No comments yet.
RSS feed for comments on this post.
Leave a comment
Sorry, the comment form is closed at this time.