Page is a not externally linkable
penders - 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.