Thanks for this, Rakesh. My problem is, I can't work out how write the css to get a different colored box into the different list items when I rewrite the menu as a list, as per
http://css.maxdesign.com.au/listamatic/vertical05.htm which uses just one image. That weird mouseover event is one of the main reasons why I want to redo the menu. Its very existence takes me a step further from level 2 compliance. But your tip will make it more usable until I can get it changed - I'll do that ASAP. Cheers Jackie >This is fairly simple. You can use a border-left for the colored boxes >with a background-position: left with an appropriate image to show >that white gap between the colored box and the menu item. There might >be other solutions too, though. This is just something I came up with >off the top. > >Just a usability/accessibility tip while you are at it - The hover >state for the menu item which shows the yellow background is >deceptive. Not all the area of the menu item is clickable. Only the >link is. You should use a display: block; width: 100%; on the "a" >element, and specify the width of the menu item in the ul's properties >to get this functioning. > > > >On 2/9/06, Jackie Carey <[EMAIL PROTECTED]> wrote: >> http://www.itshere.org.uk >> >> >> >> I've inherited this table-based site, which is going to be replaced with >> a CMS-based site at some point in the next six months. I've worked >> styles into some of it, and the rest can remain until the switch. >> However, I am not happy with the menu and would like to replace it with >> a list-based menu. >> >> >> >> This could be done very easily if it weren't for the coloured boxes >> alongside the menu items. I'd like to keep them as they're part of the >> branding and look quite nice. >> >> >> >> Does anyone know of a way I could do this, without a whole heap of work >> (and ideally without Javascript). >> >> >> >> Thanks >> >> >> >> Jackie >> >> >> >> Scanned by MailDefender - managed email security from intY - >www.maildefender.net >> ______________________________________________________________________ >> css-discuss [EMAIL PROTECTED] >> http://www.css-discuss.org/mailman/listinfo/css-d >> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> > > >-- >Rakesh Pai >Mumbai, India. >[EMAIL PROTECTED] >http://piecesofrakesh.blogspot.com/ > >Scanned by MailDefender - managed email security from intY - >www.maildefender.net Scanned by MailDefender - managed email security from intY - www.maildefender.net ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
