What's wrong with IE?

views:

163

answers:

+1 Q:

What's wrong with IE?

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.

+2 A:

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.

Tom 2010-03-01 16:45:37

Developer Toolbar has no problem manipulating IFRAMEs - but you can't select them with the "Choose element by clicking" - probably since it can't know if you wanted the IFRAME itself, or whatever you pointed on inside the IFRAME. You have to navigate your way to the right element by expanding the tree.

Michael Madsen 2010-03-01 17:16:36

Ah, thanks. That was the issue.

Tom 2010-03-01 17:21:51

so what's the difference between a fix and a hack? (if both of them fix the bug)

Omar Abid 2010-03-01 21:43:14

A hack is anything that fixes the issue without you ending up understanding what caused the problem. In this case, I should have thought more clearly about your question: since the issue happened even in IE8, there was a deeper problem, as the rendering engine changed from IE7 -> IE8

Tom 2010-03-02 13:31:41

+4 A:

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.

Michael Madsen 2010-03-01 17:19:27

"Well, that's due to the other browsers handling the missing image differently."What about when the image shows up? Other browsers don't take up space, so why does IE?

Omar Abid 2010-03-01 21:50:59

I saw the placeholder image, but setting `display: none` didn't cut it for me in IE8. Was I mistaken?

Pekka 2010-03-01 21:54:11

@Omar: Probably because back when they wrote it like that, they felt it was a good idea to indicate that the image wasn't working - I'm guessing it has something to do with the fact that everyone was using modems back then, and it might be nice to be able to distinguish between the image not being loaded YET, and the image not being able to load. They don't really have any reason to change it, so they don't.

Michael Madsen 2010-03-01 22:18:13

@Pekka: You need to set it on all of the placeholder images to see it. They're on a single row, and all of the cells in the row need to have the same height - so if you only change it for one, that'll be the reason. However, it's pretty easy to tell that they have an effect if you highlight the element using Developer Tools - you can see the outline of the image, and see that it takes up quite a bit of space.

Michael Madsen 2010-03-01 22:20:12

@Michael aah, good catch! +1.

Pekka 2010-03-01 22:26:22

Thanks for pointing for the images, they were the cause of the problem. Read my update and comment on it :)

Omar Abid 2010-03-02 01:22:37

ansaurus

tags:

views:

answers:

What's wrong with IE?

related questions