IE 8 CSS Menu frame stays on screen.

[Vistronic]

Hello after upgrade to IE 8.
I notice a problem with the menu frame staying on screen if you pan mouse away from menu (not clicking).
It drops background but it remains on screen.
Any ideas?

wtjr.org

BTW- CSS is in default location by plugin, and yes its all modded up but no mods lately.. in other words the mods worked fine in IE7 I should say… I am not certian if the default CSS would show same effect I guess I could try that but it breaks my site the default.

Oh I modded the v1.0.6 plugin also. ( a little)
I also have the meta in header to run in iE7 mode. the google term "sticky drop down menu" is close I guess but no fix yet. FF looks fine. Safari looks fine. Opera looks good.

[imported_Ryan]

I’m guessing you have always had a problem, it’s just that the other browsers have worked around it in a way that didn’t bother you.

In particular I can see that in Chrome, the background colours don’t totally fill the background in the dropdown when hovered over, they seem to stop part way along. This is usually a sign that something is either wrong, or you have modified the CSS heavily.

If the CSS hasn’t been modified heavily, then I’d guess your problem stems from the following code which may be overlaying CSS on top of the plugins code:
[code:36m8gwj5]<div id="navigation">[/code:36m8gwj5]
Try removing that tag and hopefully your problem will be fixed.

[Vistronic]

Thank you I will try that.
Here is my current CSS BTW.

[code:2wzhg9tc]
#suckerfishnav {
    font-size:13px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;

    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
display: inline;
    list-style:none;
    line-height:20px;
    padding:0px;
    margin:0;
    width:100%;
 
 
    }
#suckerfishnav a {
    display:block;
    color:#0000aa;
    text-decoration:none;
    padding: 0px 0px;
 
    }
#suckerfishnav li {
    float:left;
    padding:0;
  display: inline;
    }

#suckerfishnav ul {
    position:absolute;
z-index: 5;
    left:-999em;
    height:auto;
    width:131px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    }
#suckerfishnav li li {
    width:129px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:normal;
    font-family:verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:3px 10px;
    width:80px;
    font-size:13px;
    color:#0000aa;
    }
#suckerfishnav li ul ul {
    margin:-20px 0 0 130px;
    }
#suckerfishnav li li:hover {
    background:#99CCFF;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#0000aa;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#0000aa;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#0000aa;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#BDA86B;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#99CCFF;
    }
[/code:2wzhg9tc]

The code font is small here for me ): but I do not know how to change it.

BTW- should I upgrade to the new ver?

Thanks,
Vis.

[imported_Ryan]

The latest version of the Multi-level Navigation plugin includes a fix which allows the menu to work in IE8 compatibility mode. It’s unlikely that anyone will want to view your site in IE8 compatibility mode, but if they do the menu won’t work if you don’t upgrade.

[Vistronic]

Thanks for your time I have in my header the meta tag for IE8 to Run page as IE7. That was the first fix I tried.
So when you goto the page the user does not have to click anything to goto IE7 mode.
My page already has 2 CSS one for FF+ one for IE.
The menu does not have 2 but the page does.

I will see what the navigation tag is doing if anything.
Thanks again.

Postive prayers your way for all your help.

It is doing something it is positioning menu
I added this to theme when I was hacking at it making a new theme,
[code:3c07xeuv]

/* navigation is horz link menu

---

first padding is list position

---

*//* overflow: hidden; */

#navigation {margin-left:auto;margin-right:auto;padding:0px 0px 0px 80px;width: 650px;position: relative;top: 32px;height:2.7em;line-height:2.7em;border:none;z-index: 5;}
#navigation li {  float:left;  margin:0 5px 0px 0px;  padding:0px 0px 0px 0px;  list-style-type:none;  display:inline;  border:none;  word-wrap: normal;}

/************** padding space between list items ***********************/
#navigation li a {  display:block;  padding:0px 30px 0px 0px;  font-size: 12px;  font-family: Verdana;  border: none;  text-align: left;}
#navigation ul li a:hover {color: black;background: yellow;border:none;}
#navigation a {color:#000066;}

[/code:3c07xeuv]

[Vistronic]

Hello the two color effect is caused by the fact I have css set to highlight link text in yellow so on the drop down it is changing colors but changing 2 colors the selected drop down color and yellow link highlighting. This is done in the nav Cass, it was more of a fluke but I like the effect. I will see if that is doing anything.

I tried the z index no help there.

BTW the z index is required IMHO and should be added to code.

this is meta tag in header
[code:39fha9cm]
<meta HTTP-equiv="X-AU-Compatible" content="IE=7">
[/code:39fha9cm]

That is the tag that is causing problem by removing I break the page as it was not made in IE8, and the menu works OK, so IE7 compatibility mode is not really ie7. In other words that tag breaks the CSS menu but fixes my page!

BTW IE8 does not handle text boxes right browse to this forum and type the box down the page and the scroll bar does not follow. Anyways I guess the menu is only broken in IE7 compatibility mode so I may have to have a third CSS for IE 8
It jumps and you can not see what you are typing.
I guess I will update the plugin I am not certain what effect this will have as mine is hacked to display certain pages

[imported_Ryan]

What happened when you removed this code:
[code:1s6e2ynm]<div id="navigation"> [/code:1s6e2ynm]

If you could provide a link to an example page with that tag removed would be very handy for me. I’m run off my feet and running out of time to answer questions on here.

[Vistronic]

Do not worry about it thanks.
The problem is in IE8 the page does not display right.
So I added a meta tag to header to force IE7 mode in IE8.
This IE7 mode is what is causing the frames to stay on screen. It a way it breaks the multi level nav.
My solution will be to have special IE8 CSS so visits with IE8 will be in IE8. Your menu appears to work fine in IE8.
Its a IE8 thing for my wordpress page. I need a IE8 CSS.

That I think will be my fix.
Thanks and peace. (:
Vis.

[imported_Ryan]

Glad to hear you have a way to fix your problem ” title=”Smiley” />

[Author]

Posts