A
Akbar
Hey there,
Big-time curiosity issue here...
Here's the test code (it's not that long)... it's to display a large
number of image links with captions, ideally pulled in from an
external file (that part's not here -- spotlighting the problem code):
--------BEGIN CODE PAGE------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function testSpans(sbody) {
var sp, i, j, oneRecord;
sbody = document.getElementById(sbody);
for (i = 0; i <= 1; i++) {
var bkSpan, bkAa, bkAb, bkAex, bkImg, bkTitle,
bkTypea, bkTypeb, txt, br;
txt = "Text Text";
testImg = document.createElement("img");
testImg.setAttribute("src",
"images/test.gif");
testA = document.createElement("a");
testA.setAttribute("href",
"test/url/index.htm");
testA.appendChild(testImg);
br = document.createElement("br");
testA.appendChild(br);
testText = document.createTextNode(txt);
testA.appendChild(testText);
testSpan = document.createElement("span");
testSpan.setAttribute("id", i);
testSpan.style.display = "inline";
testSpan.style.width = "100px";
testSpan.appendChild(testA);
sbody.appendChild(testSpan);
}
}
function init() {
testSpans('scoobyDoo');
}
</script>
</head>
<body onload="init()">
<h1>Test</h1>
<hr />
<table><tr><td id="scoobyDoo"></td></tr></table>
</body>
</html>
--------END CODE PAGE------------
When it displays, the <span>'s don't line up on the same line like
they should:
IMAGE IMAGE
text text
Instead, it's as if the first span never ends... the image from the
second span displays right after the text in the first, like this:
IMAGE
text IMAGE
text
Using MSIE's "View Partial Source" powertoy, I can see that the
generated HTML is as follows:
--------BEGIN GENERATED HTML------------
<H1>Test</H1>
<HR>
<TABLE>
<TBODY>
<TR>
<TD id=scoobyDoo><SPAN id=0 style="DISPLAY: inline; WIDTH: 100px"><A
href="test/url/index.htm"><IMG height=30 src="images/test.gif"
width=28><BR>Text
Text</A></SPAN><SPAN id=1 style="DISPLAY: inline; WIDTH: 100px"><A
href="test/url/index.htm"><IMG height=30 src="images/test.gif"
width=28><BR>Text
Text</A></SPAN></TD></TR></TBODY></TABLE>
--------END GENERATED HTML------------
The problem is that *this is right!* Putting this code in a page
displays perfectly, but it doesn't when generated by the JavaScript
shown above.
Anyone have any ideas? A CSS tag that will help? Another way to
dynamically create this data? Anything will be appreciated...
- Akbar
Big-time curiosity issue here...
Here's the test code (it's not that long)... it's to display a large
number of image links with captions, ideally pulled in from an
external file (that part's not here -- spotlighting the problem code):
--------BEGIN CODE PAGE------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function testSpans(sbody) {
var sp, i, j, oneRecord;
sbody = document.getElementById(sbody);
for (i = 0; i <= 1; i++) {
var bkSpan, bkAa, bkAb, bkAex, bkImg, bkTitle,
bkTypea, bkTypeb, txt, br;
txt = "Text Text";
testImg = document.createElement("img");
testImg.setAttribute("src",
"images/test.gif");
testA = document.createElement("a");
testA.setAttribute("href",
"test/url/index.htm");
testA.appendChild(testImg);
br = document.createElement("br");
testA.appendChild(br);
testText = document.createTextNode(txt);
testA.appendChild(testText);
testSpan = document.createElement("span");
testSpan.setAttribute("id", i);
testSpan.style.display = "inline";
testSpan.style.width = "100px";
testSpan.appendChild(testA);
sbody.appendChild(testSpan);
}
}
function init() {
testSpans('scoobyDoo');
}
</script>
</head>
<body onload="init()">
<h1>Test</h1>
<hr />
<table><tr><td id="scoobyDoo"></td></tr></table>
</body>
</html>
--------END CODE PAGE------------
When it displays, the <span>'s don't line up on the same line like
they should:
IMAGE IMAGE
text text
Instead, it's as if the first span never ends... the image from the
second span displays right after the text in the first, like this:
IMAGE
text IMAGE
text
Using MSIE's "View Partial Source" powertoy, I can see that the
generated HTML is as follows:
--------BEGIN GENERATED HTML------------
<H1>Test</H1>
<HR>
<TABLE>
<TBODY>
<TR>
<TD id=scoobyDoo><SPAN id=0 style="DISPLAY: inline; WIDTH: 100px"><A
href="test/url/index.htm"><IMG height=30 src="images/test.gif"
width=28><BR>Text
Text</A></SPAN><SPAN id=1 style="DISPLAY: inline; WIDTH: 100px"><A
href="test/url/index.htm"><IMG height=30 src="images/test.gif"
width=28><BR>Text
Text</A></SPAN></TD></TR></TBODY></TABLE>
--------END GENERATED HTML------------
The problem is that *this is right!* Putting this code in a page
displays perfectly, but it doesn't when generated by the JavaScript
shown above.
Anyone have any ideas? A CSS tag that will help? Another way to
dynamically create this data? Anything will be appreciated...
- Akbar
(In Opera7, it doesn;t