CSS: make fieldset legend bold on hover WITHOUT moving the div below it?

Question

i have a fieldset with a legend. i want the legend to bolden when hovered, however, it shifts the content below it a few pixels down (which is kind of annoying). how can i fix it?

here are their stylings:

fieldset {
    border: none;
    border-top: 1px solid;
}
legend {
    font-size: 16px;
}
.collapsable {
    cursor: hand;
    cursor: pointer;
}
.collapsable:hover {
    font-weight:bold;
}

here is some example html:

<fieldset class="restrictiveOptions">

  <legend class="collapsable">
    <img width="12" height="12" title="Collapse" alt="Collapse"
      class="toggle" src="branding/default/images/collapse.gif"> Restrictive Options
  </legend>

  <div style="">
    ...

thanks!

Answer 1

Maybe give the legend a set height that is enough to contain both the bold and the non-bold content?

Answer 2

Try adding some vertical padding to your legend (1 or 2 pixels) and then on hover, remove this vertical padding. This should compensate for the shift caused by the bold text.

That being said, it'll probably be next to impossible to get this to display consistently in all browsers since the shift is being determined by how the browser is rendering the bold font.

Answer 3

Add a negative bottom margin to the legend on hover.

Edit: Also you might consider not using bold on hover as this often causes these sorts of issues. You might be better off changing another property like the background colour.

Answer 4

Just give it a line-height and it should stay still..