10 Fixes That Solve IE6 Problems

We 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"
"https://www.w3.org/TR/html4/strict.dtd">

or, for XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://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. 
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.

Frequently Asked Questions (FAQs) about Internet Explorer 6 Problems and Fixes

Why does Internet Explorer 6 display the “Internet Explorer cannot display the webpage” error?

This error typically occurs when Internet Explorer 6 cannot establish a connection with the server hosting the webpage. This could be due to a variety of reasons such as incorrect internet settings, firewall blocking the connection, or the website being temporarily unavailable. To fix this, you can try resetting your internet settings, disabling your firewall temporarily, or checking if the website is down.

How can I repair or reinstall Internet Explorer 6?

If Internet Explorer 6 is not functioning properly, you can repair or reinstall it. To do this, you need to access the “Add or Remove Programs” option in the Control Panel. Find Internet Explorer 6 in the list of installed programs, select it, and click on the “Change/Remove” button. Follow the prompts to repair or reinstall the browser.

Why does Internet Explorer 6 encounter problems with ActiveX controls?

ActiveX controls are small programs that enhance your browsing experience by allowing you to view certain types of media or perform certain tasks. However, they can sometimes cause problems in Internet Explorer 6 due to compatibility issues or if they are not properly installed. To fix this, you can try updating the ActiveX control, reinstalling it, or disabling it.

Why is Internet Explorer 6 running slow?

Internet Explorer 6 might run slow due to several reasons such as too many add-ons, a full cache, or outdated software. To improve its speed, you can disable unnecessary add-ons, clear the cache, or update the browser to the latest version.

How can I improve the security of Internet Explorer 6?

Internet Explorer 6 has several built-in security features that you can utilize. These include the pop-up blocker, the phishing filter, and the ability to manage add-ons. Additionally, you can also improve security by regularly updating the browser and using a reliable antivirus program.

Why does Internet Explorer 6 crash frequently?

Frequent crashes in Internet Explorer 6 can be caused by several factors such as outdated software, incompatible add-ons, or a full cache. To fix this, you can update the browser, disable incompatible add-ons, or clear the cache.

How can I view webpages that are not displaying correctly in Internet Explorer 6?

If a webpage is not displaying correctly in Internet Explorer 6, it could be due to compatibility issues. To fix this, you can try viewing the webpage in compatibility view. This can be done by clicking on the “Page” menu, selecting “Compatibility View Settings”, and adding the website to the list.

Why am I unable to download files using Internet Explorer 6?

This could be due to your security settings, which might be set to block downloads. To fix this, you can adjust your security settings to allow downloads. Alternatively, the issue might be with the website itself, in which case you can try downloading the file from a different website.

How can I manage add-ons in Internet Explorer 6?

You can manage add-ons in Internet Explorer 6 by accessing the “Manage Add-ons” option in the “Tools” menu. Here, you can enable or disable add-ons, and view more information about each add-on.

Why does Internet Explorer 6 display the “Internet Explorer has encountered a problem and needs to close” error?

This error typically occurs when Internet Explorer 6 encounters a problem that it cannot recover from. This could be due to a variety of reasons such as a problem with an add-on, a full cache, or outdated software. To fix this, you can try disabling problematic add-ons, clearing the cache, or updating the browser.