SELECT overlapping on the drop down Menu in IE
varsha
Status: New User - Welcome
Joined: 04 Jul 2005
Posts: 3
Reply Quote
hi,
SELECT overlapping on the drop down Menu in IE
can anyone help me in overcoming this problem , i have a JSP page which has SELECT option & menu are in a different JS page.
Back to top
erikZ
Status: Contributor
Joined: 30 May 2004
Posts: 148
Reply Quote
I'm sorry, but I have no idea at all what you're asking here.
Back to top
varsha
Status: New User - Welcome
Joined: 04 Jul 2005
Posts: 3
Reply Quote
i have created a web page when i view my page through internet explorer... in which i have few drop down menus & few form elements like [select & combo box] i see my form elements are overlapping on my menus, coz of this menus are not properly visible.
Back to top
erikZ
Status: Contributor
Joined: 30 May 2004
Posts: 148
Reply Quote
It's impossible to say, there's not enough information to give you any meaningful reply.

When you say drop menus are you referring to javascript style drop menus?

Does your HTML validate? Does your CSS validate? Are you using a generic javascript drop menu creation script? Are you using the correct doctype, or are you using a doctype at all?

Are you using both tables and divs for page layout and drop menu construction?

Would you say you know what you're doing, or are you just throwing stuff together and praying that it works without really having any idea why?

If your HTML and CSS don't validate, correct all the errors, you can't properly diagnose rendering errors without having valid code.

Currently your question is not unlike someone going to a mechanic and telling him: my car doesn't run right, what's wrong with it? Without the mechanic having seen or heard the car.
Back to top
varsha
Status: New User - Welcome
Joined: 04 Jul 2005
Posts: 3
Reply Quote
using a generic javascript drop menu creation script , & have CSS files

not using any type of doctype.

iam calling JS page[menu creation] & CSS[style] from a JSP page in which have defined corresponding DIVS & Tables

Dont worry code is working fine..only problem iam facing is overlapping of combo box on menus. coz i know zIndex doesnt support Internet Expolrer..so i just wanted to know is their any other solution to overcome the overlapping.
Back to top
erikZ
Status: Contributor
Joined: 30 May 2004
Posts: 148
Reply Quote
I'm assuming, although it's just a guess, that you have a drop menu that is not overriding a form element under it. And that the form element stays ontop. MSIE supports z-index, look at this webpage in IE, it works fine.

The JSP is irrelevant of course, that has nothing to do with this issue, that's just producing some HTML.

This type of behavior is common, for example if you try creating a drop menu that goes over a flash object in Opera or Firefox, it won't support that, it just vanishes where the flash object is. Whenever I see this type of error I know the developer didn't do proper site testing cross browser. Sounds like the same thing is happening here. A quick test shows that it looks like this is an MSIE bug:

:: Quote ::
coz i know zIndex doesnt support Internet Expolrer

:: Code ::
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
form div, form, select, option {z-index:0;position:relative;}
#one,#two,#three {position:absolute;width:100px;height:100px;}
#one { z-index:3;background-color:yellow;left:0;top:0;}
#two { z-index:4;background-color:blue;left:50px;top:50px;}
#three {  z-index:5;background-color:green;left:100px;top:100px;}
</style>

</head>
   
<body>
<form>
<div>
<select name="states">
   <option value=0>State</option>
   <option value="2">AL</option>
   <option value="1">AK</option>
   <option value="4">AZ</option>
   <option value="3">AR</option>
</select>
</div>
</form>
<div id="three"></div>
<div id="two"></div>
<div id="one"></div>
</body>

</html>

As you can see if you run this code in MSIE, z-index works fine, but the form displays anyway.

After having valid css and html, I can then pinpoint the source of the problem, in this case an MSIE form - select option / CSS bug, the form option doesn't correctly use z-index, it always displays on top. With non valid code, no doctype etc, it's never possible to say for sure what the issue is.

Further tests show this bug only occurs with <select>, not for example <input type="text">. The above code works fine in real browsers by the way, like Firefox, Opera etc.

I looked to see if I could find a workaround, but it doesn't look like it can be done. At this point, we have what's known as a 'showstopper bug', that requires a redoing of the page layout to move the form elements away from the drop menu areas.

I see this type of mistake with drop menus all the time with flash objects, but I haven't seen it with option lists, learn something new every day when it comes to CSS bugs, Firefox and Opera will have this behavior with drop menus and flash, basically because the object is not actually a part of the web page, it's a standalone widget that just looks like it's part of the page. There is no solution to this except to redo the page design to move the object that is creating the problem away from the drop menus. MSIE appears to have this same issue with form option lists, it's treating that as a separate widget, not under the css/html control, and you'll have to implement the same solution, move the option list.
Back to top
jeffd
Status: Assistant
Joined: 04 Oct 2003
Posts: 594
Reply Quote
There are some really convoluted ways to work around this, probably the easiest is to have the display of the select turned off on mouseover, but that's would look odd. Others have figured out a way to replace the select menu item with active x controls, but that's getting completely ridiculous.

You can also exploit some weirdnesses with how MSIE 5x handles iframes in terms of windowing, but again, this is a really silly thing to waste time on.

I'd second the advice, just move the select item, or don't use drop down menus (that's an even better idea).

You can read more on the select bug at MS. The odd thing is, they actually don't see this as weird. Here's a link to some more links on this topic. But if you read this, you have to ask yourself if it's really worth trying to find an MSIE only work around.
Back to top
Overlapping the jsp field
sen
Status: New User - Welcome
Joined: 07 Aug 2008
Posts: 1
Location: Bangalore
Reply Quote
Hi erikZ!


Thankx.........It is working fine.
Back to top
Display posts from previous:   

All times are GMT - 8 Hours