Properly hiding CSS from Internet Explorer
Properly hiding CSS from Internet Explorer
- Posted on 07/11/2006 at 07:30 AM by Sandra Clark
- Categories: CSS
At CFUNITED, I mentioned the proper way to hide information from Internet Explorer. While many CSS filters and hacks rely on using advanced selectors that IE 6 and below don't recognize, that is not going to be the case for Internet Explorer 7.
So the proper way to hide information from Internet Explorer would be to use something similar to the code below.
<head>
<link rel="stylesheet" type="text/css" href="assets/css/styles.css" media="all" />
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="assets/css/ie5.css" />
<![endif]-->
<!--[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]-->
</head>
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.
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.
- Posted By Sandra Clark
- Posted On May 4, 2007 at 06:51 AM
- Posted By Sandra Clark
- Posted On May 18, 2007 at 03:32 AM
- Posted By Sandra Clark
- Posted On May 19, 2007 at 04:13 AM
Sometimes it could be your CSS. Sometimes you might not be calling the linked style sheet correctly. To debug this do two things.
First get rid of the IE conditional statements and see whether or not your style is overridden in Firefox.
Second make sure that your ie conditional statement comes AFTER your other style sheet calls. REmember that the last stylesheet called overrides the previous ones.
Third, put something funky in your IE style sheet such as body{background-color: green;}. Then call the stylesheet first through firefox (to make sure it works and then through IE).
If it is found in Firefox and not in IE, then check your actual conditional statement and make sure it is correct.
- Posted By Dave
- Posted On March 20, 2007 at 08:26 AM
- Posted By Sandra Clark
- Posted On March 20, 2007 at 02:42 PM
To create a specific one for a version of IE, you can do something similar to:
<![if !IE 5]>
<![endif]>
- Posted By Sandra Clark
- Posted On July 12, 2007 at 01:45 PM
I suppose if you were using a server side language, you could figure out the browser, stick in some specific classes where necessary based on the browser, but then isn't that just going back to the days of browser specific code?
According to thecounter.com, IE5 has about a 1% penetration rate for June 2007. Is it really even worth supporting at this point?
- Posted By Peter D
- Posted On May 4, 2007 at 06:43 AM
- Posted By Gary Holmes
- Posted On May 17, 2007 at 11:18 PM
http://www.grumpycoder.co.uk/how-to-fix-ie6-for-w3c-standards-compliance-using-javascript-libraries/
Worth a read!!
- Posted By Al Chou
- Posted On May 18, 2007 at 08:25 PM
and the only thing in the IE-specific CSS file is:
#pagetitle { font-size:2pt ; line-height:2pt }
which is supposed to override the main stylesheet's declaration:
#pagetitle { font-size:24pt; line-height:24pt; font-style:italic }
but IE doesn't seem to notice that I've tried to redefined the pagetitle id's style. Am I doing something wrong?
- Posted By Al Chou
- Posted On May 18, 2007 at 08:27 PM
- Posted By Al Chou
- Posted On May 18, 2007 at 08:29 PM
- Posted By Al Chou
- Posted On May 18, 2007 at 08:31 PM
- Posted By ed
- Posted On July 12, 2007 at 01:33 PM
.spacerIE5{height: 2px;} .spacerIE7andTheRest{height: 1px;}
- Posted By shaina
- Posted On September 30, 2007 at 11:42 PM
http://www.shayna.com