Colour issues with IE6 and IE7

[Anonymous]

I am having a major issue with the colour of the text in the dropdown levels of the menu. The text is the same colour as the background and no amount of fiddling will change it. I am using v1.04. Should I upgrade to the latest version. I have disabled the plugin CSS file, and not enabled the inline CSS.

The site is http://www.jewellerybyalana.co.uk. My CSS for the menu is attached below. Thanks in advance for all help.

#suckerfishnav {
    background:#000000 repeat-x;
    font-size:14px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;
    z-index:1;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:40px;
    padding:0;
    border:0px solid #aaa;
    margin:0;
    width:100%;
    z-index:1;
    }
#suckerfishnav a {
    display:block;
    color:#ffffff;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:101px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:0px solid #666666;
    }
#suckerfishnav li li {
    width:99px;
    font-weight:bold;
    font-family:verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:80px;
    font-size:12px;
    color:#ffffff;
    }
#suckerfishnav li ul ul {
    margin:-21px 0 0 100px;
    }
#suckerfishnav li li:hover {
    background:#ffffff;
    }
#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:#000000;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#000000;
    }
#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:#ffffff;
    }
#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:#000000;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#ffffff;
    }

[imported_Ryan]

The plugin version won’t change the look of the menu, that is controlled by the CSS.

Try removing <div id="menu"> or any CSS in it which may be affecting the menu. If that doesn’t work, then let me know and I’ll have another look for you.

[Anonymous]

Hi Ryan,

Thanks for the quick reply. Yes I did try removing the menu div, but this caused the menu to disappear totally in Firefox.

For the above code, I generated it from your CSS generator, and then made a few amendments (added a z-index=1, removed the borders from the dropdowns)

[imported_Ryan]

Thanks for the info. about the changes you made. It makes my job a lot easier ” title=”Smiley” /> I’ll take a look now and be back in a few mins … hopefully with a solution for you.

[imported_Ryan]

[quote:t1usc5gb]… the colour of the text in the dropdown levels of the menu. The text is the same colour as the background.[/quote:t1usc5gb]

I can’t see any problem. The colour of the text is set to be white with grey background, then on hover it becomes grey text with white background. What exactly is the problem?

It does seem that your surrounding tags are influencing the CSS of the menu though as the background of the menu seems to be set to black, not grey.

[Anonymous]

The issue has resolved itself for IE7 but I’m still having the same problem with IE6. Normally I wouldn’t be too bothered but its an e-commerce site, so I need it to be accessible to everyone.

Here’s a jpg to show exactly what the error is:

http://www.darksidedesign.co.uk/menu_error.jpg

The text and background colours are the same (black) in the dropdowns – I want the text to be white….

Thanks again for the help

[imported_Ryan]

The tag <div id="menu"> seems to be causing problems with your menu. Hopefully if you can correct that, the menu will appear as expected.

[Author]

Posts