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.dt d">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function testSpans(sbody ) {
var sp, i, j, oneRecord;
sbody = document.getEle mentById(sbody) ;
for (i = 0; i <= 1; i++) {
var bkSpan, bkAa, bkAb, bkAex, bkImg, bkTitle,
bkTypea, bkTypeb, txt, br;
txt = "Text Text";
testImg = document.create Element("img");
testImg.setAttr ibute("src",
"images/test.gif");
testA = document.create Element("a");
testA.setAttrib ute("href",
"test/url/index.htm");
testA.appendChi ld(testImg);
br = document.create Element("br");
testA.appendChi ld(br);
testText = document.create TextNode(txt);
testA.appendChi ld(testText);
testSpan = document.create Element("span") ;
testSpan.setAtt ribute("id", i);
testSpan.style. display = "inline";
testSpan.style. width = "100px";
testSpan.append Child(testA);
sbody.appendChi ld(testSpan);
}
}
function init() {
testSpans('scoo byDoo');
}
</script>
</head>
<body onload="init()" >
<h1>Test</h1>
<hr />
<table><tr><t d 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><S PAN id=0 style="DISPLAY: inline; WIDTH: 100px"><A
href="test/url/index.htm"><IMG height=30 src="images/test.gif"
width=28><BR>Te xt
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>Te xt
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.dt d">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function testSpans(sbody ) {
var sp, i, j, oneRecord;
sbody = document.getEle mentById(sbody) ;
for (i = 0; i <= 1; i++) {
var bkSpan, bkAa, bkAb, bkAex, bkImg, bkTitle,
bkTypea, bkTypeb, txt, br;
txt = "Text Text";
testImg = document.create Element("img");
testImg.setAttr ibute("src",
"images/test.gif");
testA = document.create Element("a");
testA.setAttrib ute("href",
"test/url/index.htm");
testA.appendChi ld(testImg);
br = document.create Element("br");
testA.appendChi ld(br);
testText = document.create TextNode(txt);
testA.appendChi ld(testText);
testSpan = document.create Element("span") ;
testSpan.setAtt ribute("id", i);
testSpan.style. display = "inline";
testSpan.style. width = "100px";
testSpan.append Child(testA);
sbody.appendChi ld(testSpan);
}
}
function init() {
testSpans('scoo byDoo');
}
</script>
</head>
<body onload="init()" >
<h1>Test</h1>
<hr />
<table><tr><t d 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><S PAN id=0 style="DISPLAY: inline; WIDTH: 100px"><A
href="test/url/index.htm"><IMG height=30 src="images/test.gif"
width=28><BR>Te xt
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>Te xt
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
Comment