Problem with IE6 and text color

[Cigar Jack]

This plugin has been great, but I’m coming across one issue in IE6 and text color. The starting color is orange text on black and hover is black text on orange, but in IE6 the text is always black. Any tips on fixing this?

[Cigar Jack]

I’m using the latest version of the beta plugin. I redid the menus, while a different color in IE now it is at least readable. Here is my CSS File.

#suckerfishnav {
background:#000000 ;
font-size:16px;
font-family:verdana,sans-serif;
font-weight:bold
}

#suckerfishnav, #suckerfishnav ul {
list-style:none;
line-height:40px;
padding:0;
border:1px solid #000000;
margin:0 auto;
width:34em;
}

#suckerfishnav a {
display:block;
color:#FFA93C;
text-decoration:none;
padding:0px 10px
}

#suckerfishnav li {
float:left;
padding:0
}

#suckerfishnav li ul {
position:absolute;
left:-999em;
height:auto;
width:130px;
font-weight:normal;
z-index:100;
margin:0;
line-height:1;
-moz-opacity:0.95;
opacity:0.95;
khtml-opacity:0.95
}

#suckerfishnav li li {
padding-right:1px;
width:130px;
border-bottom:1px solid #aaa
}

#suckerfishnav li li a {
padding:4px 10px
}

#suckerfishnav li ul li {
font-weight:normal;
font-family:verdana,sans-serif
}

#suckerfishnav li ul li a {
font-size:12px;
color:#FFA93C
}

#suckerfishnav li:hover ul li a {
color:#FFA93C
}

#suckerfishnav li ul ul {
margin:-21px 0 0 131px
}

#suckerfishnav li ul li:hover {
background:#660000
}

#suckerfishnav li ul li:hover a {
color:#FFA93C
}

#suckerfishnav li ul li:hover li a {
color:#FFA93C
}

#suckerfishnav li ul li li:hover a {
color:#FFA93C
}

#suckerfishnav li ul li ul li:hover ul li a {
color:#FFA93C
}

#suckerfishnav li ul li ul li:hover ul li:hover a {
color:#FFA93C
}

#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul {
left:-999em
}

#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul {
left:auto;
background:#444
}

#suckerfishnav li:hover, #suckerfishnav li.sfhover {
background:#FFA93C
}

#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
color:#000000
}

[imported_Ryan]

Hi Cigar Jack,
Most of these problems are usually theme related.

Your CSS above shows orange text with transparent background and black text with orange background hover in modern browsers. In IE6 it does not have the transparent background and instead shows a black background.

I’m not sure what the menu is supposed to do so can’t offer much more help at this stage. If you let me know exactly the menu is supposed to look like a may be able to figure out what the problem is.

[Cigar Jack]

I think my original problem is I screwed it up somewhere. It is at least readable now. Before it was black on black. ” title=”Smiley” />

Great plugin, none of the other drop down menu plugins are this good.

[imported_Ryan]

Glad you like the plugin ” title=”Smiley” />

I’m assuming the code displayed fine straight out of the CSS generator? And you modified it afterwards?

What exactly were you trying to modify? I’m currently in the process of designing a new version of the generator so if you let me know what it is you are modifying then I’ll try to integrate that feature into the new version.

[Cigar Jack]

Originally I was trying to modify the colors, not sure why IE always showed Black on Black instead of Black on Orange.

A couple of things I think would be a great add to the CSS Generator or documentation is centering the menu. Not difficult to do, but takes some trial and error.

Also maybe some details on z-index too. That’s another thing I had to add to the CSS for the menus and to my themes css.

[imported_Ryan]

Yeah, you are correct. It seems I do need to add some documentation.

I’m working on a new version of the generator at the moment which features lots more features. Once that’s done I’ll start working on some documentation to help people with their integrations.

[Author]

Posts