Problema con tabs

[Chef89]

Salve
ho un piccolo problema nel settare la width per ogni tabulatore. Sto utilizzando il codice preso dalla quida pubblicata su html.it nella sezione javascript.
Il tabulatore funziona correttamente e sono riuscito ad impostare la grafica come la volevo io. Ho 2 immagini 1 x lo stato del tab attivo (dimensioni 70x22px) mentre la 2a x lo stato del tab inattivo (70x18px)

Io vorrei impostare la larghezza al tab di 70px solo che no ci riesco.

ecco i codici
css

#tabber {
	padding: 0px; margin: 0;
	float: left;	
	font: bold 12px Arial, Verdana, Tahoma, Sans-serif;
	width: 192px;	
}
/*--------------------------------------------------
  Regola richiesta per nascondere il contenuto non
  attivo delle tab.
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  Classe .tabber = prima l'interfaccia sia creata
  Classe .tabberlive = dopo che l'interfaccia è stata creata
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}
/*--------------------------------------------------
  ul.tabbernav = la lista di navigazione delle tab
  li.tabbernav = il list item con la tab attiva
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #c8c8c8;
 font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border-bottom: 1px solid #c8c8c8;
 background: url(inactivetab.gif) no-repeat bottom left;
 text-decoration: none;
}

ul.tabbernav li a:link { color: #006f9f; }
ul.tabbernav li a:visited { color: #006f9f; }

ul.tabbernav li a:hover
{
 text-decoration: none;
 border-bottom: solid 1px #ffffff;
}

ul.tabbernav li.tabberactive a
{
 background: url(activetab.gif) no-repeat;
 border-bottom: 1px solid #ffffff;
 font-weight: bold;
}

ul.tabbernav li.tabberactive a:hover
{
}

/*--------------------------------------------------
  Classe .tabbertab = il contenuto delle tab
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #aaa;
 border-top:0;
 height:250px;
 overflow:auto;

}

html

<div class="tabber">
<div class="tabbertab">
<h2> Tab 1</h2>


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam laoreet pulvinar nisl. Nullam elit. Cras sollicitudin molestie mauris. Nulla dapibus velit sed mauris. In tellus. Praesent eget ipsum et velit tempus suscipit. Fusce mattis, erat a mollis placerat, enim orci rutrum lorem, ac fermentum diam ligula non nulla. Integer luctus lacus at nibh. Aliquam a sem quis neque convallis vehicula. Etiam nec tellus quis risus feugiat eleifend. Praesent porttitor ante eget ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean quis velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed ullamcorper orci ac pede. Nullam metus eros, pretium vel, rhoncus id, blandit sed, sapien. Aliquam dignissim mi vitae felis. Nullam ultrices tellus quis eros. Phasellus dolor felis, feugiat et, porta et, semper euismod, purus. Proin semper nisi quis erat faucibus tincidunt.</p>
</div>
<div class="tabbertab">
<h2> Tab 2</h2>


Duis justo lectus, porta sit amet, sollicitudin et, convallis vel, dolor. Vestibulum massa. Sed lacinia tristique elit. Phasellus ac sapien non est gravida dapibus. Nulla ac dolor ac turpis mollis laoreet. Phasellus tincidunt. Phasellus adipiscing nisi et nisi. Mauris at nulla. Sed tempor, magna vel rhoncus lacinia, tellus mi venenatis nisi, eu ultrices neque neque quis tortor. Vivamus quis elit. Ut molestie dolor vitae mauris. Maecenas facilisis tempor risus. Ut vel orci eu libero interdum bibendum.</p>
</div>
</div>

come posso risolvere il mio problema?
grazie in anticipo

[Chef89]

ho modificato leggermete il codice. Ora funziona correttamente con IE 7.0 ma con FF 3 no.. come è possibile? cosa sto sbagliando?

#tabber {
	padding: 0px; margin: 0;
	float: left;	
	font: bold 10px Arial, Verdana, Tahoma, Sans-serif;
	width: 192px;	
}
/*--------------------------------------------------
  Regola richiesta per nascondere il contenuto non
  attivo delle tab.
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  Classe .tabber = prima l'interfaccia sia creata
  Classe .tabberlive = dopo che l'interfaccia è stata creata
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}
/*--------------------------------------------------
  ul.tabbernav = la lista di navigazione delle tab
  li.tabbernav = il list item con la tab attiva
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 0;
 font: bold 10px Verdana, sans-serif;
 border-bottom: solid 1px #c8c8c8;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
 border-bottom: none;
}

ul.tabbernav li a
{
 text-align: center;
 margin-right: 2px;
 background: url(inactivetab.gif) no-repeat bottom;
 text-decoration: none;
 padding-top: 3px;
 width: 70px;
 height: 18px;
}

ul.tabbernav li a:link { color: #006f9f; }
ul.tabbernav li a:visited { color: #006f9f; }

ul.tabbernav li a:hover
{
 background: url(inactivetab.gif) no-repeat bottom;
 width: 70px;
 height: 18px;
 text-decoration: none;
}

ul.tabbernav li.tabberactive a
{
 padding-top: 4px;
 background: url(activetab.gif) no-repeat bottom;
 font-weight: bold;
 width: 70px;
 height: 23px;
}

ul.tabbernav li.tabberactive a:hover
{
 background: url(activetab.gif) no-repeat bottom;
 width: 70px;
 height: 23px;
 text-decoration: none;
}

/*--------------------------------------------------
  Classe .tabbertab = il contenuto delle tab
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #aaa;
 border-top:0;
 height:250px;
 overflow:auto;

 
 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */
 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */


}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}