11 replies [Last post]
Digeart
Offline
Regular
Last seen: 17 years 1 week ago
Timezone: GMT+10
Joined: 2004-04-12
Posts: 14
Points: 0

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?

Arkkimaagi
Offline
Regular
Last seen: 16 years 49 weeks ago
Timezone: GMT+2
Joined: 2004-05-11
Posts: 29
Points: 0

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?

~ Arkkimaagi ~
Experto credite

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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! Wink

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

The next sentence is true. The previous sentence is false. Discuss...

Digeart
Offline
Regular
Last seen: 17 years 1 week ago
Timezone: GMT+10
Joined: 2004-04-12
Posts: 14
Points: 0

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.

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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. Wink

The next sentence is true. The previous sentence is false. Discuss...

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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:

The next sentence is true. The previous sentence is false. Discuss...

Digeart
Offline
Regular
Last seen: 17 years 1 week ago
Timezone: GMT+10
Joined: 2004-04-12
Posts: 14
Points: 0

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...

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

a href tags - font-weight:bold

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

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

The next sentence is true. The previous sentence is false. Discuss...

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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

Smile

The next sentence is true. The previous sentence is false. Discuss...

three
Offline
newbie
Last seen: 11 years 13 weeks ago
Timezone: GMT-7
Joined: 2004-03-18
Posts: 8
Points: 0

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.

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

Digeart
Offline
Regular
Last seen: 17 years 1 week ago
Timezone: GMT+10
Joined: 2004-04-12
Posts: 14
Points: 0

a href tags - font-weight:bold

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

three
Offline
newbie
Last seen: 11 years 13 weeks ago
Timezone: GMT-7
Joined: 2004-03-18
Posts: 8
Points: 0

a href tags - font-weight:bold

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