Mike 0

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 and Stack Overflow don'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, called Previews, 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.

PS

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 1

As requested, the Code Firefox generates for me. I'll try and change the order in which Perl writes the CSS.

<li id="1" style="width: 635px; height: 287px; float: left; text-align: center;">
   <div id="screens_1" class="screen ui-corner-all" style="position: relative; width: 581px; height: 247px; margin-left: 27px; margin-top: 0px; margin-bottom: 5px;">
      <img src="http://192.168.1.120/osr/storyboard/background/sky/outdoors_day.jpg" style="border: medium none ; width: 581px; height: 247px; z-index: 0;" alt="image">
      <div style="z-index: 5; left: 174px; top: 53px; position: absolute;" id="bot_OLEFABot">
         <!-- A lot of immages -->
      </div>
   </div>   
   <div class="black-background ui-corner-all" style="padding: 0pt 10px; width: auto; height: auto; position: static; display: inline; max-width: 90%;">
      <span class="screen_name">169</span>
   </div>
</li>

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

I have followed Hodgins's Advice and finally discovered 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?

  • Hmm, storyboard.html crashes IE8 instantly here -- I think it's something to do with the java applet. Olly Hodgson over 7 years ago
  • Right, I removed the applet line of code. The li elements in #expose are displaying "correctly" (width and height are honoured). So i suspect the problem is further up the chain somewhere. Olly Hodgson over 7 years ago

4 answers

1
point
This was chosen as the best answer

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?

This looks like it holds the answer:

http://www.javascripter.net/faq/browserw.htm

To determine the actual size of the browser window, use the following properties:

in Netscape Navigator 4: window.innerWidth, window.innerHeight

in Microsoft Internet Explorer: document.body.offsetWidth, document.body.offsetHeight

Note that the code that uses document.body.offsetWidth and document.body.offsetHeight must be executed after the browser has parsed the tag.

(although the page looks old and musty)

Answered over 7 years ago by Tony Crockford
  • Old and musty, but correct nonetheless :) Mike over 7 years ago
danwellman 5600
2
points

A link to an actual page would help with debugging if possible...IE can tie itself in knots sometimes over CSS specificity, where it can seem like IE just isn't applying the rules, but in fact they are being overwritten in the cascade.

Try increasing the specificty of the rules that aren't being applied, e.g. if your selector is currently like this:

.mycontainer .alist .somekindoflink { ... }

try changing it to this:

div.mycontainer ul.alist a.somekindoflink { ... }
Answered over 7 years ago by danwellman
  • Since the CSS has to be generated on the fly in this particular part of the Web-App, everything is inline-CSS, which is the top most priority in CSS (if I am not mistaken). So, I cannot try this out. Also: I have this App running on a Branch and it is only accessible via Intranet. I would love to make it accessible to the outside since it would be more helpful but I am not allowed to :( Mike over 7 years ago
2
points

My guess is that IE is hitting an issue somewhere in your inline style and is ignoring everything until it gets to something it understands?

Can you show us your generated source code?

Also, what happens if you drop into IE7 or compatibility mode?

Answered over 7 years ago by Olly Hodgson
  • Posted generated HTML. Will try your suggestions Mike over 7 years ago
  • I tried changing the order of the CSS, to no avail. If I try to run IE in Compatibility mode or even IE7, the Web-App breaks because of some IE<8 specific JS Error... *sigh* Mike over 7 years ago
0
points

Numeric ID's might be part of your problem.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit.

<li id="1"

is therefore not allowed, but it depends on how you are using it.

You also have multiple classes and inline styles - the inline style will take precedence, but only if it supersedes previous declarations, so you may have existing CSS that is being applied.

this may not be the problem, but it won't be helping matters.

Answered over 7 years ago by Tony Crockford
  • I double checked my classes and inline styles. I could not find anything that overrides the expected behavior, nor do IE or Firefox tell me that something was overridden. I also tried changed the id's to meet the standards, but it did not help either. It's just as if IE8 strips down all my positioning and sizing attributes, but only in the div "expose". Mike over 7 years ago
  • what you should do now, is make a test case - a very simple replication of your html/css and see if that works in IE8 - strip away as much as possible. Post that test case if it still fails and we can be more helpful. Tony Crockford over 7 years ago
  • position:static - means no position - just go with the flow - that is what you want, where you're using it? Tony Crockford over 7 years ago
  • As Tony says, try to build a reduced test-case. You might also try removing some of the non-standard bits and bobs. I can see you're using IE's CSS filters and the unselectable attribute for instance. Olly Hodgson over 7 years ago