[CSS] problemi con FIREFOX e MOZILLA

**gordian** · 20-05-2005, 18:18

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.

**Sky** · 21-05-2005, 01:48

prova togliendo i div e applicando le loro proprietà direttamente ai tag "a", aggiungendo "display: block" :)

**gordian** · 21-05-2005, 09:13

Originariamente inviato da Sky
prova togliendo i div e applicando le loro proprietà direttamente ai tag "a", aggiungendo "display: block"

Se scrivo questo:

codice:

<body>
link 1

link 2

link 3

link 4

</body>

e scrivo "display: block;" su tutte e 3 le proprietà del css non mi fa vedere nessun immagine di sfondo.

Anche se togliessi il display, comunque vuole i <div> per visualizzare gli sfondi.

**gordian** · 24-05-2005, 18:17

Up

**atomicants** · 24-05-2005, 19:25

ola concittadino, ste cose è meglio farle con le liste:

http://pro.html.it/articoli/id_447/i...pag_2/pag.html

aloha

**gordian** · 24-05-2005, 19:32

Originariamente inviato da atomicants
ola concittadino, ste cose è meglio farle con le liste:

http://pro.html.it/articoli/id_447/i...pag_2/pag.html

aloha

Ti ringrazio, ma l'avevo già letto.
Non c'è nessun esempio nell'articolo che faccia al caso mio, anche perchè tutti prevedono il link della pagina corrente diverso dagli altri e non è quello che vorrei io.
Inoltre vorrei capire come ottenere il risultato che ho con EXPLORER anche con FIREFOX, ma senza l'escamotage delle liste.
Ci sarà un modo...

**atomicants** · 24-05-2005, 21:02

secondo me l'articolo faceva esattamente al caso tuo... cmq se vuoi fare tutto con i div, che sono cmq inutili....

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">
<!--
div.bottone 
{  
font-family: Arial, Helvetica, sans-serif; 
height: 20px; 
width: 200px; 
margin-top: 2px;
}

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

a:hover
{ background-image: url(bott_hover.gif);
  text-decoration:underline;
  color:#000000;
}


-->
</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>

**nickmadison** · 25-05-2005, 08:14

Inoltre vorrei capire come ottenere il risultato che ho con EXPLORER anche con FIREFOX, ma senza l'escamotage delle liste.

dovresti fare il contrario : sviluppare su browsers che rispettano il w3c e poi alla fine correggere per quello pseudo browser di IE.

**gordian** · 25-05-2005, 10:24

Originariamente inviato da atomicants
secondo me l'articolo faceva esattamente al caso tuo... cmq se vuoi fare tutto con i div, che sono cmq inutili....

Grazie. E' perfetto.

Discussione: [CSS] problemi con FIREFOX e MOZILLA

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] problemi con FIREFOX e MOZILLA

Permessi di invio