PDA

View Full Version : IE7 Seperate Stylesheet Link Not Working



claireym
Feb 13th, 2010, 01:57 PM
Hi there,

I have created a site that is fine in IE8, FF and Safari. However it's a bit crazy in some parts in IE7. I wanted to create a seperate stylesheet to fix these problems using this:



<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->


When I test the site in IE7 (I downloaded a standalone version of IE7) nothing changes. It just reads the default css file but will not accept any changes I have made in the ie7 css file. I'm thinking it's not linking somehow... Here is the whole head section:



<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website</title>

<link rel="shortcut icon" href="favicon.ico" />

<!--[if IE 7]><link href="ie7.css" rel="stylesheet" type="text/css" /><![endif]-->

<link rel="stylesheet" type="text/css" href="cssabout.css" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

</head>


Anyone have any ideas? I've even changed the bg color to red in the ie7 stylesheet just to see is it picking it up at all, but it doesnt have any effect. Any help is really appreciated, it's pulling my hair out!! Thanks in advance! :)

abduraooft
Feb 13th, 2010, 02:33 PM
If you are using the same selectors in your ie7.css file, you might need to put the line
<!--[if IE 7]><link href="ie7.css" rel="stylesheet" type="text/css" /><![endif]--> after
<link rel="stylesheet" type="text/css" href="cssabout.css" /> or use selectors having high specificity (http://htmldog.com/guides/cssadvanced/specificity/) to refer the elements from ie7.css

claireym
Feb 13th, 2010, 03:00 PM
Hey, thanks for the reply :)

I changed the order so it now reads:



<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website</title>

<link rel="shortcut icon" href="favicon.ico" />

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

<!--[if IE 7]><link href="ie7.css" rel="stylesheet" type="text/css" /><![endif]-->

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

</head>


but it still isn't working... I've done this before for ie6 one time and it worked fine so can't seem to figure this out! :(

abduraooft
Feb 13th, 2010, 03:09 PM
I've done this before for ie6 one time and it worked fine so can't seem to figure this out! Can we have a link to your page?

Donkey
Feb 13th, 2010, 06:23 PM
I had a similar problem and was advised by someone on another forum to always leave a space after the "IE 7", e.g.

<!--[if IE 7 ]> I tried it and it worked.