homepage Welcome to WebmasterWorld Guest from 54.196.63.93
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Strange behaviour in IE8 only
Script contained in block-level element
penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4343225 posted 10:00 am on Jul 24, 2011 (gmt 0)

Is this me, or is this a bug in IE8? This problem appears to be a bit of a cross between HTML and JavaScript...

Just some test/debug code... I'm stepping through the document.images HTMLCollection and outputting the value of the width attribute using document.writeln(). In IE8 only the first line is output, in all other browsers (including IE6, IE7 and IE9) 4 lines are output as expected (1 for each image). I have isolated what appears to cause the problem, but not a clue as to why. Which leads me to think it is a bug... or it's a problem which my machine!?

This page reproduces the problem in IE8 for me:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Only one line is output in IE8</title>
</head>
<body>
<img src="img/one.jpg" width="100" height="75" alt="1st Demo Image">
<img src="img/two.jpg" width="100" height="75" alt="2nd Demo Image">
<img src="img/three.jpg" width="100" height="75" alt="3rd Demo Image">
<img src="img/four.jpg" width="100" height="75" alt="4th Demo Image">
<pre><script type="text/javascript">
// Only the first line is output in IE8, other browsers OK
// Unless you include additional white-space directly inside the <pre> element!
for (var n=0; n<document.images.length; n++) {
document.writeln(n + ' - ' + document.images[n]['width']);
}
</script></pre>
</body>
</html>


The problem appears to be if the script element producing the output is directly inside an element that is display:block. This does not have to be an element that is inherently a block-level element (like div or pre), but any element that is display:block! There must be no white-space between the block container and the script element.

But, if you were to put just a single space after the opening <pre> tag the problem goes away (but you get an extra space in the output)!

The problem also seems to be limited to accessing the 'width' and 'height' attributes. Accessing 'src' for example is OK!

You can also take the document.writeln() outside the loop and simply append to a string inside the loop and just writeln() the once - this is also OK!

Yes, this problem is easy to workaround, but it has been bugging me!

Is this me, or is this a bug?! Thanks.

 

kb5nju

5+ Year Member



 
Msg#: 4343225 posted 2:02 pm on Jul 26, 2011 (gmt 0)

I've run into some oddball problems with IE8 and CSS values, so it wouldn't surprise me if this is a bug/feature of that browser.

To save yourself a lot of time and frustration, can you work out a way where this will function properly in IE8 and write an if/then to detect the browser and run the alternate code for IE8 users?

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4343225 posted 2:47 pm on Jul 26, 2011 (gmt 0)

...can you work out a way where this will function properly in IE8 and write an if/then to detect the browser and run the alternate code for IE8 users?


Have you been able to try this code in IE8? I'm just curious as to whether it is somehow me, rather than the browser since it is a rather bizarre quirk. I've only been able to try this on one machine, other machines are already running IE9 in which the code works OK.

It's actually very straight forward to make the code work in all browsers, including IE8 (so long as you know this is the problem). As mentioned, by taking
document.writeln() outside of the for loop solves the problem...

Change this:
for (var n=0; n<document.images.length; n++) {  
document.writeln(n + ' - ' + document.images[n]['width']);
}


To this:
var htm = []; 
for (var n=0; n<document.images.length; n++) {
htm.push(n + ' - ' + document.images[n]['width']);
}
document.write(htm.join('\n'));


Like I say, I think this must be a browser quirk, but only being able to test this on one machine I'm not sure.

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4343225 posted 2:02 am on Aug 3, 2011 (gmt 0)

Hi penders, not just your machine/browser. After a very quick look, html, javascript and css too.

Javascript: My understanding is that ie8 has issues with content generated by javascript. You are so far ahead of me with javascript I won't go further than that. However, from a css perspective, document.writeIn should generate a new line at the end of each statement. Best I can tell, ie8 is recognising some character at the end of each expected "line", but not translating/acting on that as a newline.

