title: CSS Hover: Bold changing element size with padding
body: <p>Alright, of course I understand why this is happening, I'm just hoping there's some creative solution.  Let's say I have this element:</p>
  
  <pre><code>.element {
      padding:0 1px;
  }
  .element:hover {
      font-weight:bold;
  }
  </code></pre>
  
  <p>It's crucial that the padding be in place for visual consistency, but is there some magical way I'm not aware of to lock the element's width down before engaging in the hover behavior?</p>
  
  <p>No JavaScript allowed, unfortunately.</p>
  
  <p><strong>JsFiddle:</strong></p>
  
  <p><a href="http://jsfiddle.net/M9V3Q/" rel="nofollow">http://jsfiddle.net/M9V3Q/</a></p>
  
  <p><strong>More Info</strong></p>
  
  <p>The client is extremely specific about what they want on certain parts of the site, and the nav is one of them, much to my frustration. They insist on hover being black text on a dark shade of red used in their logo, and they want the buttons to be centered. Since different browsers render text differently, the only way to create a consistent look is to use padding to create the width. Unfortunately, with normal font weight the black is very difficult to read.</p>