What's wrong with IE?

Question

I fall into an IE bug that I don't find a way to solve Here's the template http://codecanyon.net/item/tquery-dynamic-tables/full_screen_preview/89478

If you open with Firefox or Chrome, the table header shows correctly, no BLACK, if you use IE7 or IE8, it shows some black space. Why? I tried to change padding, margin... but that didn't work, the black space is still glued. How can I fix such bugs?

Please also, explain what tools, or methods can help fix this bug

Update: Bug Fixed!

The reason is that IE gives an arbitrary size/padding/margin to the img element when the src is undefined.

When the src attribute is defined dynamically through JavaScript, this doesn't correct it. It still undefined, so it doesn't solve the problem.

Solution: Fix a height/width for the image.

Answer 1

The sort image you have in the cells still takes up space - in this case, the space used by IE's default "invalid image" placeholder, because you left the src attribute empty. You can verify this using Developer Tools, and setting the height to 1 pixel.

The problem is that visibility: hidden doesn't mean "don't use any space" - it means "claim the space, but don't show anything there". Use display: none instead if you don't want it to take up any space.

You may still wonder "But why didn't I see this anywhere else?" Well, that's due to the other browsers handling the missing image differently.

Answer 2

One tool that can help is the IE Developer Toolbar, which wil let you look at individual elements and the CSS applied to them. Looking quickly at the real page, not the link you sent (because the IE toolbar can't go through IFRAMEs for some reason), the one thing that pops out is the TD and TH elements in your table head show hasLayout: -1. It's a custom IE property that causes all sorts of bugs. You can read about it here. A couple of quick fixes you can try: apply 'zoom: 1;' or 'position: relative;' to those elements to see if it goes way. That's not a fix, it's a hack, but it often works.