Help with IE6 Compliance

programming web dev
1

Much to my distress, I’ve been asked to make a website IE6 compliant. But it’s been a while, and I don’t remember the hacks to deal with these issues:

  1. div containers ignore their width settings and add some kind of padding that can’t be accounted for.

  2. an element positioned absolutely within its parent div has its absolutely positioning ignored (The div contains a line of text and is treated as just another paragraph).

This site uses a the following layout: an outside container div, header div, footer div, a menu div (floated left column) and content div (right column). Note that the site works fine in IE7, Firefox 2 and Safari 3. I would really appreciate hearing from someone who has dealt with IE6 layout issues.

Some examples:

http://www.tornedgedesign.com/_test/kirupa/L1T1S1.html
In IE6:
http://www.tornedgedesign.com/_test/kirupa/L1T1S1_IE6.gif

http://www.tornedgedesign.com/_test/kirupa/L6T1S1.html
In IE6:
http://www.tornedgedesign.com/_test/kirupa/L6T1S1_IE6.gif

http://www.tornedgedesign.com/_test/kirupa/finish.html
In IE6:
http://www.tornedgedesign.com/_test/kirupa/finish_IE6.gif

http://www.tornedgedesign.com/_test/kirupa/welcome.html
In IE6:
http://www.tornedgedesign.com/_test/kirupa/welcome_IE6.gif

A Zip of these files:
http://www.tornedgedesign.com/_test/kirupa/Kirupa.zip

2

  1. it doesn’t ignore the width, it has a faulty box model. A way to go around that is to avoid declaring the width of elements that have padding but declare the width on the container div instead. Although you can also use conditional comments to declare alternate width for IE6 only. sometimes necessary depending on layout…

  2. for absolute positioning to work reliably, you need to declare a position on the container div too. “position: relative;” usually does the trick

pretty amazing you could build sites without making them IE6 compliant - it’s still the #1 browser in terms of market share…