Programming - - By Craig Buckler

10 Fixes That Solve IE6 Problems

How to fix IE6We know IE is likely to be around for some time, but can we still support the browser and avoid hacks and conditional CSS? Here are 10 fixes to solve the majority of IE6 problems with valid HTML and CSS code…

1. Use a DOCTYPE
You should always place a DOCTYPE at the top of every HTML page and a strict version is recommended, i.e.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

or, for XHTML:

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

The last thing you need is IE6 going into quirks mode – it’s quirky enough already.

2. Set position: relative
Setting an element to position:relative solves a multitude of problems, especially if you have ever experienced invisible or strangely aligned boxes. Obviously, you need to be careful that absolutely-positioned child nodes are repositioned accordingly.

3. Use display:inline for floated elements
Floated elements with a margin can fire the famous IE6 double-margin bug, e.g. you specify a left margin of 5px and actually get 10px. display:inline will fix the problem and, although it should not be required, your CSS remains valid.

4. Set an element to hasLayout
Many of IE6’s (and IE7’s) rendering issues can be fixed by setting the element’s hasLayout property. This is an internal IE setting that determines how content is bounded and positioned in relation to other items. Setting hasLayout can also be essential if you need to make an inline element such as a link into a block or apply transparency effects.

The easiest way to set hasLayout is to set a CSS height or width (zoom can also be used, but that is not part of the CSS standard). Setting the actual dimensions is recommended but, where that is not possible, you may be able to use height:1%. If the parent element has no set height, the element’s physical height is not affected but hasLayout is enabled.

5. Fixing the repeated characters bug
Complex layouts can trigger a bug where the last few characters of a floated element can appear on the cleared element below. There are several solutions; few are ideal and a little trial and error will be required:

  • ensure all floated elements use display:inline;
  • use a margin-right:-3px; on the last floated element
  • use a conditional comment as the last item in the floated element, i.e. <!--[if !IE]>Put your commentary in here...<![endif]-->
  • use an empty div in the last element of the container (it can also be necessary to set the width to 90% or similar)

See positioniseverything.net for a full description of the problem.

6. Use only <a> tags for clickable and hovered elements
IE6 can only apply CSS hover effects to <a> tags.

You should also use them for controls within JavaScript-powered widgets so they remain keyboard navigable. There are some alternative options, but <a> tags are more reliable than most solutions.

7. Use !important or advanced selectors for IE-specific code
It is still possible to write valid code that specifically targets IE6 without resorting to traditional hacks or conditional CSS in additional files. For example, minimum heights can be defined using the code:


#element {
	min-height: 20em;
	height: auto !important; /* understood by all browsers */
	height: 20em; /* IE6 incorrectly uses this value /*
}

IE6 does not understand ‘min-height’ and incorrectly overrides the ‘auto’ height with 20em. However, it then increases the dimensions if the content requires more room.

Another option is to use advanced selectors, e.g.


#element {
	min-height: 20em;
	height: 20em;
}

/* ignored by IE6 */
#element[id] {
	 height: auto;
}

8. Avoid percentage dimensions
Percentages confuse IE. Unless you can carefully size every parent element, they are probably best avoided. You can still use percentage values in other browsers with !important, e.g.


body {
	margin: 2% 0 !important;
	margin: 20px 0; /* IE6 only */
}

9. Test early and test often
Never leave IE6 testing until your website or application is complete; the problems will be worse and take longer to fix. If your site works in Firefox and IE6, it is almost certain to work in other browsers.

10. Refactor your code
Often, it can take longer to fix than re-think a layout problem. Minor alterations to the HTML and simpler CSS are often more effective. This may mean you abandon perfectly legitimate code, but fewer long-term issues will arise and you know how to handle the problem in future.

Have I missed your favourite IE6 fix? Comments and suggestions welcome.

Sponsors
Login or Create Account to Comment
Login Create Account