[Cross Browser Q] Alternative to overflow on non-IE

[jamestmfbong]

Is there an alternative for providing scrolls for non-IE for layer's/div's?
Here's an example source code that doesn't run on Firefox/Opera

<DIV ID='MENU_CATE2' class="hiddenLayerLeft">
<DIV STYLE="overflow-x:auto; overflow-y:auto; width:180; height:400; padding:0px;">
<TABLE width=100% height=100% cellspacing=0 cellpadding=1>
<TR>
<TD valign=top>
<B>E-mail</B><BR>
<INPUT type="text" style="WIDTH: 100%" name="search_member_email" value=""><BR>
<IMG src="images/spacer.gif" width=1 height=5 border=0><BR>

<B>First Name</B><BR>
<INPUT type="text" style="WIDTH: 100%" name="search_member_firstname" value=""><BR>
<IMG src="images/spacer.gif" width=1 height=5 border=0><BR>

<B>Last Name</B><BR>
<INPUT type="text" style="WIDTH: 100%" name="search_member_lastname" value=""><BR>
<IMG src="images/spacer.gif" width=1 height=5 border=0><BR>

<B>Date of birth</B><BR>
<INPUT type="text" size=2 maxlength=2 name="customerDateOfBirthDay" value="" title="Day"> . <INPUT type="text" size=2 maxlength=2 name="customerDateOfBirthMonth" value="" title="Month"> . <INPUT type="text" size=4 maxlength=4 name="customerDateOfBirthYear" value="" title="Year"><BR>
<IMG src="images/spacer.gif" width=1 height=5 border=0><BR>

<B>Gender</B><BR>
<INPUT type="radio" name="customerGender"CHECKED value=""> Any<BR>
<INPUT type="radio" name="customerGender" value="M"> Male<BR>
<INPUT type="radio" name="customerGender" value="F"> Female<BR>
<IMG src="images/spacer.gif" width=1 height=5 border=0><BR>

<B>Subscribed</B><BR>
<INPUT type="radio" name="customerNewsletterSubscribed"CHECKED value=""><LABEL for=orderStatus_0> Any<BR>
<INPUT type="radio" name="customerNewsletterSubscribed" value="1"><LABEL for=orderStatus_0> Yes<BR>
<INPUT type="radio" name="customerNewsletterSubscribed" value="0"><LABEL for=orderStatus_0> No<BR>

<B>Total Purchased Times</B><BR>
<INPUT type="text" style="WIDTH: 100%" name="customerEmail" value=""><BR>
<IMG src="images/spacer.gif" width=1 height=5 border=0><BR>

<B>Total Purchased Amount</B><BR>
<INPUT type="text" style="WIDTH: 100%" name="customerEmail" value=""><BR>
<IMG src="images/spacer.gif" width=1 height=5 border=0><BR>

<B>Milage Points</B><BR>
<INPUT type="text" style="WIDTH: 100%" name="customerEmail" value=""><BR>
<IMG src="images/spacer.gif" width=1 height=5 border=0><BR>

<B>Total Posts</B><BR>
<INPUT type="text" style="WIDTH: 100%" name="customerEmail" value=""><BR>
<IMG src="images/spacer.gif" width=1 height=5 border=0><BR>

<B>Total Logons</B><BR>
<INPUT type="text" style="WIDTH: 100%" name="customerEmail" value=""><BR>
<IMG src="images/spacer.gif" width=1 height=5 border=0><BR>

<B>Customer Address</B><BR>
<INPUT type="text" name="search_member_address" value="" maxlength=64 style="WIDTH: 100%"><BR>
<IMG src="images/spacer.gif" width=1 height=5 border=0><BR>

<B>Customer City</B><BR>
<INPUT type="text" name="search_member_city" value="" maxlength=64 style="WIDTH: 100%"><BR>
<IMG src="images/spacer.gif" width=1 height=5 border=0><BR>

<B>Customer State</B><BR>
<INPUT type="text" name="search_member_state" value="" maxlength=64 style="WIDTH: 100%"><BR>
<IMG src="images/spacer.gif" width=1 height=5 border=0><BR>

<B>Customer Zip</B><BR>
<INPUT type="text" name="search_member_zip" value="" maxlength=64 style="WIDTH: 100%"><BR>
<IMG src="images/spacer.gif" width=1 height=5 border=0><BR>

<B>Customer Country</B><BR>
<INPUT type="text" name="search_member_country" value="" maxlength=64 style="WIDTH: 100%"><BR>
<IMG src="images/spacer.gif" width=1 height=5 border=0><BR>

<BR>
<!-- Submit Button -->
<INPUT type="button" value="Set Filter" style="height: 23px"><BR>
</TD>
</TR>
</TABLE>
</DIV>
</DIV>

So basically there are 2 Div's.
the 1st outer Div's role is to liimit the window size ( Which works perfectly fine on IE ) and the second Div's role is to fabricate a scroll bar for conveniency. However on Firefox/Opera, the inner div layer just kinda pushes out the outer Div layer. Which results in no scroll bars.

Thanks.

[Mr J]

Do away with the "inner div" and try

style="width:200;height:400;overflow:auto"

in the outer "div"

[felgall]

style="width:200px;height:400px;overflow:auto"

Most browsers ignore the width and height if you don't specify what measurement that the sizes are using. Only IE assumes you mean pixels if you leave it out.

[jamestmfbong]

SUPERB GUYS!!
thanks a whole bunch :D

[Mr J]

Oops, my bad, sorry about that, I don't usually miss out the px's :o

[jamestmfbong]

wait, what if I need to give my div's as a %?

For example, I want my script to apply to all screen resolutions. ( my screen is 1600x1200 )
So I put my div into 100%, works fine on IE & Opera. The 100% gets adjusted to 100% of the TD that the DIV is inside of.

But on firefox...
.hiddenLayerMain { position: absolute; visibility: hidden; background-color:white; width:100%; height:445px; overflow:auto; }
the 100% here seems to be 100% of the screen resolution. Thus the width is 1600px. Is there anything like the * in frame sets?

I also tried this source code.
.hiddenLayerMain { position: absolute; visibility: hidden; background-color:white; width:document.getElementById("theTable").width; height:445px; overflow:auto; }
and of course theTable was appointed to the right <td> cell
yet still no luck!

What do I do in case of %'s?