Text shifting on bold hover

Question

I have simple tables like this:

<table border="1">
<tr>
    <td>title1</td>
    <td>title2</td>
    <td>title3</td>
</tr>
<tr>
   <td><a href="#">item1_1</a></td>
   <td><a href="#">item1_1</a></td>
   <td><a href="#">item1_1</a></td>
</tr>
<tr>
    <td><a href="#">item1_1</a></td>
    <td><a href="#">item1_1</a></td>
    <td><a href="#">item1_1</a></td>
</tr>
<tr>
    <td><a href="#">item1_1</a></td>
    <td><a href="#">item1_1</a></td>
    <td><a href="#">item1_1</a></td>
</tr>
</table>

Combined with my CSS, the result would be: http://jsfiddle.net/yzsfH/

As you can see, the hyperlinks inside the table "move" when hovering over it. Of course that movement is an unwanted effect, and I would like to get rid of it. I did some search on it, but could not find anything satisfying.

Could someone explain, why this is happening and how to fix it?

It doesn't move. Bold text uses more width to render. – Linus Caldwell Mar 20 '13 at 13:57 — Linus Caldwell, Mar 20 '13 at 13:57
@LinusCaldwell There is no way i can +2 your comment. – Milche Patern Mar 20 '13 at 13:59 — Milche Patern, Mar 20 '13 at 13:59

dsgriffin · Accepted Answer · 2013-03-20T18:12:58.790

1

Instead of using the bold attribute to highlight an element, the proper approach is to give the currently hovered link a different color - that way, you won't have these kinds of problems!

Simply remove the bold attribute and change the color to something different, like so:

a:hover 
{ 
  text-decoration:none; 
  color:#000000;
}

Remember that making something bold makes it's size larger to render, and that this is the generally preferred approach.

Here's a working jsFiddle - http://jsfiddle.net/yzsfH/5/

edited Mar 20 '13 at 18:12

answered Mar 20 '13 at 13:58

dsgriffin

66,495
17
137
137

If it works, it works by accident only, because the default font size happens to be larger than 14px to the extent that bolding does not increase width. It’s trickery, and it combines (possible) font size change with font weight change, i.e. combines a questionable mouseover effect with another questionable mouseover effect. The normal way to highlight on mouseover is to change colors. – Jukka K. Korpela Mar 20 '13 at 17:19
1

@JukkaK.Korpela You're correct, I knew it would work in this case but generally it's not the best way to go about it. I'll update my answer with this new fiddle, as you mentioned it's a better way - http://jsfiddle.net/yzsfH/5/ – dsgriffin Mar 20 '13 at 17:23
thanks for the update, i decided to stay with the normal highlight - just changing the color on mouseover. thanks for the fiddle too :] – seph Mar 21 '13 at 15:55

score 1 · Answer 2 · edited May 23 '17 at 12:29

This you may know, that the width is increasing because the text size is increasing. (Bold Text)

So, give the below properties to a tag which will solve the problem.

a{
  display:block;
  width:55px;  /* give fixed width here */
}

Giving fixed width to td is waste because if the content inside it increases then td width also increases eventhough fixed width is assigned to it.

Working Fiddle

score 0 · Answer 3 · answered Mar 20 '13 at 13:57

0

This is happening because a bold font is wider than a normal font. Try centring your text and making the cell slightly wider.

answered Mar 20 '13 at 13:57

Paul

4,160
3
30
56

score 0 · Answer 4 · answered Mar 20 '13 at 13:57

0

bolder text = larger text ... it's not a bug, it's an obvious feature try forcing the width of your td's (using CSS of course) so that their width doesn't depend on the width of the text in it...

answered Mar 20 '13 at 13:57

Laurent S.

6,816
2
28
40

score 0 · Answer 5 · answered Mar 20 '13 at 13:58

0

When text becomes bold, it increases in width. Because the cells wrap around the text, and the text is now wider the cell becomes wider to accommodate this. A fix would be to use a lighter font and on hover have it become darker.

answered Mar 20 '13 at 13:58

Omega

2,998
2
16
19

score -1 · Answer 6 · answered Aug 27 '15 at 09:22

-1

To fix this issue Give the fix width:50px;

answered Aug 27 '15 at 09:22

Ravi Ubana

397
5
26

Text shifting on bold hover

6 Answers6