CSS Problems in IE

[reverend boltron]

OK, here's the site I'm working on..
Site

The problem is the lefthand navigation menu. It works fine in Firefox, but in IE it will only flyout when you hover directly over the text (instead of over the LI), and then when it does do the flyout, in IE, it has a few spaces of pixel between that portion of the menu, which makes it close every time the customer moves his mouse over the different items.

I am using Magento, so yesterday I did an upgrade, and this is what happened.

Very frustrating because I can't seem to figure it out.

Any ideas?

 

[brikis98]

my guess - and with IE, that's all it can be - is that you're dealing with the issues mentioned here and here. i think the issue is that the (short sighted) designers of IE did not build IE to properly support dynamic actions (mouseover, hover, etc) on container elements like li, div, span, etc. therefore, you prob need to change the way you build the menu. for example, you could try making the hyper links (<a href...) have the mouseover event, set their css style to display: block, and set the width and height to fill up the entire space.

 

[xtknight]

No li:hover in IE, use <li onmouseover="func"> where func is a javascript func or expression.

Or put an a in the <li> and use li a:hover. That's easier because with the first method you need to use onmouseover on other elements to be able to undo the "hover" action (when onmouseout sometimes isn't suitable). You may need to make a's width 100% or change its method of "display".

 

[reverend boltron]

Oh wow, thanks so much! I found out the other problem with the spacing issue. It turns out that the iestyles.css file had a change in it, and it was just a 1px difference that came about, but I got it fixed. I will work on the li:hover now.

 

[reverend boltron]

Hm, the only parts that I could find using the li:hover were the parts that weren't in use. I changed them anyway (but obviously no results).

I'm using CSSVista to test in Firefox and IE at the same time, but I'm running it in Parallels and coming into some goofy errors (due to Parallels).

Anyway, thanks for the pointing in the right direction though. Any more ideas? I'm all ears.

 

[brikis98]

did you try what i suggested? that is, making your hyperlinks into display: block and putting the onmouseover even on them?

 

[reverend boltron]

I don't really want to go the javascript route if I don't have to, which is why I am straying away from the onmouseover.

The links were already set to display block. I think I might just switch out the actual text with images. It might just avert more headaches for me.

 

[NiKeFiDO]

JS doesn't usually play nice with CSS, especially in terms of cross-browser issues.