Can't understand this CSS ...

I ran across some menus at http://www.cssplay.co.uk/ recently and don't understand how it works - but it does.

http://www.peachtreewebs.com/protos/pro_three.html

Specifically, I just don't understand the "b" element in the following CSS code which apparently adds a sliding door effect:

.menu3 li a:hover {color:#fff; background:#000 url(three_1.gif);}
.menu3 li a:hover b {background:url(three_1.gif) no-repeat right top;}

Any illumination would be appreciated.

Thanks

Bob

Hey Bob, and welcome to Sitepoint :wave:

The sliding doors technique is where two elements have overlapping background-images so as the element grows the images spread apart from one another.

For this to work you need two elements to apply the background images to, this example shows how it works:
http://www.yellowshoe.com.au/tips/ex...er_example.htm

For the list you already have two elements you could use - 'li' and 'a' but unfortunately IE6< doesn't understand :hover on anything other than anchors - So they have used a <b> tag so that they can apply different background images to both elements within the anchor on hover.

You could do it without the b tags and add javascript like suckerfish to fix it in IE,
http://www.htmldog.com/articles/suckerfish/hover/

Hope that helps :)

OK, I get it. Pretty tricky. Thanks for the help.

Bob

No problem :)

Just to add to this, other elements other than <b> could be used, like <span> or <i>, in the same way. I think Stu uses the <b> a lot as it is not used much these days as the <strong> element has replaced it for text styling.

I had seen the <spans> but not <b> or <i>. I keep looking at techniques like these because I have a couple of Joomla CMS sites I'd like to use them on. I haven't been able to figure a way to alter the markup output by the version 1.x code - version 1.5 should be easier. Thanks.