IE6 is still alive for web developers. Foolproof methods to fix problems with IE6

Web development | Posted: December 3rd, 2009 | ozz
Tags: CSS, DOCTYPE, HTML, IE6, W3C, XHTML

1. Use DOCTYPE Declarations
It is always better to indicate doctype in the header of each html page:
<! DOCTYPE HTML PUBLIC “- / / W3C / / DTD HTML 4.01 / / EN” “http://www.w3.org/TR/html4/strict.dtd”>

For XHTML:
<! DOCTYPE html PUBLIC “- / / W3C / / DTD XHTML 1.0 Strict / / EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Don’t write any other characters before doctype (no gaps, no line breaks). Otherwise you will get strange fields in body and html tags.

2. Set “position: relative”
Using this hack you can cure the vast number of problems with IE6 (for example, invisible or weird positioned blocks).

3. Use “display: inline” for floating blocks
Floating elements with margin can cause a well known bug in IE6, we mean double margin.
For example, indicating the left margin as 5px we get 10px as a result. “Display: inline” fixes this problem and your CSS becomes valid.

4. Set “hasLayout” in properties
Many rendering bugs in IE6 (and also in IE7) can be corrected by “hasLayout”. This is an internal feature of IE, which indicates how content must be aligned and positioned (relatively to other elements). This feature can be also used when you need to transform line item (e.g., <a>) into block or when transparency effects are needed.
The easiest way to indicate this property is to set height or width (zoom can also be used, but it’s not a standard CSS). It is recommended to specify the actual size of your block, and if it’s not possible (dynamically changing height or width), you can do this: “height: 1px”.

5. Fixing the repeated characters bug
This bag appears in lists and duplicates the last 1-3 signs of the last item in the list. There are some ways to fix it:

• Use “display: inline” for floating elements;
• Set “margin-right:-3px” for the last item in the list;
• Use conditional comments;
• Add an empty div in the last item of the list (sometimes, you must set “width: 90%” or other appropriate width).

6. Use advanced CSS selectors for other browsers and standard selectors without percentage values for IE
Or you can just use “!important”.

Example #1:

# element (
min-height: 40em;
height: 40em;
)
/ * Ignored by IE6 * /
# element [id] (
height: auto;
)

Example #2:

body (
margin: 4% 0! important;
margin: 40px 0; / * IE6 only * /
)

If you consider these tips strange or too complicated – don’t hesitate to drop us a line. Web development professionals from Oxagile software development company are at your service on 24/7 basis.