Targeting Internet Explorer in CSS and in code

CSS Targets

My designer gave me some suggestions to fix an IE issue I was having and he mentioned I should target IE7 with a line of CSS. There are always inconsistencies between IE browser versions even with the simplest of web pages.

Instead of just asking for the code and sounding like I didn’t know what he was talking about I did some research and was able to target IE. Suffice to say it fixed my problem and once again I was the hero to my client.

These are quick and dirty CSS hacks and they don’t require separate style sheets or additional code.

Can you see the interesting symbol in my CSS code below?

.price-container {
   padding-top: 15px;
   *float: left;
   *display: inline-block;
}

As it turns out you can use extra characters in your CSS to target different versions of IE. The targeting characters are just ignored by other browsers so it just works.

.price-container {
   padding-top: 15px; /* regular, no target */
   padding-top: 15px9; /* IE 8 and lower */
   *padding-top: 15px; /* IE 7 and lower */
   _padding-top: 15px; /* IE 6 */
}

HTML Targets

You can also target different IE versions right inside your HTML pages.

This targets only IE 7

<!--[if IE 7]>
	/* only for IE 7 */
<![endif]-->

This targets only IE 8

<!--[if IE 8]>
	/* only for IE 8 */
<![endif]-->

What if you wanted lower than IE 9

<!--[if lt IE 9]>
	/* only for IE versions lower than 9 (8,7,6, etc) */
<![endif]-->

What if you wanted greater than IE 7

<!--[if gt IE 7]>
	/* only for IE versions greater than 7 (8, 9, 10 etc) */
<![endif]-->

What if you wanted greater than IE 9 and any browser that is not IE

<!--[if (gt IE 9)|!(IE)]>
	/* only for IE versions greater than 9 and non IE browsers (Chrome, firefox, etc) */
<![endif]-->

What if you wanted greater than or equal to IE 8

<!--[if gte IE 8]>
	/* only for IE versions greater than or equal to 8 */
<![endif]-->

Conclusion

So now you don’t have to tell your client that you can’t support IE7 any longer because… You’ve got no excuse now! Did I just create more work for some people? 🙂

Comments: