cross browser probs with a bit of javascript

[elviscat]

Hi All,

I'm new here, so go gentle :)

I have some javascript controlling a DIV box with a border that is inside a table TD, the javascript gets the TD Height as this is expanding all the way to the bottom, and in turn sets the DIV height. however not in Firefox.

I'm not 100% sure but by looking at the javascript below are there problems with this that are causing the reason it is not working in firefox, and can anyone help me with how to correct this please?

Or if someone has any suggestions of how to do this differently maybe!

You can see the box i'm on about here
http://77.99.9.177/cartridge/ on the left underneath shopping cart with browse by category at the top.

thanks in advance


<script type="text/javascript" charset="utf-8">

function getTDHeight(){
contentTop = getPixelsFromTop(document.getElementById("menuN2"))
contentBottom = getPixelsFromTop(document.getElementById("content_bottom"))

heightOfCell = contentBottom - contentTop;
Newheight = heightOfCell -120

document.getElementsByName("surround")[0].style.height = Newheight;
}

function getPixelsFromTop(obj){
objFromTop = obj.offsetTop;
while(obj.offsetParent!=null) {
objParent = obj.offsetParent;
objFromTop += objParent.offsetTop;
obj = objParent;
}
return objFromTop;
}
</script>

[jscheuer1]

Though considered valid according to standards, the charset attribute is never, in my experience used, so could be a problem. Your function should be:


function getTDHeight(){
var contentTop = getPixelsFromTop(document.getElementById("menuN2")),
contentBottom = getPixelsFromTop(document.getElementById("content_bottom")),

heightOfCell = contentBottom - contentTop,
Newheight = heightOfCell -120;

document.getElementsByName("surround")[0].style.height = Newheight + 'px';
}

The most important change being the addition of + 'px' to the style property's value setting. This is because units are required in style dimensions, though IE will sometimes ignore this rule.

There could be other problems.

Added Later:

There ia another problem. There is no:

document.getElementsByName("surround")[0]

on the page. Use:

document.getElementById("surround")

That exists (from your source code):



<!-- START CATEGORY BOX -->

<div id="surround">
<img src='images/menu/browse.gif' alt='Browse by category' width='117' height='27'/>
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"><img src="images/menu/cross.gif" alt="cross" width="6" height="6" /></td>
<td class="title">BROTHER</td>
</tr>
</table>


<table width="150" border="0" cells . . .

There still could be other issues.

[elviscat]

perfect my friend...thank you very much, i really appreciate your effort. those were the bugs :) working fine now