Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 561
  • Last Modified:

IE suckerfish problem

On this page you can see that IE ignores the z-index of the suckerfish dropdown and I can see the text over the dropdown

http://blue-fly.co.uk/trisco/test.php

the css

http://www.blue-fly.co.uk/trisco/css/


It is fine on safari and firefox.



Any ideas?
0
roscoeh23
Asked:
roscoeh23
  • 2
1 Solution
 
OneiroidCommented:
Please post some code.

If you are using the same model as in the suckerfish examples, try adding:

#nav * {
      z-index: 999;
}

This works for all browsers I've tried it on. It won't work if your offending overlapping divs if they have a z-index greater than 999 though ;)  Check that out too.
0
 
roscoeh23Author Commented:
This doesn't work. I have also created an absolute version where everything inside the main (relative) container is absolutely positionined and contains z-indexes but ie 6 still ignores this.


http://www.blue-fly.co.uk/trisco/abs.php


http://www.blue-fly.co.uk/trisco/css/abs.css
0
 
dsackerContract ERP Admin/ConsultantCommented:
You don't need to post code. This is a well-known error. IE sets an unbeatable z-index on the <SELECT> drop down object.

Some (certainly not all) of the ways you can defeat that are to (1) put it out of the way of your drop down menu, or (2) embed your <SELECT> drop down in an IFRAME (yeah, I know ... yuk).

FireFox and Safari behave properly on this one.
0
 
OneiroidCommented:
dascker: roscoeh23 does not seem to be having any problems with a select element.

roscoeh23: the first thing that I notice, is that it your list has an id of 'nav', but you have no nav style in your CSS. Rather, you are designating the styles under #header instead? This is why my previous suggestion wouldn't have worked for you. Try this instead:

#header * {
     z-index: 999;
}

Although, li ul is not designated with #header. Make sure to fix this (also for consistency). It seems that you have IDs on some of your li tags for some reason.

Additionally, you are having this same overlap issue between menu items. You will have to address the z-index values here, too, or have them open below the node. Now, I am look at this on IE7. When I look at it on IE6, the menus do open below the node but I cannot navigate to them. You are going to have to apply the IE fix to your menu as well.

I think to make your menu completely browser cross-compatible, you should revisit the original suckerfish article. I am running a few of these menus now and have never had x-comp problems like this. Also, take a look at the consistency of your CSS.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now