The most common IE problems are:
- Margin Doubling! (Fix? Try Display:inline;)
- Layouts look different. Columns are wider or narrower between browsers or move down the page.
this is usually caused by the content being larger than the space alloted for that div- resize the div or the content.
specific info how to fix this:
http://www.positioniseverything.net/explorer/expandingboxbug.html
============
This is an excerpt of iBloom Studios' IE troubleshooting guide.
The ones below are the mistakes I normally make.
- Elements are disappearing
When dealing with floated elements in Internet Explorer it is possible that some elements seem to completely disappear. This is commonly referred to as the peekaboo bug. If you apply position:relative to the vanishing element it should pop right back into place. I've also seen elements disappear in print and not screen despite using the same stylesheet in IE7.
- Margins seem to be doubled
Another float issue found in Internet Explorer. Some people might be tempted to take the easier way out and deliver different CSS code to Internet Explorer, whether by hacks or comments. It's best to avoid these practices and try an alternate route. Although Internet Explorer can become clueless with margins and float, it will still understand padding. If possible, set the margins to 0 and try to compensate with padding either on the element itself (if it doesn't affect the appearance) or on a parent element.
- Element with a height of 1px, but Internet Explorer increases it to 10px
Internet explorer uses the line-height of an element as a kind of unintentional min-height. So, if you try to set a div to height:1px for example (such as a decorative element) and the default line-height (probably inherited from parent elements) for that element is set to 10px, the height of that element will be forced to the line-height in Internet Explorer. To get around this, you can set line-height:0 and manually set the height.
- An empty anchor tag is not clickable
It may seem unusual, but in my experience I have come across this more than once. Say you have an anchor element that you've given display:block and some dimensions with no content or background image, in order to make a clickable area, but in Internet Explorer it's not clickable. In order to keep the anchor invisible you can add a transparent 1px background-image. Suddenly, Internet Explorer understands that this is a clickable element.
- An element's text is squished, causing it to flow downward
More than likely this is caused by floating an element without setting a width or by a floating sibling element's width being slightly too small where the squished element can't break out. Try setting a width on the squished element, or a larger width on the sibling element. If these methods don't work, use clear to break the element away from the floated sibling element.
==============
For a concise list of IE browser bugs and examples visit:
http://www.positioniseverything.net/explorer.html
Some additional pointers:
- Absolute positioning - Try not to use it
IE CSS Rollover Flicker issues:
http://www.ibloomstudios.com/articles/css_rollover_flicker_in_internet_explorer/
http://www.alistapart.com/articles/sprites
