Conditional comments need help

HTML & CSS
1

Hi, I need you help please,…I am having problem in using the conditional comments, please correct me if i am wrong…This is how i include in my header tag


 <head>
     <!--[if gte IE 9]>
          <link rel="stylesheet" type="text/css" href="./mycss/myie.css"/>
   <![endif]-->
</head>

and this is the code for the myie.css


  .cntx_div a{
       filter: dropshadow(color=red,offx=8,offy=8,positive=1,enabled=0);
}

I just tried to use the color red so that i can see if the code is working…but my text shadow did not work in IE,by the way i am using IE 9 here.

Thank you in advance.

2

Which browsers are you trying to target? IE9 is the last IE to support CCs, so gte isn’t useful there, because no IE after 9 will take notice of this. But that code you have there is normally for older versions of IE.

3

Hi ralph, Thank you for the reply…Yes i am going to target IE 9 , i want my text-shadow to work in IE9, so do i need to remove the gte?

4

Yes, just use <!--[if IE 9]> if you are only targeting that browser. You could just put that line in your regular style sheet, though, as other browsers will ignore it.

Filters do tend to cause problems for IE, though, so I wouldn’t use them myself. There are JS options for text shadow if you really can’t live without it … but again, I’d just let the browser do without text shadow if it can’t handle it on its own.

5

Yeah you’re right filter:dropshadow causes problem in IE i tried to remove gte but nothing happens,okay i will just try to find some js,or if not i will just let the browser just what you have said…

Thank you:)

6

You will need haslayout for the filter to work and probably should be enabled=1 in the filter rule.


 filter: dropshadow(color=red,offx=8,offy=8,positive=1,enabled=1);
 display:inline-block;

However the filter looks pretty bad and you would be better off without it as Ralph mentions.

The shadow filter is a little better for text-shadow:


 filter: progid:DXImageTransform.Microsoft.Shadow(color=#F00000, strength=2, direction=145);
 display:inline-block; /* haslayout trigger*/
7

Hi, Paul O’B Thank you for the reply,…I tried your solution but still doesn’t work…I wonder why it did not work.

8

Hi,

You’d need to show all the code you are using to debug further.

However here’s a working example based on your mark up and the code I suggested.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.cntx_div a {
	color:#000;
	text-shadow:1px 1px 1px #f00;
	text-decoration:none;
}
</style>
<!--[if lte IE 9]>
<style type="text/css">
 .cntx_div a{
 filter: progid:DXImageTransform.Microsoft.Shadow(color=#F00000, strength=2, direction=145);
 display:inline-block; /* haslayout trigger*/
}
</style>          
<![endif]-->
</head>

<body>
<div class="cntx_div"><a href="#">This is a Shadow test</a></div>
</body>
</html>

You will need to test in IE9 for real and not IE10 in ie9 mode as it doesn’t seem to apply the filters (locally anyway).

More info here.

9

Hi Paul O’B, Thank you so much for this :)… i will compare my code to this…by the way does it still will work if i will directly put to my main CSS?I mean without using the CC’s ?

10

Yes it should still work as other browsers just ignore the IE specific code.

(Note that there are issues with some of the filters in IE9 if you use them in combination with border-radius as you lose the round corners.)

11

Thank you paul O’B :slight_smile: