Horizontal css menu too many problem

[Psygnosis]

Ho to all!
I'm new here...
I have a question that I can't solve on my own and I need your precious help!
I have to build a wordpress template for my g/f blog...(that isn't online yet)
But I have a really big problem with the menu!

Before start to tell you my problem:
Here is the CSS:


/*HORIZONTAL MENU*/

.menu{ /*Container per il menu*/
float:left;
overflow: hidden;
width: auto;
background: url(images/blog_bg_r.jpg) repeat-y; /*menu background*/
padding:10px 0px 20px 0;
padding-left:70px
}

* html .menu{ /*h a c k for IE6*/
width: 100%;
}

.menu a.animebtn:link, .menu a.animebtn:visited, .menu a:active{
color: #000000; /*colore del link*/
}

.menu a.animebtn:hover span{
color: #CC00FF;/*colore del link al passaggio del mouse*/
}

a.animebtn{ /*pulsanti eredita dalla classe .btn_* l'immagine del pulsante*/
display: block;
float: left;
font: bold italic 13px Georgia, "Times New Roman", Times, serif; /*dimensione del testo del link*/
line-height: 75px; /* definisce la posizione del link*/
height: 53px; /* altezza e larghezza del pulsante*/
width:130px;
text-decoration: none;
padding-left:20px;
}

/*BUTTON IMAGES*/
.btn_panda{
background: transparent url('images/pulsante_panda.png') no-repeat top left;
}
.btn_ring{
background: transparent url('images/pulsante_ring.png') no-repeat top left;
}
.btn_witch{
background: transparent url('images/pulsante_witch.png') no-repeat top left;
}
.btn_nana{
background: transparent url('images/pulsante_nana.png') no-repeat top left;
}
.btn_sunako{
background: transparent url('images/pulsante_sunako.png') no-repeat top left;
}
.btn_zero{
background: transparent url('images/pulsante_zero.png') no-repeat top left;
}
/*END BUTTON IMAGES*/

/*END MENU*/

And here the html code in the header.php:

<div class="menu">
<a href="http://www.dynamicdrive.com" class="btn_sunako animebtn"><span>home</span></a>
<a href="http://www.dynamicdrive.com/style/" class="btn_zero animebtn"><span>recensioni</span></a>
<a href="http://www.dynamicdrive.com/forums/" class="btn_ring animebtn"><span>OST</span></a>
<a href="http://tools.dynamicdrive.com" class="btn_nana animebtn"><span>guestbook</span></a>
<a href="http://www.javascriptkit.com" class="btn_witch animebtn"><span>affiliati</span></a>
<a href="http://www.cssdrive.com" class="btn_panda animebtn"><span>chi siamo</span></a>
</div>

OK here is the result on IE7:

http://img4.imageshack.us/img4/8046/ie7a.th.jpg (http://img4.imageshack.us/my.php?image=ie7a.jpg)

And this is the result on Firefox 3
http://img15.imageshack.us/img15/5619/menuff.th.jpg (http://img15.imageshack.us/my.php?image=menuff.jpg)

Now as you can see Firefox display the menu correctly...but IE no...
I can edit the menu to be well displayed on IE?

Thanks in advance for the answer
Thanks really thanks

bye

[bluewalrus]

you could give it its own stylesheet http://www.quirksmode.org/css/condcom.html

[Psygnosis]

thanks but how can I solve the float problem on ie?

[Psygnosis]

no one? please?