IE8 deletes CSS properties

Question

Hi there,

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 (1x1,1x2,2x2,2x3 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

It's not really possible to tell without more code/a demo — it looks like you have quite a lot of CSS going on that we can only see bits of in the screens. However,

IE8 just seems to ignore my width, height, left and top of every Element that is created.

is often caused by missing the ‘px’ unit off widths and heights, but any CSS parsing error could cause it. We can't see the generated HTML source, but what's with the backslashes in your source? Do they get replaced by whatever language string formatting thing you're using? Try copy/pasting the contents of the style attribute into the CSS validator to check for obvious mistakes.

Also there is a problem with the black overlay's transparency. Judging by the DOM, IE is failing to parse the ‘filter’ property, how are you setting that? Since you seem to be using jQuery, you should be able to set it from script with element.css('opacity', .5). (Edit: I'm guessing you're actually doing this, judging by the ‘zoom: 1’ IE is seeing. However clearly the filter property is coming out broken; jQuery will do this if it cannot parseInt the value. What are you passing as the value to .css()?)

I'm also not sure what:

style="width:auto;height:auto;position:static;

are for, those are the defaults anyway. Also max-width, like width, does not work on inline elements.

Bonus nitpicks: $screen_name (and any or text string you template into HTML) needs to be HTML-escaped or you may have cross-site-scripting vulnerabilities. And purely numeric ids are invalid.

Answer 2

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.