Advanced Search

Targeting IE Using Conditional Comments and Just One Stylesheet

/ Published in: CSS
Save to your folder(s)
A wrapper may be made to enclose the content of a page, and then you can write descendant CSS rules that mention that wrapper's ID or class name in the selector. But what if only IE thought that wrapper existed? Then those rules would only work for IE, while other browsers would ignore the rules completely.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2. /* all browsers make border red */ 
  3. 	#anyelement { border : 2px solid red; } 
  4. /* all browsers see this, but only IE thinks #IEroot exists as an element and makes border blue */ 
  5. 	#IEroot #anyelement { border-color : blue; } 
  6. </style>
  7.  
  8. <body>  
  9. 	<!--[if IE]>  
  10.     	<div id="IEroot">       
  11. 	<![endif]-->  
  12.     	<p id="IE">This browser is IE.</p> 
  13.         <p id="notIE">This browser is not IE.</p>  
  14. 	<!--[if IE]>  
  15.     	</div>  
  16. 	<![endif]--> 
  17. </body>

URL: http://www.positioniseverything.net/articles/cc-plus.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.