Properly hiding CSS from Internet Explorer
Notice, that the first call is simply a link to an overall styles.css file. This file will hold all the CSS for my site, for all browsers. This style sheet is designed to work with a CSS 2 compliant browser (which IE is not). Most, if not all of the styles here will work in Internet Explorer, however, there are bound to be rules which need to be overwritten to work correctly in at least one version of Internet Explorer. We take advantage of the Cascade by making sure that our main style sheet is loaded first, and then the style sheets that need to override specific rules for each of the IE browser versions are loaded last. (Since properties which apply to the same rule, but come later, overwrite earlier properties).
The first conditional statement shown below:
<!--[if lt IE 6]> <link rel="stylesheet" type="text/css" href="assets/css/ie5.css" /> <![endif]-->
Loads style sheet information for Internet Explorer 5 (note that Internet Explorer 5 for the Mac does not read conditional comments at all, but since Microsoft has stopped supporting this program and most Mac users are either using Safari, Konqueror or Firefox, its really a non issue). Any style sheet rules that need to be overwritten to accommodate IE5 would be written here.
The second and third conditional statements:
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="assets/css/ie6.css" /> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="assets/css/ie7.css" /> <![endif]-->
respectively take care of any problem for IE6 and then IE7. Nice!
Keep in mind that when taking care of the differences, you do not need to overwrite the entire rule, only those properties that need to change. Consider the following:
In our styles.css file, we have the following rule defined.
div#box1 label, div#box2 label{ text-align: left; width: 20em; padding: .5em; margin-top: -.15em; }
IE5 has a problem with the box model so we need to adjust the width to accommodate the situation. So in ie5.css, we would redefine the rule as:
div#box1 label, div#box2 label{ width: 21em; }
Notice that only the changed property occurs in the ie5.css. Since IE6 and IE7 implement the box model correctly, there is no need to change the property in either of those style sheets. The ie6.css and ie7.css style sheets will simply use the original property values from styles.css.
Microsoft has an overview of the topic, if you care to delve in more deeply.
posted by hyderabad web designer at
11:00 PM
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.
Subscribe to Post Comments [Atom]
<< Home