Solution to IE Bugs – Conditional Comments

Internet Explorer (IE) drives me crazy and all of us at some point or the other. It is painful to see the our design break in IE when you made everything as per standards and all works fine in latest browsers – Firefox,Chrome,Safari,Opera. What should we do to fix our design for IE different versions?

I have used conditional comments and would advice the same solution to everyone else. Let’s get in deeper and understand what and how conditional comments work.

Solution to IE Bugs - Conditional Comments

What are conditional comments?

Conditional comments solve bugs by giving special instructions to IE. They detect the browser and its version and deliver appropriate style and CSS.

How to use conditional comments?

Link external CSS to Html file:

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

Placing in head section of the Html file using the style tag:

<!--[if IE7]>
<style>
.class{display:block;}
</style>
<![endif]-->

Benefits of using conditional comments?

1. No extra JavaScript code required thus reduced HTTP request and faster loading.
2. Valid CSS.
3. They are future proof. Comments use logical structure, and separate the targeted CSS from the standard CSS. Thus makes it easy to remove targeted CSS if required anytime.

Note:

Conditional statement starts with –

<!--[if …]> 
and are closed with
<![endif]--> statement

Conditional Comment Operators and what they mean

– lt : less than
– gt : greater than
– lte : less than or equal to
– gte : greater than or equal to
– ! : the NOT operator
– & : the AND operator
– | : the OR operator

There are various types of Conditional Comments

Target ALL VERSIONS of IE

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

Target everything EXCEPT IE

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

Target IE 7 ONLY

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

Target IE 6 ONLY

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

Target IE 5 ONLY


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

Target IE 5.5 ONLY

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

Target IE 6 and LOWER

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Target IE 7 and LOWER

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

Target IE 8 and LOWER

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 6 and HIGHER

<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Target IE 7 and HIGHER


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

Target IE 8 and HIGHER

<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

What are CSS hacks and why to avoid hacks?

CSS hacks also solve IE bugs but the problem with them is that they do not validate which can be an issue for many people who are very strict about code validation.

I will not talk about hacks in detail in this article. Will write about it in a separate article soon.So have to leave it till here only.

Supporting IE6

In today’s time 99% of the people are using Firefox,Chrome,Safari,Opera. So why support IE6 anymore.

Final Words

Conditional Comments are important and useful way to target particular version of IE. Avoid hacks and use conditional comments instead.

There are various types of comments as mentioned above but the point is to keep it simple and use only what is needed and avoid any complex statement. Already IE bugs are a big problem we should make things easy for our self in some way.

It’s just a personal opinion :)

Please do share your experience with conditional comments and help us improve!!

Reference Websites

– How To Support Internet Explorer and Still Be Cutting Edge

– The Client Wants IE 6 Support!

– CSS Differences in Internet Explorer 6, 7 and 8

 

Written by Nikhil Malhotra


Hi! I am Nikhil Malhotra, a Web/UI designer and Front End developer. This is the area of my website where I share my knowledge in form of tutorials and articles.

 
This entry was posted in Code, Tutorials and tagged , , , , , . Bookmark the permalink.

One Response to Solution to IE Bugs – Conditional Comments

  1. Pingback: How to Use Multiple Classes | Blog | FASTTRACKCREATIONS

Leave a Reply

Your email address will not be published. Required fields are marked *