Newsgroup: it.comp.www.html
Titolo: CSS width e height su a:link

Ciao a tutti,
sapete dirmi perche' questo css non mi funziona su mozilla? (Il 
css-validator del w3c non da errori)
a:link {
     background: url(img/bottone_su2.jpg);
     background-position: center;
     background-repeat: no-repeat;
     text-decoration : none;
     color : Black;
     font-family : Arial, Helvetica, sans-serif;
     font-size : 10pt;
     text-align : center;
     font-weight: bold;
     padding: 8 px;
     width : 110 px;
     height: 35px;
}
a:hover {
     background: url(img/bottone_giu2.jpg);
     background-position: center;
     background-repeat: no-repeat;
}
Su Explorer va correttamente, su Mozilla e Netscape non mi prende gli 
attributi
     width : 110 px;
     height: 35px;
con il risultato che mi la dimensione del link e' pari alla lunghezza 
della scritta compresa tra <a> e </a> e la immagine di sfondo non si 
vede bene.
grazie
Mauro

 vede bene.
hai provato ad aggiungere questo?
a {
  display: block;
}
cambia qualcosa?
-- 
goldicus1970 AT 
yahoo.it
http://www.deelan.com

 cambia qualcosa?
si, certo, mi vanno a capo (pero' mi sembrano della dimensione giusta 
:-) ) ma io li voglio su una sola riga.
altre idee?
P.S. Se vuoi ti posto la pagina completa.
grazie
Mauro

> P.S. Se vuoi ti posto la pagina completa.
Secondo me fai prima a uploadare la pagina da qualche parte cosi vediamo
come si vede e vediamo anche il sorgente :)
--------------------------------
Inviato via 
http://usenet.libero.it

 
a quanto mi risulta gli inline element non hanno proprieta'
width & height. con "display: block" trasformi <a> in block
element, e questo acquista istantaneamente dei "super poteri"
come width & height.
ora, con:
a{
   display: block;
   float: left;
   width:100px;
}
qualcosa di buono dovresti riuscire a fare. immagino
tu voglia creare un top menu orozzontale, dove tutte
le voci di menu abbiano la stessa dimensione. cosi'
dovresti farcela.
ricordati di fare il reset del float, altrimenti
poi succedono cose brutte. il comando e'
"clear: both". la tecnica e descritta qui:
http://www.alistapart.com/stories/practicalcss/
http://www.constile.org/tips/recupero_float/
ciao.


 come si vede e vediamo anche il sorgente :)
Non saprei dove pubblicarla ...
comq e' questa:
Pagina web:
------------------------
<html>
<head>
<link rel="stylesheet" href="quasar.css" type="text/css">
</head>
<body>
<div align="center">
   <a href="azienda.htm" OnMouseOver="mostra(1)">Azienda</a>
   <a href="prodotti.htm" OnMouseOver="mostra(2)">Prodotti</a> <a 
href="offerte.htm" target="mainFrame">Offerte</a>
   <a href="area_tecnica.htm" target="mainFrame">Area Tecnica</a> <a 
href="area_riservata.htm" target="mainFrame">Area Riservata</a>
</div>
</body>
</html>
------------------------
Foglio di stile
------------------------
a:link {
     background: url(img/bottone_su2.jpg);
     background-position: center;
     background-repeat: no-repeat;
     text-decoration : none;
     color : Black;
     font-family : Arial, Helvetica, sans-serif;
     font-size : 10pt;
     text-align : center;
     font-weight: bold;
     padding: 8px;
     width : 110px;
     height: 35px;
}
a:hover {
     background: url(img/bottone_giu2.jpg);
     background-position: center;
     background-repeat: no-repeat;
}
------------------------
Ho tolto tutte le cose non necessarie ...
grazie a tutti
Mauro

 dovresti farcela.
Hai ragione, devo fare un menu' orizzontale con dei "bottoni" come 
sfondo dei link.
Funziona quasi bene ... nel senso che su mozilla non mi viene il teso 
centrato sul bottone. E qui scatta la seconda domanda:
come faccio a centrare verticalmente un testo in un "contenitore" ??
Avevo risolto in Explorer mettendo un padding di 8px sapendo quanto 
grande viene la gif ma su mozilla le dimensioni dei font sono diverse e 
non funziona.
grazie mille per l'aiuto.
P.s.
Ho trovato uno spazio web per un giorno o due, la pagina la potete vedere su
http://158.110.28.29/mau/index.htm

 
http://158.110.28.29/mau/index.htm


 ciao.
Intanto grazie infinite, mi hai dato moltissimi spunti per trovare LA 
soluzione.
Quello che mi hai scritto tu va benissimo, ma non e' proprio quello che 
cerco. Se vedi nella pagina che ho pubblicato vorrei avere l'effetto 
onMouseOver ma con il tuo codice non riesco a farlo,
ho aggiunto
#menu a:hover
{
   background: white url("img/bottone_giu2.jpg") center center no-repeat;
   width: 100px;
   margin-right: 20px;
   line-height: 50px;
}
ma ovviamente non funziona.
E' proprio obbligatorio utilizzare le liste? D'accordo che e' piu' 
strutturato ma mi fa degli strani effetti se metto un testo troppo lungo 
che eccede la lunghezza della mia gif.
ciao
Mauro