if IE Stylesheets – Ok to use?

@canhaFeb 23.2007

Hey guys,

I was wondering if it is actually ok to use two types of stylesheets:
one for “normal” browsers (ie: firefox, opera, etc) and one for…uhm… “semi-abnormal” Internet Explorer using the [if IE] code.

It´s just that the sites I´m doing now don’t seem to work on IE properly, so I always create a whole new style-sheet just for IE.

Is it OK to do this, or does it mess up with validation and viewing in the normal browsers?

to post a comment

CSS

15 Comments(s) _↴

@WebJoelFeb 23.2007 — #"if IE" are called 'conditional', and yes, okay to use. Often, -[I]necessary[/I]. ?

@kiwibritFeb 24.2007 — #I use them too.

@The_Old_SargeFeb 24.2007 — #How do you keep the style sheets from conflicting?

@felgallFeb 24.2007 — #Put all of the code that gets your page to display correctly in modern browsers in one stylesheet (let's call it master.css)

Place the code necessary to fix the positioning in IE from where the first stylesheet puts it into a second stylesheet (let's call it ie.css). As this only has the corrections it should be a lot shorter than the master one.

You then code the following into your page:

<link rel='stylesheet" type="text/css" href="master.css">

@The_Old_SargeFeb 25.2007 — #Thank you, Stephen. I never saw that before. Very helpful.

Edited to ask: Is the comment bracket included in the code? If yes, how does IE read it?

@canhaauthorFeb 25.2007 — #Yep, it's included.

As for the second question: you know Microsoft: They read what's not there and don't read what's there. It's like they have their own W3C. But upside down. ?

@felgallFeb 25.2007 — #IE reads anything with square brackets insiide of tags as special conditionals.

<[if IE 6]><[endif]> include the content if the program running is IE6.

<[if MSO]<[endif]> include the content if the program running is Microsoft office

and so on. IE doesn't care whether you put  at the end and so you can insert the comment indicators where needed to hide parts from the non-Microsoft programs you don't want to see it.

not IE<--[endif]-->

@WebJoelFeb 25.2007 — #And I believe that there is 'no whitespace gap' between the second hyhen and first bracket(?)

So it is:

 (correct)

and not

 (not correct)

the latter turns this 'conditional' into a "comment" and nothing happens, -right?

-I really try to avoid need for conditionals. That is, I give my elements enough margin/padding etc. so that they do not overlap in either browser, for instance. But in some designs with tighter real-estate or some other issue, this may not be a vialbe option and a 'conditional' might be required. I really should become more familiar with conditionals...

@The_Old_SargeFeb 26.2007 — #I knew if I rubbed shoulders with you lot long enough and often enough some the web expertise would somehow rub off. I benefit from one post or another on a daily basis. ?

Thanks again ... all of you.

@canhaauthorFeb 26.2007 — #Conditionals can also be used if you want to overwrite a specific style in a CSS sheet, right?

I tried this:

<i>
 </i>&lt;!--[if IE]&gt;
 &lt;style type='text/css'&gt;
 #centrecontent {
 width:691px;
 float:right;
 height:200px;
 clear:both;
 background:#FFFFFF url(../imagens/fundo_geral2.jpg) repeat-y left;
 padding-right:100px;
 }
 &lt;/style&gt;
 &lt;![endif]--&gt;
 &lt;link href="css/global.css" rel="stylesheet" type="text/css" /&gt;

While another #centercontent style is in the global.css, IE seems only to read the one which was written for it, ignoring the proper one in the css file.

Works and validates.

@aj_nscFeb 26.2007 — #Be careful when you say ignore. IE does act like all other browsers in some respects. Browsers display something (like a div) using the specs specified by their last rule in a style sheet. So if you put in two rules for #div1

<i>
 </i> #div1 { width: 100px; }
 #div1 { width: 200px; }

Then all browsers will display a div with a width of 200px because the last rule overwrites previous rules of the same property.

So it's important to always use conditionals AFTER you have specified your other stylesheet(s), otherwise, the rules specified in your conditional will be overwritten by the rules in the other stylesheets that come after the conditional.

I thought this was the case but I wasn't sure so I whipped up an example and checked it.

<i>
 </i>   &lt;!--[if IE]&gt;
 &lt;style type="text/css"&gt;
 #div1 {
 width: 100px;
 }
 &lt;/style&gt;
 &lt;![endif]--&gt;
 
 &lt;style type="text/css"&gt;
 #div1 {
 width: 200px;
 border: 1px solid #000;
 }
 &lt;/style&gt;

In both IE and FF, #div1 displays with a width of 200px......

The more you know eh?

@felgallFeb 26.2007 — #The reason they are called [b]cascading[/b] stylesheets is that the settings cascade through. More specific rules are applied in preference to less specific ones but if they are equally specific then the one closest to the object (the one defined last) takes precedence.

Always set up your stylesheet for standards compliant browsers and specify that first. Then use conditionals to apply specific style overrides to fix problems with IE. If necessary you can specify the version number in the IE conditional and apply different overrides for different versions of IE.

@TehLibrarianMar 08.2007 — #I hope you don't mind me jumping in here.

I would like to say that this has worked quite well for me, but I did have a question. Is there any way to use the  when you're using the @import url (blahblah.css) type of linking? Or do you have to use the <link rel='stylesheet" type="text/css" href="blahblah.css"> type only?

@TehLibrarianMar 08.2007 — #I hope I don't accidentaly post this twice. If I do, sorry beforehand.

I just wanted to say that this has worked really well for me but I did have a question.

When using the  comment to make this work is it possible to use the @import url (blahblah.css) style instead of the <link rel='stylesheet" type="text/css" href="master.css"> type?

@felgallMar 08.2007 — #It works for anything in the HTML.

Also in #CSS _↴

Vertical Align not working INSIDE a Table Cell do I need absolute or relative positioning?Z-Index in IE

Success!

Help @canha spread the word by sharing this article on Twitter...

Tweet This

if IE Stylesheets – Ok to use?

15 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

if IE Stylesheets – Ok to use?

15 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #CSS _↴