CSS Conditional Styling - Iron out Browser Differences

CSS Browser Differences

For instance, paragraph (p) tags will have a margin applied to them so that each paragraph is separated by vertical white space and do not run into each other. The same applies to many other tags including heading tags (h1 etc). The problem occurs because the amount of margin (or padding) applied to these elements is nowhere near consistent across browsers. On a lot of occasions Mozilla/Firefox will add a top margin to the element as well as a bottom margin. IE will however only add a bottom margin. If you were then to view these two browsers side by side you would see that the alignment would be different due to the top margin applied by Mozilla which could well make your design do something totally unexpected.

To get around this you have to treat internet explorer as the exception, since only IE has provision for conditional commenting. The way to do this is to design the page in Firefox, then add the following code to the page after your main css file include or page stylesheet. <!--[if IE]> <link rel="stylesheet" type="text/css" href="my-ie.css" /> <![endif]-->

Now you can put in this stylesheet any margins/padding you need to alter for internet explorer. Done!

Next: CSS Text Content Layout

Tutorial Contents

• Tutorial Introduction
• CSS Target Selection Methods
• CSS Text Content Layout
• CSS Content box positioning
• CSS Coping with Browser Differences

CSS Tutorial Referrers

This list of people who link to this Tutorial page is automagically maintained. Link to us, send traffic, and get listed. Simple.