Debugging CSS in Internet Explorer - Part 1
Friday, February 23, 2007 by Nicholas Gagne
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:relativeto 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-heightof an element as a kind of unintentional
min-height. So, if you try to set a div to
height:1pxfor 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-heightin Internet Explorer. To get around this, you can set
line-height:0and manually set the
- 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:blockand 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
widthon the squished element, or a larger
widthon the sibling element. If these methods don't work, use
clearto break the element away from the floated sibling element.