if IE Stylesheets - Ok to use?

[canha]

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?

[WebJoel]

"if IE" are called 'conditional', and yes, okay to use. Often, -necessary. :)

[kiwibrit]

I use them too.

[The Old Sarge]

How do you keep the style sheets from conflicting?

[felgall]

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">
<!--[if IE]><link rel='stylesheet" type="text/css" href="ie.css"><[endif]-->

[The Old Sarge]

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?

[canha]

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. :D

[felgall]

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 <!--[ or <[ at the start or ]> or ]--> 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.

<!--[if IE]>IE<[endif]><[if !IE]-->not IE<--[endif]-->

[WebJoel]

And I believe that there is 'no whitespace gap' between the second hyhen and first bracket(?)
So it is:

<!--[if IE]><link rel='stylesheet" type="text/css" href="ie.css"><[endif]--> (correct)

and not

<!-- [if IE]><link rel='stylesheet" type="text/css" href="ie.css"><[endif] --> (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 Sarge]

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. :D

Thanks again ... all of you.

[canha]

Conditionals can also be used if you want to overwrite a specific style in a CSS sheet, right?

I tried this:

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


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_nsc]

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


#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.


<!--[if IE]>
<style type="text/css">
#div1 {
width: 100px;
}
</style>
<![endif]-->

<style type="text/css">
#div1 {
width: 200px;
border: 1px solid #000;
}
</style>


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

The more you know eh?

[felgall]

The reason they are called cascading 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.

[TehLibrarian]

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 <!--[if IE]><link rel='stylesheet" type="text/css" href="ie.css"><[endif]--> 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?

[felgall]

It works for anything in the HTML.

<!--[if IE]>
<style>
@import url (blahblah.css)
</style><[endif]-->