/    Sign up×
Community /Pin to ProfileBookmark

Bold on hover displaces text

Copy linkTweet thisAlerts:
Apr 04.2005

I am using a small text horizontal menu bar for navigation. I want to use a:hover to make the link(s) bold when moused over but as the given link becomes bold, the rest or the links are displaced by a couple pixels to account for the new size. Is there any easy way to fix this problem?

Thanks.

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@SanimApr 04.2005 — Could you show me the web page the menu bar is on?
Copy linkTweet thisAlerts:
@Bad_OscarauthorApr 04.2005 — Sanim - I PM'd you the address cause I don't have much bandwidth and am just starting to design the site. Looking forward to your reply.

thanks.
Copy linkTweet thisAlerts:
@ray326Apr 04.2005 — I am using a small text horizontal menu bar for navigation. I want to use a:hover to make the link(s) bold when moused over but as the given link becomes bold, the rest or the links are displaced by a couple pixels to account for the new size. Is there any easy way to fix this problem?[/QUOTE]
Only if you can find a font-family that everyone has that has bold characters the same width as normal ones. I can tell you right now you're not going to find one.
Copy linkTweet thisAlerts:
@jhechtfApr 04.2005 — ...so wait is the text like

Link1 | Link2 | Link 3

and then when you mouse over

[B]Link1[/B] | Link2 | Link3?
Copy linkTweet thisAlerts:
@NogDogApr 04.2005 — If you use a mono-spaced font for this, you might not have this problem, but then you might not like the look of the font.
Copy linkTweet thisAlerts:
@ray326Apr 04.2005 — You can make the menu items display:block;float:left and give them a width large enough to prevent this, too.
Copy linkTweet thisAlerts:
@SanimApr 04.2005 — I got your PM. Check my reply and see if it helps at all.
×

Success!

Help @Bad_Oscar spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...