How to Make CSS Effective for IE
Internet Explorer has a reputation amongst Web developers for being difficult to work with due to many CSS bugs. Microsoft is also slower to add new features, especially the visual effects CSS level 3 properties can create. Over the years, many hacks and scripts were devised to overcome the limitations of IE browsers, but most developers began to frown on the clumsy workarounds. A set of techniques ranging from basic fixes to a sophisticated JavaScript solution will make it easier for you to make CSS work like it should in IE.
Other People Are Reading
Instructions
-
-
1
Use a proper document type declaration. This will fix many bugs in older versions of Internet Explorer. Since HTML5 came out, the document type or “doctype” is simple and easily remembered:
<!doctype HTML>
This is the very first line in a Web page's HTML code. Even if your Web page already includes a document type declaration, consider replacing any older version with this one to lessen confusion about whether the page is transitional or strict.
-
2
Add a “reset” style sheet to your Web development arsenal. This is a type of style sheet that removes the default styling that browsers apply to Web pages, so you will no longer need to wonder what margin values Internet Explorer uses versus the values used by Firefox. The most popular reset is still the Eric Meyers' reset. Get the reset code from Meyers's site at meyerweb.com/eric/tools/css/reset/ and save it to the same folder where you saved your Web page. Add this line below the “<title>” tags in your Web page to add the reset:
<link rel=”stylesheet” href=”reset.css”>
-
-
3
Use conditional comments to add in style sheets only when the visitor is using a specific version of Internet Explorer:
<!--[if IE 6]>
<link rel=”stylesheet” href=”ie6.css”>
<![endif]-->Inside the IE-only style sheet, add CSS that corrects bugs known to IE. Two major bugs to look out for include double margins and incorrect box model calculations. The first bug causes margins to double up instead of overlapping. The second bug causes IE to calculate padding and borders as part of the width of the content for any element, such as a div. Tweaking margins and widths for the IE-only CSS will fix these.
-
4
Install the “Modernizr” JavaScript to your Web page. This script finds out what a user's browser does and does not support and then adds classes to the “<body>” tag. Download the script and save it to the same folder where your Web page is located. Add it to the HTML code above the closing “</head>” tag using “<script>” tags:
<script src=”path/to/modernizr.js”></script>
Follow documentation on the Modernizr website to find out which features it sniffs out and how to use the classes.
-
1
