CSS Margin Differences in IE and Firefox
As a Web developer, it can be frustrating to realize that your project displays differently in each browser. This is especially frustrating if you have coded your HTML and CSS with Web standards in mind, and Internet Explorer displays margins differently than Firefox. While some versions of IE display this behavior, work around it to produce identical margins in multiple browsers.
Other People Are Reading
-
CSS Box Model
-
The CSS box model refers to how rectangular shapes and their properties, including borders, padding and margins, will act. When a browser such as Firefox displays this model properly the specified width of an element, such as a div layer, will not include padding, the width of the border or margins. Margin will remain the space between the outside edge of the element and surrounding objects. However, Internet Explorer 6 displays the box model incorrectly because it adds the borders, margins and padding to the width. Thus, the actual width of the content shrinks because the box must accommodate the margins, too.
Significance
-
Because of the differences in the way that the two browsers treat margins, create a separate version of your stylesheet to use for Internet Explorer 6 and earlier versions of the browser. Use browser to detection to load this stylesheet, instead of your default CSS file, in order to use styles that will work with the differing box model of Internet Explorer 6. This means that you will require access to the browser so that you can ensure all your visitors have the same experience, no matter which browser they use.
-
Implementation
-
If you wish to use a second stylesheet, you must only create it for elements that Internet Explorer displays incorrectly. You do not need to repeat all styles. Place the following code in your HTML document for your Web page, after your default stylesheet reference:
<!--[if IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css">
<![endif]-->Then, create the file "ie.css" in your code editor and place the code pertaining to the incorrect box model in your second stylesheet. All other browsers, including Firefox, will display your original CSS.
Considerations
-
Since the release of Internet Explorer 7, the browser has displayed the box model correctly. Thus, you do not have to double check your designs in Internet Explorer 7, 8 or 9. However, many people still use Internet Explorer 6, the default browser of Windows XP. While newer versions behave correctly, you should still consider using conditional comments to include an IE-specific stylesheet so users who have not upgraded can experience your website as intended.
-
