Trying to stop content from rendering in IE

Get Started
1

Hello All:

I am trying to use the text-shadow property however, this property does not work in IE. So I constructed this:

<div style="width:600px; padding:0px; background-image:url(http://qa.use-enco.com/images/email/ratings-email-product-stars-bg.gif); background-repeat:no-repeat; background-position:center; border:thin solid black;">
   		 <div style="font-family:Arial, Helvetica, sans-serif; font-weight:bolder; padding-left:10px; font-size:54px;">Tell us what you think!</div>
       <!--[If IE]>
      	 <div style="font-family:Arial, Helvetica, sans-serif; font-weight:bolder; padding-left:15px; font-size:36px; color:#ff0000;">Your opinion could be worth $500</div><br />
         <div style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding-left:23px; font-size:16px; color:#333333; width:329px;">Log onto <a href="http://www.use-enco.com">www.use-enco.com</a> today to submit a product review</div><br />
       	<div style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding-left:23px; font-size:16px; color:#333333; width:329px;">You'll be automatically entered to win a $500 Enco shopping spree* for each review you submit.</div><br />
       <![endif]-->
       	<div style="font-family:Arial, Helvetica, sans-serif; font-weight:bolder; padding-left:15px; font-size:36px; color:#000; text-shadow: 3px 3px 3px #ff0000;">Your opinion could be worth $500</div><br />
       	<div style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding-left:23px; font-size:16px; color:#333333; width:329px;">Log onto <a href="http://www.use-enco.com">www.use-enco.com</a> today to submit a product review</div><br />
       	<div style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding-left:23px; font-size:16px; color:#333333; width:329px;">You'll be automatically entered to win a $500 Enco shopping spree* for each review you submit.</div><br />


    </div>

This works fine in every browser BUT IE because IE is rendering the bottom part again as duplicate context.

Is there a workaround for this?

thanks for any help or advice on this,

Paul

2

Separate your CSS from your HTML in an external stylesheet.
Then use IE conditional statement to include an IE stylesheet to ‘disable’ the text shadow.

Cheers.
Michael

3

Thanks Michael for the help,

If I use an external style sheet, how will IE know NOT to render code from the html page?

Do you happen to have an example you can show me?

thanks,

paul

4

Actually the only way I can think of to do this with CC’s (which will work with 9 but not with 10!) is to not have the shadow code in the external CSS sheet… then in the <head> of the HTML document, inside <!–if !IE9–> tags, have <style> tags with the shadows. IE will see that it IS IE and ignores, all other browsers ignore the if-IE stuff anyway (and so will read the styles). However this does mean adding styles to each HTML page, which is messy.

5

This is what Modernizr is for. It uses feature detection (not browser sniffing!) to see when various CSS3 features are supported.
It allows you to branch your CSS to cater for the support, or non support of a given feature without needing multiple stylesheets.
It adds class names to the document, so the CSS can use them in selectors.


<!DOCTYPE html>
<head>
<script src="js/modernizr.custom.52277.js"></script>
</head>
<body>

<div class='special'>My special stuff</div>

</body>
</html>

Then to style div.special differently depending on text-shadow support:


.special {
   /* put default styling here */
}

.no-textshadow .special {
   /* changes to .special for browsers without this feature */
}