22 replies [Last post]
mrruben5
mrruben5's picture
Offline
Regular
Last seen: 6 years 13 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

Hi guys, i'm new here.

I've got a problem with my css dropdownmenu in IE, z-index doesn't seem to work, and the rollovers jump a bit around.

link to my page: http://www.encyclue.nl/etomite/index.html

Can anyone help me fix this for IE? Maybe using conditional statements?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

z-index doesn't work in my dropdownmenu in IE

Two things you might want to try.

(1) Get IE into its hasLayout mode for the elements concerned. As a testing kludge you can do

#navigation, #navigation * {zoom:1}

If that fixes things, you should then apply the fix a little more specifically until you determine which elements require it, before finally changing to the holly hack and a valid width or height value to ensure your html/css will pass validators.

(2) IE can be fussy about z-indexes. Ensure you are setting the z-index at the level where the elements are siblings.

<ul>
  <li  z-index:10> <!-- li:hover z-index:15; -->
    <ul z-index:20>
      <li>
      <li>
   </ul>
  </li>
  <li z-index:10> <!-- li:hover z-index:15; -->
  ...
</ul>

thats not html, but you should get the idea.

mrruben5
mrruben5's picture
Offline
Regular
Last seen: 6 years 13 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

z-index doesn't work in my dropdownmenu in IE

Thanks for your reply.
I tried inserting the second solution you provided, yet it didn't help IE fix it.

The menu we use will have 2 to 5 siblings, do I need to specify a z-index for each li:hover?

I use the following z-indexes by the way:

/*z indexes*/
#navigation ul ul { z-index: 50; }
#navigation ul ul ul { z-index: 60; }
#navigation ul ul ul ul { z-index: 70; }

mrruben5
mrruben5's picture
Offline
Regular
Last seen: 6 years 13 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

z-index doesn't work in my dropdownmenu in IE

Still no replies.

How would I integrate that haslayout idea?

mrruben5
mrruben5's picture
Offline
Regular
Last seen: 6 years 13 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

z-index doesn't work in my dropdownmenu in IE

*bump*
sorry for the double post, just haven't had any replies.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

z-index doesn't work in my dropdownmenu in IE

Its just adding that line anywhere in your CSS

#navigation, #navigation * {zoom:1}

In this case it doesn't solve the problem.

However, my other possibility does.

#navigation li {z-index:1;}
#navigation li:hover {z-index: 2;}

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 1 year 18 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

z-index doesn't work in my dropdownmenu in IE

For anyone struggling to understand the way that IE deals with z-index values, this will either help you or confuse you even more :? > http://www.aplus.co.yu/css/z-pos/

Life's a b*tch and then you die!

mrruben5
mrruben5's picture
Offline
Regular
Last seen: 6 years 13 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

z-index doesn't work in my dropdownmenu in IE

Erm, I know how to do the z-index, it's the jumping thing that annoys me.

Nevermind, I killed the menu for IE, and have decided to convert it to a menu apart for IE.

Can anyone hep me converting it?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

z-index doesn't work in my dropdownmenu in IE

:?

Whats the jumping thing?

PS, excellent link Roy.

mrruben5
mrruben5's picture
Offline
Regular
Last seen: 6 years 13 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

z-index doesn't work in my dropdownmenu in IE

When you hovered over a link in IE, the link jumped 1 pixel to the left.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

z-index doesn't work in my dropdownmenu in IE

I didn't see that and it doesn't seem to effect my version of your page ... http://wiki.jalakai.co.uk/tester146 with those style changes.

However, from the look of your link above its all solved now. Smile

mrruben5
mrruben5's picture
Offline
Regular
Last seen: 6 years 13 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

z-index doesn't work in my dropdownmenu in IE

I love you Tongue

edit: It looks like the jumping thing still happens. Would this be because of the background? Or is it the min-max? And why the togglecontent thing?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

z-index doesn't work in my dropdownmenu in IE

Right, I see it now. It could be a manifestation of the guillotine bug. I don't have a link for it, but a quick search on google should give you the details and info on how to fix it.

mrruben5 wrote:
And why the togglecontent thing?

I build pages in a standard template. Thats one of things that comes in useful from time to time - it saves having to make different versions of a page to see how the layout behaves if one column is longer than the other or if a particular container has more or less content.

mrruben5
mrruben5's picture
Offline
Regular
Last seen: 6 years 13 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

z-index doesn't work in my dropdownmenu in IE

Can anyone help me kill that 1px bug please? I don't know how to kill the instance of that quillotine bug.

Because the menu is generated automaticly, do I even need the holly hack?

Would switching to xhtml 1.0 strict help?

Would it help using increased margins on the a:hover with IE conditional commands?