Html: Couldn't reproduce the issue with block elements such as <p>. All browsers tested (ie7&8, Op11, ff4, winSafari5) display the output on a single line - as would be expected. I can't see newline characters in the code though - which could be a clue to the javascript issue.

Css: Presumably you're using the <pre> to take advantage of the default white-space:pre. Setting that on a block element works as desired except for ie7&8 which create a text-indent on the first line. white-space:pre-line/pre-wrap aren't understood by ie7, but produce the same display as white-space:pre in ie8.

In terms of separating the <pre> and <script> elements by a space (or newline), and seeing that reflected in the formatting, I believe that is correct. The 16.6 of the css recs say:
pre
This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.
and 9.1 of the html recs expressly exempt pre from the expectation visual user agents will "collapse" white-space that is "unnecessary". So any whitespace/newline inside <pre> should produce the results described - although note that per 9.3.4 of the html recs the characteristics of <pre> are not mandatory.

So back to where this began - <pre> with white-space:pre as the default. What fascinated me is that clicking on the first line expands the element to display all the output, formatted exactly as desired! Pre-line/pre-wrap produce the same affect. Adjusting overflow and anything else likely to be relevant don't correct the issue either.

What does work is pre:before, best with not even a space for content to avoid having to deal with browser variations on handling nil content. pseudo elements for ie have white-space:pre-line set by default, so that's useful information to explore at some stage.

However, that "collapsing" plus pseudo's working leads directly to a display issue, and setting display:table-row or display:list-iterm on the <pre> solves the issue without any affect on other browsers.

So I can't explain why, maybe this will prompt someone else. Fascinating, and I've flagged it to explore later.

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4343225 posted 9:23 am on Aug 3, 2011 (gmt 0)

Hi alt131, thanks for the reply, and very thorough as usual!

...document.writeIn should generate a new line at the end of each statement. Best I can tell, ie8 is recognising some character at the end of each expected "line", but not translating/acting on that as a newline.


Just to add, this 'problem' shows itself with
document.write() as well, when no newlines are output. Also (another side issue), IE7 appears to have trouble with writeln(), in that it treats it exactly the same as write(), without newlines! incidentally, that should be the only difference between write() and writeln() - the convenience of a newline appended to the end of the output.

I can't see newline characters in the code though - which could be a clue to the javascript issue.


You won't see the newline (or any JavaScript generated content) in the source code, by simply viewing the source of the document, if that is what you are referring to? If, however, you view the "generated source" (with an extension like the web developer toolbar in Firefox, or simply highlight a section of the page and select 'view selected source' from the context menu) then you should see any newlines written with
writeln().

Couldn't reproduce the issue with block elements such as <p>.


Your absolutely right. My "display:block" comment is a bit wrong. It is definitely related to the <pre> element. The <pre> element needs to be on the outside. Yes, I'm using the <pre> element to preserve the white-space, necessary for the newlines output with writeln(). This is where my "display:block" came from....

This causes the problem: Just the <pre> element
<pre><script>...</script></pre>


This resolves the problem: An inner inline element
<pre><samp><script>...</script></samp></pre>


This causes the problem again: Make the inline element
display:block (This is actually how I found the problem in the first place.)
<pre><samp style="display:block;"><script>...</script></samp></pre>


(Or, substitute the
<samp style="display:block;"> with a <p> and this also causes the problem again. Although this is invalid HTML and so should perhaps be discounted.)

In terms of separating the <pre> and <script> elements by a space (or newline), and seeing that reflected in the formatting, I believe that is correct.


Yes, I agree. I didn't intend to mean that it was wrong - just that it was undesirable.

What fascinated me is that clicking on the first line expands the element to display all the output, formatted exactly as desired!


Yes - I hadn't noticed that! That is weird! Or even just selecting the problematic area. Including Ctrl+A (to select the whole page).

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved