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. :)
Thanks for the very useful tricks to solve the IE of older and unused versions.
I am very agree with your statement that this is time to say GOOD BYE to older versions of IE like 6 & 7.
We are in 2011 and still some of the technically handicapped people are using the 6 and 7 versions of IE. This really sucks the designers and developers badly.
Anyways thanks for the tips.
Thanks for your solution.
I am one of them who’r agree with you and say good bye to IE 6.
good bye to IE 6 ,7,8
Thank for very useful tricks to solve…………..
I’M NOT ONE OF THEM ! :p
I just pray at some point if it will ever come people stop coding to IE only, and that stupid thing called Active X. That is what has caused this whole IE browser blight. Companies that built web portals to physical machines / software that only run in certain version of IE. Heck it was just until this year that my company could drop IE6 cause the call switch’s reporting portal used IE6 and loading it in anything else resulted in sorry please use IE6 to view the site. Not even an option to deal with mis-aligned borders or such. Nope use IE6 or don’t use our product. Hopefully that goes away, but even with a new call switch much of the software wants IE cause it has some stupid hook into active X. Which is even more ironic with it’s use of java along side it. lol Back to topic though thanks for the refresher course, at some point these will become historic documents of the nightmare we all face daily.
Thank you all for your comments, nice to see that we all share the same ideas!
There is another way to support CSS code for IE version fixes without using conditional comments.
The company I work for custom built a CMS around two existing open source frameworks and the CMS part of that equation does not like conditional comments at all – they just don’t work.
To make it work though, I placed an ID on the body tag. Then I use an IE detection script in concert with jQuery to append a class to the body for the version of IE found, and those below it to IE6 e.g. .
Then in my css whenever I need to modify one of the selectors all I need to do is prefix it with the appropriate class e.g.
.content .sidebar {normal styles}
.ie7 .content .sidebar {IE fix}
The beauty of this method is – not only do you avoid conditional comments, it makes css easier to maintain (affected selectors can stay with their standards version and not banished to a separate file), it reduces css file requests… but this method allows IE fixes to cascade.
Often a fix for IE7 will fix a bug in IE6… booyaa! ;)
whoops… it didn’t like my HTML example obviously… the class on the body tag would look like;
omg, haha, the class attribute on the body tag would have say ie6 ie7 and ie8 classes in it.
Maybe this will work now :P
JeremyW, indeed, this is another good way to solve this matter…
HTML code is not allowed here, but I got your point:
<body class="ie">:)Thanks for your comment!
very good , thank you
Masoud, nice to hear that! Thanks for your comment.
Hi Red,
I am using iframe but i am facing some problem due to iframe. I want to use header and footer separately with index.html file because I’ve more than 40 pages and I’ve to change all pages if some miner change desire in my header or footer, so please tell me some solution that I would use header and footer separately with auto height option and how I can compatible for all browsers.
Thanks!
Hey, I don’t recommend you to use iframes for creating dinamic pages. Instead, you could use PHP or a custom management system as WordPress. Good luck.
May you please help me how can I manage in PHP? Have you some example to use header and footer in my main index.html?
Dear Red,
Thanks a lot. You gave correct answer, I also don’t want to use iframe because of search engines discourage like this approach, this is why I want to change this shit. It means HTML5 with CSS3 don’t have solutions.
Thanks for the very useful tricks to solve the IE of older and unused versions
I am one of them who’r agree with you and say good bye to IE 6.
Thanks for support.
i m also support u