menu problem

[dethfire]

can anyone see why the left side menu doesn't work?

http://www.topfloortech.com/clients/...n/web/home.htm

[beetle]

Looks like it's working to me. I mean, the colors and spacing (in IE) look a bit off, but the submenus pop-up just fine.

IE6 & Mozilla 1.3.1
WindowsXP Pro

[dethfire]

the submenus should work fine, my problem is the left side
specificly the mouse overs and changes in css classes, doesn't it act flakey?

[danielng5]

Yeah, the side menu appears to be fine. Other then the minor problem starting with "Pressure Sensitive Tapes", where the menu popping up is not aligned nicely. I think everything looks fine on IE6.

[dethfire]

ah I see, on my mac when I roll over the links it changes the image background by switching css classes, but it doesn't seem to show up in IE at all. You can kinda see it on the first one when you roll over the sub menu.

[danielng5]

The links on the side are using different classes from your stylesheet.

The following are using mainnav:
Heat Shrink Tubing
Identification Products
Specialty Products
Value Added Services

The following are using mainnav2:
Extruded Tubing and Sleeving
Pressure Sensitive Tapes
Adhesives, Sealants and Encapsulants
Wire and Cable Management Products
Cleaners, Solvents and Static Control

This is probably what is causing some of the labels on the side menu look like links while others looks like headings.

[dethfire]

thanks dan, now how we solve the problem of IE not using css to switch the backgrounds on mouseover?

Is this IE compliant css?

.mainnav2 a:hover {
color: #FFFFFF;
text-decoration: none;
background-image: url(navbox2.gif);
background-repeat: no-repeat;
}

[danielng5]

Try setting all the link properties the same.

a:active { color: #FFFFFF; text-decoration: none; background-image: url(navbox2.gif); background-repeat: no-repeat; }
a:hover { color: #FFFFFF; text-decoration: none; background-image: url(navbox2.gif); background-repeat: no-repeat; }
a:link { color: #FFFFFF; text-decoration: none; background-image: url(navbox2.gif); background-repeat: no-repeat; }
a:visited { color: #FFFFFF; text-decoration: none; background-image: url(navbox2.gif); background-repeat: no-repeat; }

I don't know how to get rid of the underline when you hover over the link though.

[dethfire]

still doesn't work, I think it's an IE bug. Just move over and try out the first popout menu for the first link on the left side navigation, use IE. It seems to work, but everyonce in a while the mouseover css image background for the left side link seems to flicker randomly.

[junjun]

Try setting all the link properties the same.

a:active { color: #FFFFFF; text-decoration: none; background-image: url(navbox2.gif); background-repeat: no-repeat; }
a:hover { color: #FFFFFF; text-decoration: none; background-image: url(navbox2.gif); background-repeat: no-repeat; }
a:link { color: #FFFFFF; text-decoration: none; background-image: url(navbox2.gif); background-repeat: no-repeat; }
a:visited { color: #FFFFFF; text-decoration: none; background-image: url(navbox2.gif); background-repeat: no-repeat; }

I don't know how to get rid of the underline when you hover over the link though.

Remember the correct logic order:
a:link
a:visited
a:hover
a:active