IE specific stylesheet link

Forum Moderators: open

Message Too Old, No Replies

IE specific stylesheet link

LouiseMarie

5:16 pm on Mar 18, 2010 (gmt 0)

Hi,

I'm trying to add a second stylesheet to a web page to allow for IE specific styles.

I've googled this and eveything comes back with the same code so i've added this to my page but it's not working. Can someone help please?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />

</head>

(If it makes any different our web sites are run as projects under source control through Visual Studio 2010.)

thanks in advance.

Fotiman

6:12 pm on Mar 18, 2010 (gmt 0)

That would appear to be correct. I just tried it out and it works as expected for me. What do you mean by "it's not working"?

Here's the files I used:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<link href="main.css" rel="stylesheet" type="text/css" /> 
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]--> 
</head> 
<body>
This will be Blue in most browsers, but Red in IE.
</body>
</html>

main.css:


body {
  color: blue;
}

ie.css:


body {
  color: red;
}

LouiseMarie

9:18 am on Mar 19, 2010 (gmt 0)

I when I said it wasn't working I just meant it wasn't showing the correct positioning that was in the ie stylesheet.

I'd only put one style property in the ie stylesheet to add to the styles if it was ie but now i've moved everything over and made an entire stylesheet for ie and it's working. Guess the other stylesheet was still being used even for the style that was in the ie file.

thanks for your help :)

Fotiman

1:45 pm on Mar 19, 2010 (gmt 0)

It could also be a specificity issue. For example, if your main.css file had a rule like this:


#myelement div.myclass {
  color: blue;
}

And your ie.css file had a rule like this:


#myelement .myclass {
  color: red;
}

Then the color would be blue because the selector in ie.css has a lower specificity than the one in main.css.

LouiseMarie

12:53 pm on Mar 22, 2010 (gmt 0)

thanks for the tip about specificity issues :) I'll keep that in mind in future.