a href tags - font-weight:bold

That's a tricky one. Maybe you could make them equal width? So that each link would have like 100px of space to manouver around?

This is one I've always stayed away from. But, as Arkkimaagi states, the key is to giving the elements their own widths. The problem is, the bar character would need to be separate from the a links. Since, when the a links are rolled-over, the bar character will move. Here's an unordered list version I've done:

http://pub.c-o2.net/cssf/boldOver.htm

The code is obviously heavier, but hey, it's using ul like they told us to!

I'm pretty sure this could be solved with less code, but this is one solution anyway.

Thats exactly what i'm after! well the effect anyway. I don't mind using ul it's only for one project. But I'm very appreciatve. Still new to css so it's all a bit of a challenge.

Just spotted that it doesn't seem to work in Safari, which is very strange indeed :? There's nothing special in the code.

I'll look into it anyhow.

Seems to be the float or width used with a float that stops Safari activating the a:hover. Don't know if I've stumbled across a bug as yet, but all other browsers seem to show the hover state, PC and Mac. Just Safari doesn't like it.

Removing either the width or float, allows it to work, but that defeats the design! :roll:

Love thy mac! indeed. I love macs, and this cant be good, because its for an upmarket cafe, which up market people own upmarket macs, who shall visit upmarket css designed sites. Thanks for the help. I have been researching about the box model errors and the like. It's nice to know I'm not alone...

Ah, since you put it like that, I'll look into it a bit more

If you'd said you weren't bothered about Macs, I would've gone back into my little Apple corner.

Okay dokay... Easy enough to fix. Simply add a height to your ul CSS. Check out my link, I've updated it with some insight and a bizarre occurrence... http://pub.c-o2.net/cssf/boldOver.htm

I realize it is a little late to reply to this post but here it is. I have been fighting with this exact problem for awhile. I found that if you dislay:block your anchor, make sure to size the block for bold text and set font-size it will work. No need to use any kind of list.

http://www.threesworld.com/demo/test-links.html

Hmm, try making the menu horizontal and see how it goes. I had trouble.

Just thru this together. It validates. In mozilla if you zoom in the text it blows though.

http://www.threesworld.com/demo/inline-navbar.html