title: How to make css width work in firefox
body: <p>I'm creating an web system, but it's not showing correctly in firefox (and probably not in IE too), but it's great in Google Chrome, the page is that: <a href="http://deva.ipvalverde.com" rel="nofollow">Page with errors</a></p>
  
  <p>The problem is that my <strong><em>&lt; ul></em></strong> component is too large in Firefox. I'm using <strong><em>width: 760px;</em></strong> and repeating an small width image over this 760 pixels. But the firefox do it for more than 760 pixels (as you can see in the link).</p>
  
  <p>This is my ul-html code:</p>
  
  <pre><code>&lt;body id="maincontent"&gt;
      &lt;ul class="ulmenu"&gt;
          &lt;li&gt;&lt;a href="#" &gt;Registrar&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="lastmenu" href="#" &gt;Realizar login&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And my css:</p>
  
  <pre><code>root { 
      display: block;
  }
  #maincontent
  {
      background-color: black;
      width: 760px;
      margin: auto;
  }
  ul.ulmenu
  {
      text-align: center;
      margin-top:0;
      display:table;
  
      width: 760px;
      max-width: 760px;
      list-style-type: none;
      height: 60px;
  
      background-image: url(../image/menubg.png);
      background-repeat: repeat-x;
      /*
      visibility: hidden;*/
  }
  ul.ulmenu li
  {
      float: left;
  }
  ul.ulmenu a
  {
      background-image: url(../image/menudiv.png);
      background-repeat: no-repeat;
      background-position: right;
      padding-right: 32px;
      padding-left: 32px;
      line-height: 60px;
      display: block;
      color: #ffffff;
      text-decoration: none;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 21px;
  }
  ul.ulmenu a:hover
  {
      color: #AAAAAA;
  }
  </code></pre>
  
  <p>In order to make the options of the menu centralized, i created some code in JS with jQuery to do that. If I remove this code, the width of green image in firefox becomes smaller, but it's still bigger than necessary (about 100px), the chrome images keeps unchanged.</p>
  
  <p>I know only basics of css. Can anybody point me how can I fix that?</p>
  
  <p>----EDITED-----</p>
  
  <p>Fiddler URL for code (but the error is only noticed on maximized browser):</p>
  
  <p><a href="http://jsfiddle.net/ipvalverde/EJGN9/3/" rel="nofollow">See it on Fiddler</a></p>