DebonStudio » css bugs http://www.debonstudio.com/blog Olivier Debon Tue, 29 Jun 2010 21:04:06 +0000 en hourly 1 http://wordpress.org/?v=3.1.3 Dealing with IE6 CSS Bugs http://www.debonstudio.com/blog/dealing-with-ie6-css-bugs/ http://www.debonstudio.com/blog/dealing-with-ie6-css-bugs/#comments Wed, 27 May 2009 18:46:35 +0000 Olivier http://www.debonstudio.com/blog/?p=161 Frustration over IE6 bugsAlthough Internet Explorer 7 and the newly release Internet Explorer 8 have made progress in replacing the infamous Internet Explorer 6, there are still about 30% of users who still use it globally, and depending on your audience, that number could even be larger.

84% of DebonStudio.com visitors are using Internet Explorer, with roughly half of them being IE6. So 42% of the total visits are done using Internet Explorer 6. Compare this with the W3C School website, where almost 50% of visitors are using Firefox (IE6 users amount to only 15%).

A word about IE5.5 and earlier versions

I don’t worry too much anymore about IE5.5 and earlier versions. They are now representing such a tiny share of the browsers market that they can be safely ignored. But if you really, really, really want to accommodate these browsers, this page goes through the IE5.5 and earlier browsers bugs.

Ok, enough already, let’s get to it!

The Internet Explorer Conditional Comment

Until IE6 meets the same fate as its predecessors and fades away like a bad dream, you should go the extra mile and make sure your web pages are properly rendered in IE6.

Some of the IE6 css bug fixes listed in this article are straight forward, but for others some “hacks” are necessary to make IE6 behave. Depending on the amount of extra code needed, it is sometime easier to just create a separate style sheet and call it only when the page is viewed in IE6 using an Internet Explorer conditional comment.

As an example, the conditional comment below will load the ie-css-fixes.css style sheet only if the page is viewed in IE6 or an older version. (The “lte” meaning “less than or equal to”)

<!--[if lte IE 6]>
<style type="text/css" media="screen">@import "ie-css-fixes.css";</style>
<![endif]-->

Doing so will ensure that non Internet Explorer browsers don’t unnecessary load the extra style sheet since they will ignore this code as a comment.

The Box Model Bug

This bug is responsible for a lot of gray hair in the web development community. It occurs when IE6 is in Quirks Mode, which happens when the html document doesn’t have a Doctype declaration or has an incomplete or erroneous one. The bug was corrected with the release of Internet Explorer 6. But if in Quirks Mode, Internet Explorer 6 falls back to the way earlier versions rendered html documents, thus applying the old box model. To prevent this from happening, simply don’t forget to put a valid Doctype declaration in all your web page. To verify that the page has a valid Doctype declaration, use the W3C Markup Validation Service.

Here’s an example of a Doctype declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

What is the box model bug anyway?

When Microsoft implemented the box model for Internet Explorer 5/win, they decided that a div (box) “width” declaration should refer to the outer dimension of the entire div. That means the width of a div would include the standard width, any padding applied to it and also its borders. The visual result would be a much smaller div depending on the amount of padding and the size of the borders. Only fluid div were unaffected. All the workarounds and hacks have been about applying a different width depending on which browser was used.

Read this article for more details.

IE6 Doubled Float-Margin Bug

You probably encountered this weird bug if you have been using margins on your float elements. For example, you use a 10px left margin on a left float element inside a container, everything looks normal on all browsers except when you view your page in IE6, for some weird reason the 10px margin has become a 20px margin, resulting in a broken layout. Steve Clason discovered a quick and easy fix by simply adding a “display: inline;” on the float element. It makes IE6 behave properly and apply the margin without doubling its size. By the way this will fix also the Duplicate Characters Bug.

div.floated-element { display: inline; }

You can read this great article for a more detailed explanation.

IE6 Peekaboo Bug

This bug is triggered when you have a float next to some content inside a container. Upon loading the page in IE, the content is nowhere to be seen. If you scroll down the page or switch to another window and come back, this time it is there. No, it’s not magic, it’s IE6. To this day, I haven’t heard a coherent explanation for that behavior, but fortunately, there are a few fixes. An easy one is to give the container a zoom property of 1.

div.container { zoom: 1; }

But it won’t validate, so put it inside a IE Conditional Comment.

Read more about this bug.

Three-pixel text jog bug

This bug manifests itself when you have text adjacent to a floated element. A mysterious 3-pixel gap appears between the text and the floated element until the floated element stop. Then it’s back to normal.

I tried several fixes that are available on the web, but couldn’t make it work. The only way the gap would disappear is if the adjacent element is floated also. But this has to be IE6 specific (use IE conditional comment) and the margin obviously needs to be eliminated or it will be applied between the 2 elements.

The Underscore Hack

A quick and dirty trick I use often to hunt for bugs is the underscore hack. IE6 and older versions ignore the underscore and apply the rule, while other browsers don’t recognize it.

#header {
margin: 10px;
_margin: 20px;
}

In the example above, all browsers will apply a 10px margin to the header, but IE6 and below will apply a 20px margin.

The !important Hack

IE6 and earlier version don’t seem to care for the !important keyword. So you can use it to selectively apply rules to these browsers. Using the same example as above, it would look like this:

#header {
margin: 10px !important;
margin: 20px;
}

The advantage of the !important hack other the previous underscore hack is that it will validate. Otherwise it does the same thing.

IE6 days will end eventually

Although the bugs mentioned in this post are the most common regarding IE6, there are plenty others that will keep you wondering what is wrong with the Microsoft folks and why they disregard the W3C standards so often. Unfortunately, Internet Explorer is the lion share on the browser market, like it or not. So you will have to accommodate and be patient, there is light at the end of the tunnel, each day that goes by, less and less people are using Internet Explorer 6.

]]> http://www.debonstudio.com/blog/dealing-with-ie6-css-bugs/feed/ 0