Solve IE6 Problems

posted in: Mobile Technology | 0


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.

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.

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.

Height:100% on a position absolute div do not work.

IE6 will not understand the 100% because it’s parent don’t have an height property, Need to add a fixed height to it’s parent.
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.

Next Post

Leave a Reply