title: HTML Label widths, want fixed but it keeps auto-sizing according to text?
body: <p>I am creating some tabs using labels, then im going to add some simple hover over javascript. However i want all the labels to be of fixed size with the text in the centre. This is what i have:</p>
  
  <pre><code>&lt;style&gt;
          .button
          {
              border-style:solid;
              border-width:1px;
              background-color:rgb(193,203,225);
              font: normal 14px arial, sans, sans-serif;
              text-align:center;
              color: rgb(54,95,145);
              width:100px;
              margin: 0px; 
              padding: 0px; 
              padding-top: 3px; 
              padding-bottom: 3px; 
              text-align: center; 
          }
      &lt;/style&gt;
  
      &lt;label id='Label5' class='button'&gt;  Personal Details  &lt;/label&gt;
      &lt;label id='Label1' class='button'&gt;     Education      &lt;/label&gt;
      &lt;label id='Label2' class='button'&gt;    Achievements    &lt;/label&gt;
      &lt;label id='Label3' class='button'&gt;   Work Experience  &lt;/label&gt;
      &lt;label id='Label6' class='button'&gt;     IT Skills      &lt;/label&gt;
      &lt;label id='Label4' class='button'&gt;     Languages      &lt;/label&gt;
  </code></pre>
  
  <p>but its not working? Could someone please help?</p>