Hello,

I'm displaying content inside a div. Its style is set to overflow:hidden and Javascript controls scrolling and also sizes the width of the div to fit the pagewidth (minus a certain amount) at onLoad and onResize. However, it does not not hide/resize in FireFox 3 or Safari (both mac and pc); it stays at 100% of content width. It works correctly (at least well enough for what I need) in FF2 and IE6+. Here is a link to an example I created: http://www.pokerxfactor.com/divscrolltest.htm

The Javascript I used is:
Code:
window.onDomReady = DomReady;

function DomReady(fn) {
	//W3C
	if(document.addEventListener) {
		document.addEventListener("DOMContentLoaded", fn, false);
	}
	//IE
	else {
		document.onreadystatechange = function(){readyState(fn)}
	}
}

//IE execute function
function readyState(fn) {
	//dom is ready for interaction
	if(document.readyState == "interactive" || document.readyState == "complete") {
		fn();
	}
}

// resize scroll divs
var ie = (document.all) ? 1 : 0;

function resizeScroller() {
	if (ie) {
		document.all.scrollingDiv.style.width = document.body.clientWidth-500;
	} else {
		document.getElementById('scrollingDiv').style.width = window.innerWidth-500;
	}
}

function doLoad() {
	resizeScroller();
	window.onresize = resizeScroller;
}

window.onDomReady(doLoad);


// auto scroll code
scrollStep=2;

timerLeft="";
timerRight="";

function toLeft(id){
  document.getElementById(id).scrollLeft=0;
}

function scrollDivLeft(id){
  clearTimeout(timerRight) ;
  document.getElementById(id).scrollLeft+=scrollStep;
  timerRight=setTimeout("scrollDivLeft('"+id+"')",10);
}

function scrollDivRight(id){
  clearTimeout(timerLeft);
  document.getElementById(id).scrollLeft-=scrollStep;
  timerLeft=setTimeout("scrollDivRight('"+id+"')",10);
}

function toRight(id){
  document.getElementById(id).scrollLeft=document.getElementById(id).scrollWidth;
}

function stopMe(){
  clearTimeout(timerRight) ;
  clearTimeout(timerLeft);
}



</script>

and the HTML is here:
Code:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
	<td style="padding-right:10px"><img src="/Images/leftscroll.png" alt="left scroll" onmouseover="scrollDivRight('scrollingDiv')" onmouseout="stopMe()" /></td>
    <td>
    <div id="scrollingDiv" style="overflow:hidden">
    <!--content here-->
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
  <td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
  <td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
  <td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
  <td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
  <td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
  <td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
  <td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
  <td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
  <td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
  </tr>
</table>
<!-- end content-->
</div>
</td>
    <td style="padding-left:10px"><img src="/Images/rightscroll.png" alt="right scroll" onmouseover="scrollDivLeft('scrollingDiv')" onmouseout="stopMe()" /></td>
</tr>
</table>
What tweaks might have to be made for FF3/ Safari? I actually thought it would work fine in these browsers, since they talk of being so standards compliant. The JS checks out fine in my debugger.

Any help would be appreciated. Thanks!

Chris