Hello,
I have a menu:
<div id="navbarlinks"><a href="home.php">home</a>|<a href="menu.php">menu</a>|<a href="about.php">about</a>|<a href="reviews.php">reviews</a>|<a href="contact.php">contact</a></div>
and a style for the ahref tag to bold the text on rollover, my issue with it: the href tags shift because of the size change in the font caused by the bold property. How can you make it so the links bold state doesn't effect any neighbouring href tags?
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?
a href tags - font-weight:bold
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.
a href tags - font-weight:bold
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.
a href tags - font-weight:bold
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.
a href tags - font-weight:bold
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:
a href tags - font-weight:bold
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...
a href tags - font-weight:bold
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.
a href tags - font-weight:bold
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
a href tags - font-weight:bold
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.
a href tags - font-weight:bold
Hmm, try making the menu horizontal and see how it goes. I had trouble.
a href tags - font-weight:bold
Just thru this together. It validates. In mozilla if you zoom in the text it blows though.