Topic: [CSS] problemi di padding!

[miki_naw]

Ciao a tutti,
sto impazzendo su questo css...spero possiate darmi una mano  

questo lo stile (uguale per lo stato visited, con bg diverso per lo stato
hover)

Codice: [Seleziona]

a.menusx:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
text-decoration: none;
padding-top: 5px;
padding-left: 10px;
padding-right: 0px;
background-image: url(img/menu_sx/button_off.gif);
height: 27px;
width: 161px;
margin:0px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
clip: rect( );
position:relative;
display:block;
background-repeat: no-repeat;
}


applicato a:

Codice: [Seleziona]

<table border="0" cellspacing="0" cellpadding="0" style="background-image:
url(img/menu_sx/background.gif); background-repeat:no-repeat;">
<tr>
<td><a href="#" class="menusx">La storia </a></td>
</tr>
</table>

In poche parole è una cella con dentro una scritta (la storia) che ha un
background-image in trasparenza. Al passaggio del mouse cambia l'immagine
di background. Questo funziona perfettamente sia in Mozilla che in IE.

Il problema è il padding assegnato, che mi permette di regolare il
posizionamento della scritta. In IE tutto ok. Mozilla aggiunge 10 px di
padding anche a destra, spostandomi tutto ciò che c'è dopo la cella di 10
px...come risolvere?


PS: un'immagine della visualizzazione errata la trovate qui

[klades]

Il link che hai messo richiede il login o sbaglio?
Non puoi dare un link "free"?
Ciao, Paolo

[miki_naw]

Il link che hai messo richiede il login o sbaglio?
Non puoi dare un link "free"?
Ciao, Paolo

ehm...chiedo scusa  

ECCOLA QUI

[the fly on the net]

Non hai un link dove provare la cosa?
Scusa ma così è difficile esserti di aiuto ...

[miki_naw]

Non hai un link dove provare la cosa?
Scusa ma così è difficile esserti di aiuto ...

grazie mille per la disponibilità.
ho uppato la pagina a questo indirizzo

il codice è visibile, css compresi. Lo scopo è quello di creare un mouse over in cui cambia l'immagine il colore (in trasparenza) di sfondo del bottone e la scritta slitta da sinistra a destra. Sotto IE si vede come dovrebbe venire (è quello il risultato), con FF invece il padding viene gestito male. Mi lascia 10 px di padding tra una cella e l'altra. Padding che aumenta ulteriormente con il mouseOver  

PS: il punto di aggancio dello stato mouse over deve essere necessariamente a destra, causa diverse lunghezze delle voci di menù.

[klades]

Mozilla/Firefox aggiungono il padding al width, IE no (quiz a premi: quale dei due sbaglia secondo voi???).
Sulla questione vedi ad es. http://webdesign.about.com/od/css/a/aaboxmodelhack.htm
Ridisegna la pagina tendendo conto di questo.

[the fly on the net]

Ah, ora ho capito

Leggi questo:
Visual formatting model details (css level 2.1)

In particolare la sezione 10.3.3 fa al caso tuo.

Detto questo, ti consiglio di scaricare l'estensione webdeveloper (in italiano su Extenzilla previa registrazione gratuita) - ha un'utile funzione "Contorna" > "Contorna elementi personalizzati" > Tag che ti permette di vedere le dimensioni effettive del tag (in questo caso "A").

PS: dichiarando il doctype dovresti riuscire ad ottenere un'uniformità di comportamento tra Firefox/IE/Opera

[klades]

PS: dichiarando il doctype dovresti riuscire ad ottenere un'uniformità di comportamento tra Firefox/IE/Opera

Ho letto questa cosa da qualche parte, ma mi sembra che qui con ie6 non cambi nulla ... e poi c'è sempre il problema di ie5.x

[the fly on the net]

PS: dichiarando il doctype dovresti riuscire ad ottenere un'uniformità di comportamento tra Firefox/IE/Opera

Ho letto questa cosa da qualche parte, ma mi sembra che qui con ie6 non cambi nulla ... e poi c'è sempre il problema di ie5.x

Dipende dal doctype che usi. Funziona con IE6.
Cercando su MSDN si trova tutto - non do il link dato che non siamo il forum di Exploder

Riguardo IE5 e le vecchie versioni tipo Netscape 4, personalmente non le supporto più. E' già difficile creare un sito FF/Opera/IE compatibile alle ultime versioni ...

[iacchi]

io di solito risolvo in questo modo:

width: tot !important; /* l'attributo important non viene interpretato da IE */
width: tot+10px; /* questo per impostare la differenza che ti serve per IE */

in questo modo tutti i browser tranne IE sfrutteranno solo la prima dichiarazione perché ha l'attributo important, mentre IE userà la seconda perché viene dopo la prima in ordine di dichiarazione

[the fly on the net]

Codice: [Seleziona]

width: tot !important; /* l'attributo important non viene interpretato da IE */
width: tot+10px; /* questo per impostare la differenza che ti serve per IE */

Può essere una soluzione, ma ha lo svantaggio che nel caso in cui il prossimo IE7 dovesse interpretare l'attributo !important, devi rimettere mano al codice  

[iacchi]

magari ci faranno il piacere di implementare un po' più correttamente il box modeling

[miki_naw]

ok ragazzi, per la serie...come far crollare certezze radicate in due post...HO RISOLTO  
scherzi a parte grazie mille, ho riprogettato la pagina sulla base delle indicazioni che mi avete dato e ora (devo ancora limare qualcosa) sembra che funzioni...devo riprogettare un pò il tutto però  

ecco il css rimodificato
-----------------------------------------------

Codice: [Seleziona]

a.menusx:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
width: 151px;
\width: 161px; /*IE5 and 6 in QUIRKS MODE*/
w\idth: 151px; /*IE6 in NON -QUIRKS MODE*/
height: 23px;
padding-left:10px;
padding-top:4px;
\width:
text-decoration: none;
background-image: url(img/menu_sx/button_off.gif);
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
display:block;
background-repeat: no-repeat;
}
a.menusx:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
width: 161px;
height: 27px;
\width: 161px; /*IE5 and 6 in QUIRKS MODE*/
w\idth: 151px; /*IE6 in NON -QUIRKS MODE*/
padding-left:10px;
padding-top:4px;
text-decoration: none;
background-image: url(img/menu_sx/button_off.gif);
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
display:block;
background-repeat: no-repeat;
}
a.menusx:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-image: url(img/menu_sx/button_on.gif);
width: 161px;
height: 27px;
\width: 161px; /*IE5 and 6 in QUIRKS MODE*/
w\idth: 151px; /*IE6 in NON -QUIRKS MODE*/
padding-right:10px;
padding-top:4px;
text-align:right;
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
display:block;
background-repeat: no-repeat;
}

PS: mi spiegate che vuol dire QUIRKS MODE?!? ho capito che quirks significa "trucchetto, scappatoia" ma non riesco a contestualizzarlo  


Edit: inserito il tag 'code' al codice.
Reb00t