title: Adjusting Width of jquery ui tabs- Same width in all browsers
body: <p>I am currently working with jquery ui tabs but I am facing some issues with the css of the tabs. I have try messing with the width but it breaks in different browsers. Is there away to set an auto width to the nav menu of the tabs? <a href="http://webprolearner.ueuo.com/dropdown-menu/test2.php" rel="nofollow noreferrer">EXAMPLE</a></p>
  
  <p><img src="https://i.stack.imgur.com/T8e3T.png" alt="Images: "></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#page-wrap { width: 750px; background:#FFF; margin: 10px auto; margin: 0; padding: 0;    }
  .ui-tabs   { zoom: 1;}
  .ui-tabs .ui-tabs-nav   { list-style: none; position: relative; overflow:hidden; z-index: 1000; background: #EBEBEB; margin: 0; padding: 0;}
  .ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important;  margin: 0 0px -1px 0;  background: #EBEBEB;}
  .ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: 5px 10px ;  outline: medium none; font-weight: bold; font-size:11px; line-height: 30px;}
  .ui-tabs .ui-tabs-nav 
  li.ui-tabs-selected { border-bottom-width: 0; background: #F9AE5C;   border-top:1px solid #D4D4D4; border-left:1px solid #D4D4D4; border-right:1px solid #D4D4D4; border-bottom:1px solid #FFF; }
  .ui-tabs .ui-tabs-nav li a, 
  .ui-tabs.ui-tabs-collapsible 
  .ui-tabs-nav li.ui-tabs-selected a  { cursor: pointer; color: #222222; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
  .ui-tabs .ui-tabs-panel { padding: 20px; display: block; border-width: 0;  background: none; position: relative; min-height: 100px;  border: 1px solid #D4D4D4;  }
  .ui-tabs .ui-tabs-hide { display: none !important; margin: 0; padding: 0;}
  </code></pre>