t’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 sharesand 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.