Anything?

dh2
Offline
newbie
Last seen: 9 years 21 weeks ago
Joined: 2005-06-29
Posts: 2
Points: 0

z-index doesn't work in my dropdownmenu in IE

You dont need to create another menu, its a bug in ie that places form controls above everything else,

I hit it on http://www.ossip-zadkine.com/ and to fix it, just place an absolutely positioned iframe ( same size as the menu) behind the menu, it will overlay the form element and allow your menu to be shown

mrruben5
mrruben5's picture
Offline
Regular
Last seen: 6 years 13 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

z-index doesn't work in my dropdownmenu in IE

dh2, the CMS i'm using doesn't allow me to put inline frames in the generated code :S. I think you don't understand me, the list items jump 1 pixle to the left when you hover over them.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

z-index doesn't work in my dropdownmenu in IE

IE is having problems with

#navigation li {margin:1px}

it seems to lose the style when :hover is active. Duplicating that style attribute in the #navigation li:hover rule makes no difference. It may be a problem with the :hover behaviour or an internal IE issue I can't tell which.

My solution would be to move the margin/border/background styles over to #navigation li a & #navigation li a:hover

giving you:

#navigation li {
	position:relative;
	padding: 1px;
}

#navigation li:hover { /* no styles required */	}
	
#navigation ul a {
    /* background:transparent -- replaced, see below */
	display: block;
	color: #fff;
	font:bold 11px/1em tahoma, arial, sans-serif;
	text-decoration: none;
	padding: 4px;

    /* transferred styles */
    border: 1px solid #0037A6;
    background: #ED9400 url(http://www.encyclue.nl/images/navbg.png) no-repeat top left;
}

#navigation ul a:hover {
    background-position: bottom right;
}

Its wasn't a difficult problem to diagnose and solve. Simply, deconstruct the concerned part of the page to isolate what is causing the problem then look for alternative ways to accomplish the same thing.

mrruben5
mrruben5's picture
Offline
Regular
Last seen: 6 years 13 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

z-index doesn't work in my dropdownmenu in IE

But then you don't have that sort of tree where you are hovering. Crying

Well, too bad for IE users, they'll just have to work with a less advanced menu.

Note that a:hover must have a different bgcolor as well.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

z-index doesn't work in my dropdownmenu in IE

mrruben5 wrote:
But then you don't have that sort of tree where you are hovering. Crying

My changes make no difference to that, it sounds like you broke something else :?

mrruben5
mrruben5's picture
Offline
Regular
Last seen: 6 years 13 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

z-index doesn't work in my dropdownmenu in IE

No, I didn't broke something, you did Tongue

Using the li:hover I could create a "tree" menu like shown below. That in firefox 1.04.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

z-index doesn't work in my dropdownmenu in IE

I think we are going in the circles here. The page in the link above (my changes) generates a tree menu just like in your picture. At least it does in FF and IE6. I can't speak for any other browsers as I haven't tried it in them.

The code I pasted above, isn't intended to be a whole CSS, but only to replace the three style rules below. All the other styles in your CSS should remain as is. I am sorry if that wasn't clear.

#navigation li {
	position:relative;
	margin: 1px;
	border: 1px solid #0037A6;
	background: #ED9400 url(/images/navbg.png) repeat-x left top;
	}

#navigation li:hover {
	background: #0037A6 url(/images/navbg.png) repeat-x right bottom;
	}

#navigation ul a {
	background: transparant;
	display: block;
	color: #fff;
	font:bold 11px/1em tahoma, arial, sans-serif;
	text-decoration: none;
	padding: 4px;
	}

mrruben5
mrruben5's picture
Offline
Regular
Last seen: 6 years 13 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

z-index doesn't work in my dropdownmenu in IE

erm...

http://www.csscreator.com/css-forum/download.php?id=1393
http://www.csscreator.com/css-forum/download.php?id=1394

See what I mean? I do that by styling the li:hover...

I think i'll have to nix that tree idea then...
Anyway, Thanks for the help!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

z-index doesn't work in my dropdownmenu in IE

Ok, ok, I get it. I must be slow today. Cool

Put the styles back the way they were. Add these styles at the end of your style sheet.

* html #navigation li {
	margin:0; 
	padding:1px;
	border-style:double; 
	border-width: 3px;
	height:1px;
}

* html #navigation ul a {
    padding:2px;
    height:1px;
}

You can't use this code for Firefox. IE places the margin colour between the lines of the double margin, where as FF places the margin colour between the top/left lines and the background between the bottom/right lines (and reverses this on :hover).

I relealise its not exactly the same in both browsers, but its pretty close and you get the basic look you are after Smile