firstNode problems

[yawnmoth]

I'm having some problems making the following work in both Internet
Explorer and Firefox:

http://www.frostjedi.com/terra/scrip...hildNodes.html

What it should do (and indeed, what it does do, in Internet Explorer)
is show a gray box. In Firefox, however, it shows a black box.

To explain the commented out code... I've observed that using the
childNode at index 1 does the samething that in Firefox that both
firstChild and the childNode at index 0 do in Internet Explorer. As
such, the above webpage can be easily made to work in Firefox, but once
done, it won't work in Internet Explorer, and vice versa. I'd like to
make it work in both browsers. Without giving the img element it's own
id.

Any ideas as to how I can do this would be appreciated. Thanks!

[web.dev]

yawnmoth wrote:

I'm having some problems making the following work in both Internet
Explorer and Firefox:

http://www.frostjedi.com/terra/scrip...hildNodes.html

What it should do (and indeed, what it does do, in Internet Explorer)
is show a gray box. In Firefox, however, it shows a black box.

To explain the commented out code... I've observed that using the
childNode at index 1 does the samething that in Firefox that both
firstChild and the childNode at index 0 do in Internet Explorer. As
such, the above webpage can be easily made to work in Firefox, but once
done, it won't work in Internet Explorer, and vice versa. I'd like to
make it work in both browsers. Without giving the img element it's own
id.

Any ideas as to how I can do this would be appreciated. Thanks!

Remove all whitespaces / tabs from your div. For example:

<div id = "main"><img src = "blank.gif"></div>

Then you can use index 0 for both. In Firefox, text nodes count as a
child node whereas in IE it doesn't.

[Martin Kurz]

yawnmoth schrieb:

I'm having some problems making the following work in both Internet
Explorer and Firefox:

http://www.frostjedi.com/terra/scrip...hildNodes.html

What it should do (and indeed, what it does do, in Internet Explorer)
is show a gray box. In Firefox, however, it shows a black box.

To explain the commented out code... I've observed that using the
childNode at index 1 does the samething that in Firefox that both
firstChild and the childNode at index 0 do in Internet Explorer. As
such, the above webpage can be easily made to work in Firefox, but once
done, it won't work in Internet Explorer, and vice versa. I'd like to
make it work in both browsers. Without giving the img element it's own
id.

Any ideas as to how I can do this would be appreciated. Thanks!

The problem here are the spaces between <div id="main"> and the img-Tag. Mozilla
handles these spaces as firstChild, so the img-tag ist childNodes[1]. But IE
seems to ignore these spaces, so the img-Tag is firstChild (childNodes[0]). The
easiest way would be eliminating these spaces, so both are having the img-Tag as
firstChild. If that's not possible, you could step through the childs with
nextSibling till you find the one you're looking for.

Greetings,

martin

[yawnmoth]

web.dev wrote:

yawnmoth wrote:
<snip>

Remove all whitespaces / tabs from your div. For example:

<div id = "main"><img src = "blank.gif"></div>

Then you can use index 0 for both. In Firefox, text nodes count as a
child node whereas in IE it doesn't.

Didn't know that. Thanks, web.dev and Martin Kurz! :)

[ASM]

yawnmoth a écrit :

I'm having some problems making the following work in both Internet
Explorer and Firefox:

http://www.frostjedi.com/terra/scrip...hildNodes.html
error :
document.getElementById('main').firstChild.style
has no property (IE and FF)

firstChild is not a tag, shown by :
alert(document.getElementById('main').firstChild.t agName)
and can't be styled
What it should do (and indeed, what it does do, in Internet Explorer)
is show a gray box. In Firefox, however, it shows a black box.

Are you realy absolutly sure ?
because :

alert('cN[1] = '+document.getElementById('main').childNodes[1].tagName);
document.getElementById('main').childNodes[1].style.background = '#aaa';

give same results in my FF and IE ... ! ?
if you write your html code this way :
<div id="main"><img
src="blank.gif" width="30" height="30" style="background: #000" />
</div>
(no space or return between <div> and <img )

this time
childNodes[0]
or
firstChild
are correct

--
Stephane Moriaux et son [moins] vieux Mac

[ASM]

web.dev a écrit :

Remove all whitespaces / tabs from your div. For example:

<div id = "main"><img src = "blank.gif"></div>

Then you can use index 0 for both. In Firefox, text nodes count as a
child node whereas in IE it doesn't.

depends ...
with example given my IE (Mac) works as my FF

--
Stephane Moriaux et son [moins] vieux Mac

[RobG]

yawnmoth wrote:

web.dev wrote:

yawnmoth wrote:
<snip>

Remove all whitespaces / tabs from your div. For example:

<div id = "main"><img src = "blank.gif"></div>

Then you can use index 0 for both. In Firefox, text nodes count as a
child node whereas in IE it doesn't.

Didn't know that. Thanks, web.dev and Martin Kurz! :)

Depending on the removal of whitespace is not very robust - a single
space will break your code in some browsers. Consider either wandering
along the child nodes until you find the one you are after:

var imgImAfter = document.getElementById('main').firstChild;
while ( 'img' != imgImAfter.nodeName.toLowerCase()
&& imgImAfter.nextSibling ){
imgImAfter = imgImAfter.nextSibling;
}

or using getElementsByTagName('img') inside the div and grab the first
element:

var theDiv = document.getElementById('main');
var imgImAfter = theDiv.getElementsByTagName('img')[0];

Of course both examles need a bit of error checking added.

--
Rob

[Lasse Reichstein Nielsen]

"web.dev" <we********@gmail.com> writes:

In Firefox, text nodes count as a child node whereas in IE it
doesn't.

Text nodes counts as children in IE as well, except *some* cases where
the text node would contain only whitespace.

In the following:

<div> <em> <b>x</b><u> </u></div>

there is no text node between <div> and <em>, nor between <em> an <b>.
There is one between <u> and </u>, it's just not visible.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'