EPR Creations LLC

IE6 Layout Fixes for HTML & CSS

If you are a website designer, you have likely come to the realization that Internet Explorer 6 is of the devil. Most browsers (Firefox, Chrome, Safari) read and present code a specific way. You create your website and it looks grand in those browsers. Then, you look in Internet Explorer 6 and it looks like someone shook your page and left you with the results. Thanks Microsoft.

It is nice to think about the day when no one will use IE6 anymore, but when I look at website analytics, an astonishing number of people still use IE6.  I think they purchased a PC 5 years ago and never upgraded their browser edition, even though IE 8 & 9 are available.

This problem in IE6 is particularly apparent when using DIV tags to design your website.

Below are a few tricks for making sure your page looks the same in IE6:

• First of all, if you have spaced out your DIVs across the page, but IE6 pushes them down, an easy fix is to float the div to the left (float: left;) and to set the display to inline (display:inline;).
• Secondly, IE6 reads code starting with an underscore, so say you have the following margin written in your CSS file (margin: 0px 10px 3px 15px).  If IE6 is showing the Left margin incorrectly, you could add a second line to the CSS for that particular DIV tag that goes like this (_margin: 0px 10px 3px 0px).

Some of this is honestly trial and error until you discover the way to make your website look the same in IE6 as Firefox.  As you experiment more and more, you will begin to see how IE6 distorts your page and will know ways to combat this for your future sites.

Here is a good site to learn how IE6 reads Floats, Margins, & Padding – http://www.positioniseverything.net/explorer/floatIndent.html

Related posts:

1. Send HTML Newsletters through Entourage
2. SEO-Friendly Fonts