How to solve common IE bugs

Lately, I wrote more about CSS3 features and its awesomeness. Today’s article is about Internet Explorer common CSS bugs and how to solve them.

You may ask me “why this article?” and you have all the reasons to do that. If you read some of my previous articles, then you know I’m a CSS3 addicted. But sometimes, when working on some projects that require cross-browser compatibility, you need to know how to action when you encounter IE bugs.

Modern browsers are constantly evolving and their bugs or strange behaviors are always fixed due new version releases. But what about old browsers like Internet Explorer 6/7? As they are not maintained anymore, their rendering bugs became sort of “de facto”.

Conditional comments

<!--[if IE 6]>
        IE6 stuff
<![endif]-->

Internet Explorer 6 conditional comment

<!--[if IE 7]>
        IE7 stuff
<![endif]-->

Internet Explorer 7 conditional comment

There are also more options here, but I think the above one are to most used.

Specifically target elements

p {
  color: #000;
  color : green\9; /* IE8 and below - just in case */
  *color: red; /* IE7 and below */
  _color: blue; /* IE6 and below */
}

If you are not a big fan of conditional comments, then you may try this solution.

Just in case, I added the line who can help you target the IE8 browser. But, sincerely, if you will need to target Internet Explorer 8, then you have bigger problems. I mean, you should start reviewing your CSS code!

Doubled Margin

p {
  float: right;
  margin-right: 50px;
}

This is perhaps the most encountered bug when using floated blocks. For the above example, IE6 will double the right margin. To fix this, add display: inline to the floated element using one of the above methods (conditional comment or specifically targeting).

Button’s padding is ignored

Try to add padding to an button, you’ll see how the padding’s values are ignore on IE6 and IE7. To fix that, add overflow: visible to that button and the problem will be solved. Read more about this here.

Negative margins

IE6 and negative margins weren’t never called friends. When you use a negative margin for an element, to avoid layout problems, you should add position:relative to it.

More bugs/fixes?

To find out more about these common problems check this amazing resource about these bugs.

What are the most annoying bugs you encounter in your daily developing? Share them with us by adding a comment.

In the end

Its name was Internet Explorer 6. Now that we’re in 2011, in an era of modern web standards, it’s time to say goodbye.

…and I’m not the one who’s saying that. :)