Select Box, Overflow: auto; and NN7

Forum Moderators: not2easy

Message Too Old, No Replies

Select Box, Overflow: auto; and NN7

How to fix a rendering oddity with NN7 and overflow auto

ShawnR

8:19 am on May 21, 2003 (gmt 0)

Does anyone know how to solve this problem. The drop-down box works fine in other browsers, but not in NN. If I removed the overflow: auto of the div that encloses the form, it works OK.

Here is the stripped down code:

<html>
<head>
<style>
DIV.form { width: 303px; overflow: auto; height: 200px; }
</style>
</head>
<body>
Some text
<div class="form">
<form method="GET" name="my_form" action="whatever.html">
<select name="numresults" size="1">
<option>Show 20 results</option>
<option selected>Show 50 results</option>
<option>Show 100 results</option></select>
</form>
</div>
</body>
</html>

Thanks
Shawn

Longhaired Genius

9:16 am on May 21, 2003 (gmt 0)

Netscape Navigator is not a CSS enabled browser, in any meaningful sense of the term.

Hide your CSS from it using the "@import" hack:

and let basic html take care of the list.

Nick_W

9:25 am on May 21, 2003 (gmt 0)

Assuming that's NN4 we're talking about I'd have to agree with LHG,

Hiding CSS from Older Browsers [webmasterworld.com]
Making CSS Work in NN4 [webmasterworld.com]
This Could Really Help - Dig Down... [webmasterworld.com]

Nick

ShawnR

11:15 am on May 21, 2003 (gmt 0)

Thanks for the hints, guys. I think I wasn't clear enough... I'm talking about NN 7 here, as in Moz, not NN 4.x

SuzyUK

11:19 am on May 21, 2003 (gmt 0)

Hi I can confirm that it's happening in NN7 too..

However LHG - I happen to disagree (;)) with you in that I think that NN7 has THE BEST (at least the most correct) CSS support of all browsers..

-----------------------------
I came across this problem with something else recently - adding a z-index to the div and the form (higher one for the form) fixes this.. also position: relative needs to be added to the div and form before they'll accept the z-index value..

It's almost as if overflow: auto; adds a "film" over the div so you cannot access what's in it so specifying z-index places the form on top of "film"?

Non-technical explanation here ;), but perhaps some of the spec. wizards can help with the correct terminology..

I'd be interested to know if it is IE being too lenient again or if it is a NN "bug" this time...

CSS:
div.form {
width: 303px;
overflow: auto;
height: 200px;
border: 1px solid #000;
background: #ff0;
z-index: 0;
position: relative;
}

div.form form {z-index: 50;position: relative;}

Suzy

ShawnR

2:45 pm on May 21, 2003 (gmt 0)

Thanks Suzy. It works great!

There was one slight snag: It made the form element disappear in NN4.x, but I fixed that with a hack to exclude from NN4.x:

/*/*/div.form form {z-index: 50;position: relative;}/* */

Thanks
Shawn