CSS Elements Different Sizes in IE and Firefox

Sunday, September 9th, 2007

It’s happened to all of us, once upon a time, we might have coded a perfectly valid CSS and HTML file, only to find discrepancies between your website when displayed in Internet Explorer and Mozilla Firefox. (If you want to easily test your website across multiple browsers, I have an article on testing on various versions of Internet Explorer) Unfortunately, this is something we’re going to have to deal with. Internet Explorer 6 (IE6) and Internet Explorer 7 (IE7) have enormous market shares and Firefox is slowly creeping behind them. This means when coding a website it needs to look good in both these browsers.

What’s the Problem?

Your Layout Is Slightly Different In One Browser Then The Other. Although to some people, a five pixel difference might not mean much, it might mean a CSS element on your website completely throws your whole website’s layout askew.

This is common. Although the problem I’m detailing isn’t always the problem occurring, it’s a good tip to keep in mind while coding and it will help you avoid most layout problems.

Internet Explorer and Mozilla Firefox both render Width and Height combined with Padding and Margins differently. What that means is, if you have a CSS element (paragraph tag, div container, span, header, etc.) that has a width and horizontal margin assigned to it, there’s a chance that something can go wrong. This applies to heights combined with vertical padding and margins and widths combined with horizontal margins and padding.

Here’s an image showing a simple .html file and the difference in how it’s displayed in each browser. Please note that the CSS attributes of each DIV container are typed out in the image. Click for a larger view.

Note how even though they each have the same HTML and CSS code, there are layout problems. In Firefox, the DIV containers are taller. In Internet Explorer, there is twice the margin between the first div container and the left side of the browser. This may not seem like much to you, but it can throw an entire website’s layout off.

What’s the Solution?

The solution is easy. Simply put, do not assign width and horizontal margin and padding attributes to the same CSS element. Also, do not assign height and vertical margin and padding attributes to the same CSS element. Some suggestions:

Use a div container inside your div container.
Use a p tag inside your div container. Add additional attributes to your p tag using CSS.
Create CSS elements that serve as spacers. (cue, horrible flashback to tables and spacer.gif’s)
Use absolute positioning, this nearly guarantees placement.

Hope that helps and clears out some mystery as to why websites seem to mysteriously shift between browsers.

Wooden Beds

10 Responses to “CSS Elements Different Sizes in IE and Firefox”

Phil Thompson Says:
September 10th, 2007 at 9:45 am
great tips.

I find that using some kind of global reset stylesheet (either YUI’s or Eric Meyer’s) can really help in the fight for cross-browser compatibility too.
Patrick Burt Says:
September 10th, 2007 at 12:34 pm
Thanks Phil.

I haven’t had a chance to use the global reset stylesheets, but I’ll be sure to check ‘em out.
Phil Thompson Says:
September 11th, 2007 at 4:10 am
Definitely do check them out. I use them to reset everything then systematically go through and add my padding/margins to all block elements e.g. p, h1-h6, ul etc. This avoids a lot of issues with widths across browsers because it means no padding is needed on any divs.

I also use the Float Nearly Everything method and combining the 2 leads to sites that only need tiny CSS changes for IE6 and next to none for IE7.
Patrick Burt Says:
September 11th, 2007 at 8:37 am
Absolutely. I’m starting to see how it works now.
Thanks for th tip m8.
axelnelson Says:
September 18th, 2007 at 7:00 am
if the problem is that ie has issues rendering width/height and margin/padding attributes when both applied to the same element how would a global css reset overcome it?

it seems the problem will arise regardless of a global reset because ie’s issue is with the combination of the attributes within the same setting - not the css nor attributes nor their values themselves

you can do a global reset but you still cant blatantly combine the attributes
Patrick Burt Says:
September 18th, 2007 at 8:05 am
That’s true nelson. When I looked at it, it seemed like more of a cheat sheet so that you don’t accidentally place something like a header tag with a set height without first clearing the default margin/padding.
axelnelson Says:
September 18th, 2007 at 5:23 pm
if the problem is that ie has issues rendering width/height and margin/padding attributes when both applied to the same element how would a global css reset overcome it?

it seems the problem will arise regardless of a global reset because ie’s issue is with the combination of the attributes within the same setting - not the css nor attributes nor their values themselves

you can do a global reset but you still cant blatantly combine the attributes it seems
Patrick Burt Says:
September 18th, 2007 at 7:37 pm
Global CSS reset doesn’t overcome it, but what it does (from what I interpreted) is that it prevents the problem from happening without your knowledge because of default values.

The problem will arise, you’re correct. Also, your 3rd line is entirely correct.
Gary Fuller Says:
February 1st, 2008 at 11:11 am
Thanks for this info. I’ve been searching for a solution to the CSS page rendering discrepancies between IE and Firefox. This seems a very logical answer. Now to tear apart and reconstruct the CSS!
Patrick Burt Says:
February 1st, 2008 at 11:18 am
No problem Gary. Thanks for the comment!
If you have any questions, you can email me or comment.