Ciao a tutti,

ho creato un menu di soli css con dei link testuali che, nelle fasi di "link" e "visited" hanno lo stesso aspetto, mentre in "hover" cambiano sia lo sfondo (un'immagine a parte di 200px per 20px) sia il testo.

Il problema è che EXPLORER visualizza tutto correttamente, mentre FIREFOX e MOZILLA mi visualizzano l'immagine di sfondo solo in corrispondenza del testo e non per tutti i suoi 200px di larghezza.

Posto il codice:
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1">
<style type="text/css">
<!--
.bottone 
{  
font-family: Arial, Helvetica, sans-serif; 
height: 20px; 
width: 200px; 
margin-top: 2px;
}

.bottone a:link
{
height: 20px; 
width: 200px;
background-image: url(bott_link.gif); 
background-repeat: no-repeat; 
background-position: left center; 
color: #FFFFFF; 
text-decoration: none;
}

.bottone a:visited
{
height: 20px; 
width: 200px;
background-image: url(bott_link.gif); 
background-repeat: no-repeat; 
background-position: left center; 
color: #FFFFFF; 
text-decoration: none;
}

.bottone a:hover
{
height: 20px; 
width: 200px;
background-image: url(bott_hover.gif); 
background-repeat: no-repeat; 
background-position: left center; 
color: #000000; 
text-decoration: underline;
padding-left: 10px;
}
-->
</style>
</head>

<body>
<div class="bottone">link 1</div>
<div class="bottone">link 2</div>
<div class="bottone">link 3</div>
<div class="bottone">link 4</div>
</body>
</html>
Riuscite ad uniformarmi i css anche agli altri browser?
Grazie.