title: html/css: Position shifting with link that increase font size when hovering mouse
body: <p>I want to make an <code>html</code>/<code>css</code> menu in my webpage that contain four links (horizontally in top center of page).</p>
  
  <p>and I want the menu link font size to increase when hovering the mouse over (<code>a:hover</code>).</p>
  
  <p>but the problem I have is the menu item change its place(down a little) when font size increases (in <code>IE 8</code>, and <code>Chrome</code>)
  and I don't want that to happen, note that I am using a background image (152 * 52) for the link</p>
  
  <p>I tried doing a <code>table</code> instead of the <code>inline-block</code> but it made a bigger mess.</p>
  
  <p>I also tried playing with <code>margin</code> and <code>padding</code> which didn't work either.</p>
  
  <p>I am new to html/css so any advice about anything in html/css would be appreciated and forgive my bad english.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Home page&lt;/title&gt;
  &lt;style type="text/css"&gt;
  
  body {
      font-family:Palatino, ‘Book Antiqua’, Georgia, Garamond, ‘Times New Roman’, Times, serif;
      font-size: 13px;
      color: #000060;
      background-color: #005070;
      background-repeat:repeat-x;
      text-align:center;
  }
  
  .menu
  {
      height:64px;
      width:100%;
      background-image:url(img/bglb2.png);
      background-repeat:repeat-x;
      text-align:center;
  }
  
  .menuLink, .menuLink:visited
  {
      color:#FFFFFF;
      background-image:url(img/btk.png);
      text-decoration:none;
      font-size: 20px;
      width:132px;
      height: 32px;
      padding: 10px;
      display:inline-block;
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 6px;
  }
  
  .menuLink:hover
  {
      color:#CC7011;
      background-image:url(img/bto.png);
      font-size: 26px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="menu"&gt;
      &lt;a class="menuLink" href="index.html"&gt;Home&lt;/a&gt;
      &lt;a class="menuLink" href="page1.html"&gt;Page1&lt;/a&gt;
      &lt;a class="menuLink" href="page2.html"&gt;Page2&lt;/a&gt;
      &lt;a class="menuLink" href="page3.html"&gt;Page3&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>