Question

I finally have finished a Web Application and now I have to make it compatible with Internet Explorer (at least 8). It’s almost complete now except for one place, where IE8 apparently deletes some CSS formatting I have defined.

I uploaded some Screenshots of the generating Perl Code, how Firefox (+ Firebug) renders it and how IE8 (+ “Web Developer Tools”) renders it.

IE8 just seems to ignore my width, height, left and top of every Element that is created. Google doesn’t seem to know anything about this behavior. Can anyone help me on this one?

Optional Lecture

In case you wonder what it should do: This part of the App creates an overlay over the Storyboard (which is sort of an online comic creator) and fills up the Screen with all the Panels a User has created. It shrinks/grows the Previews so that the Entire screen is always used up as much as possible without stretching the image and it arranges them in a Grid (1×1,1×2,2×2,2×3 and so on). The Screens can then be renamed by clicking on the Screen Title, they can be sorted by dragging them around and can be deleted by clicking on a delete button which appears on the upper right when hovering (just like Badges on the iPhone). This works like a charm and it took me some time for the CSS to work like it should.

Edit 1

The Code needs to be re-factored (which is the last thing I will do) so there is some dubious CSS in the Code. Don’t mind that 🙂

Edit 2

I may have found a way to share my Code with you via my Public Folder. Just download storyboard.zip and open storyboard.html.

Edit 3

With some help from the Guys over at doctype, I was able to track down and discover the Bug. Now this is troublesome, because I need the values from window.innerHeight and window.innerWidth to be able to adjust the Previews so that it fills up the screen as much as possible. Do you Guys know an alternative?

Answer 1

The Question was answered over at doctype.
The Problem was incompatibility between IE and the rest of the world.

I used window.innerHeight and window.innerWidth to determine how big my previews can be. Unfortunately, IE does not support this function so it returned a NaN instead of a Number, which in turn was processed by Perl as NaN. The CSS that IE received in the end was something like

width: NaNpx;

I changed window.innerWidth by document.body.offsetWidth (same with Height) and now it works, although not as pretty.