Jump to content
  • Advertisement
Sign in to follow this  
BeanDog

[web] Suckerfish below select in IE?

This topic is 4666 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I've googled all over about this, and it seems everyone has the same problem with Suckerfish-style menus. They always wind up showing behind combobox and related controls in Internet Explorer. I haven't found any good solutions anywhere. Someone vaguely mentioned somewhere putting a frame or something on the page that's behind the menu but in front of the combobox, then moving it dynamically to stay behind the menu. I haven't been able to find *any* code to help me figure out how to implement this. Is there a better way? Or does someone out there have some sample code for how to do what I described above? ~BenDilts( void );

Share this post


Link to post
Share on other sites
Advertisement
As a Microsoft employee wrote in his blog, "We’ve also rebuilt the <select> element as a windowless control, so it can be visually layered under other elements." You'll have to wait until IE 7 before it works.

A simple workaround is hiding all <select>'s every time the menu is opened. Personally, that's the route I would take if someone is using a web browser that is so poorly written as not to honor simple Z-ordered layers.

Share this post


Link to post
Share on other sites
Unfortunately, that browser you ridicule also makes up about 90% of my target audience... So I need to come up with something that works well.



~BenDilts( void );

Share this post


Link to post
Share on other sites
He gave you just that. Hide the selects everytime the menu opens through javascript. It's the only way to stop IE making an ass of itself. A simple piece of javascript that sets all selects to "display: none" attached to the mouseover of the suckerfish dropdown should do the trick.

Share this post


Link to post
Share on other sites
I'm simply stating it as it is. There is no way to do what you want without [a] implementing some sort of crude hack or using a web browser that doesn't have that bug. As you stated, you cannot dictate what your audience uses. That means, you'll have to do option [a].

Your sub options of [a] is to 1) do something simple that works or 2) do something drastic to your site to work around the bug. I would argue strongly that you are better off writing to the standards and implementing a simple hack for the users of outdated browsers. That way, once those users upgrade they will get full functionality and you won't have this unmanageable mess to work with. Also, people who are currently using modern browsers will not hurt from any weird hacks in place to fix something that you didn't break.

Just use code like this:

function onMenuShow()
{
// detect IE <= 6 and only do this if it is being used
var s = document.getElementsByTagName("SELECT");
for (var i=0; i<s.length; i++)
s.style.visibility = "hidden";
}

function onMenuHide()
{
// detect IE <= 6 and only do this if it is being used
var s = document.getElementsByTagName("SELECT");
for (var i=0; i<s.length; i++)
s.style.visibility = "visible";
}



It's as simple as that. I would use the "visibility" attribute because if you change the "display" to "none" the layout of your site will change as the SELECTs collapse.

Share this post


Link to post
Share on other sites
I appreciate your replies. The issue, of course, is that partially-obscured select boxes will look pretty funny disappearing completely for no apparent (to the user) reason.

Oh, well, it looks like that's about as good as it's going to get, though, if I want to use Suckerfish.

Thanks!



~BenDilts( void );

Share this post


Link to post
Share on other sites
That's unfortunately the case yes. There is however a thrird way of solving this (which I have used on a couple of websites): redesign your forms so that there will be no select boxes under the collapsable menu's. It greatly depends on your website design and what you want to accomplish if this is feasible or not. You could reposition your select elements, rposition the entire form or maybe replace some selects with radio button fields (if it's only a few items long).

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!