Debugging CSS in Internet Explorer - Part 1

For web designers and developers, fixing CSS issues in Internet Explorer is a daily chore. Not too long ago I decided to document these issues and what I did to fix them. This article will be the first in a series of articles containing real world CSS problems and solutions. Although some of these problems have been talked about elsewhere, I hope this article will help designers and developers to debug CSS issues quicker and make the most of their time.

The W3C's XHTML and CSS Validators

It may seem obvious, but I've seen so many css issues resolved because of some unclosed elements or simple spelling errors. Some of the validators' feedback may seem cryptic at first but after using it over and over, you will be able to instantly pick out problems. Make sure you turn on the "show source" option in the validators so you can quickly match the problems line by line.

A Reality Check

If you're working with a test server, separate from your local machine, make sure you're working with the correct files. I've made this mistake and I've seen others make this mistake; it's always good to double check.

CSS Problem Solving

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.