table border css to create css mouseover menu

[Jeff]

I'm trying to create a menu using css where the table cell changes color on mouseover (this I can do) AND where the border color changes color on mouseover (this I can't get right.) I thought I might be able to get away with stacking two tables and just using the td onmouseover change, but that doesn't work (the lower table cell change overrides the upper, at least in IE6). And I'm not sure how to correctly do the table border change.

Well the best way to explain what I'm trying to do is probably with an image. http://www.marinearchitecture.com/temp/css-border-how.gif
(where the second cell down represents a mouseover where both the td background and the table border change color.)

Anyone have some code for how to accomplish this (specifically the css & javascript code to change the table border color with a 1 px non-shaded width...?

[hobbes]

If you have JS functions for the events, you could have the cell handler (function) catching the event pass it onto the table event handler.

Haven't had my coffee yet, but I think there is also a way of processing the event but returning a code so JS keeps processing it for lower elements. Maybe someone else can help a sleepy tiger remember.

[phppete]

CSS by itself will do the trick, I made you a quick demo here:
http://www.petehawkes.co.uk/tdcssmenu.htm

I don't see a need for a JavaScript solution here but can make one for you if you wanted it, my demo also downgrades in NN4 in an acceptable fashion. It is only v5 browsers that support the style Object and the required level of CSS.

As you will see from the source of my solution, no tables are needed, <div>'s (also known as layers) are the best and cleanest/leanest solution.

HTH

Pete

[Jeff]

Fantastic!!! Exactly what I needed. Thanks Pete :)

I tend to resist getting away from tables, but when I see code that clean do what I want, I can't help but be impressed!

[kc44]

I was wondering if this method can also be used for a horizontal menu. the display: block seems to result in a linebreak -> anyway to work around this? Don't want to go back to using tables.

Any suggestions?

[phppete]

You can use display:inline but be aware that tweaks need to be made for IE versions 5, 5.5 and 6 as each renders things differently, one reason is the CSS box model changed in IE6.

I've had troubles with a horizontal version in IE5 but you can find workarounds.

[Harley]

Scroll down to "horizontal lists":

http://css.maxdesign.com.au/listamatic/index.htm

You might also want to check out the A List Apart article on Taming Lists:

http://www.alistapart.com/articles/taminglists/

Enjoy! :)

[phppete]

Look at the ALA examples in IE5, not very nice, and at this time IE5 is still around 10 to 20% of users.

Soon IE5 will be the same nightmare as NN4 was/is... :)

Pete