Free Quote
Blog

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

IE6 is still relevant to web developers, as we all know. In this brief article, we are going to look at several common problems that IE can throw your way, as well as some recommended hacks to deal with them. Feel free to ask questions if something is not 100% clear.

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.

Leave a Comment
Your email will not be published