box con ombreggiatura in explorer

[babeuf]

Salve, sto facendo un sito nel quale vi sono alcuni box con angoli arrotondati e un'ombreggiatura all'esterno dei lati destro ed inferiore. Il foglio di stile che ho creato non dà problemi con Firefox e Opera, mentre con explorer è naturalmente un altro discorso. Le ombreggiature infatti sono praticamente ingestibili, e non riesco a venire a capo di nulla.
Queste le regole del foglio di stile per le ombre:

-----------------------
/* DIV CHE CONTIENE BOX CON ANGOLI ARROTONDATI */
.shadow{
background: white url(../shadow.gif) right bottom no-repeat;/*QUESTA GIF DISEGNA INTERAMENTE L'OMBRA, TRANNE CHE PER LA PICCOLA CURVATURA SUPERIORE CREATA CON L'ELEMENTO SPAN SEGUENTE. L'IMMAGINE E' LARGA 130px E ALTA 1200px, PER ADATTARSI ALL'ALTEZZA VARIABILE DEI BOX*/
padding: 0px 5px 0px 6px;
margin: 0px 0px 0px -8px;
position: relative;
top: 5px;
right: 0px;
left: 10px;
}

/*SPAN CHE CARICA IMMAGINE DEL BORDO SUPERIORE ARROTONDATO DELL'OMBRA*/
.shadow span.shadow_up{
background: url(../shadow_topcorner.gif) right top no-repeat;
padding: 0px 5px 5px 5px;
margin: 0px 0px 0px -8px;
position: relative;
top: -5px;
left: 128px;
}

/*BOX CON BORDI ARROTONDATI CONTENUTO NEL DIV SHADOW*/
.mod_sx {
width: 128px;
background: #cedde9 url(../sx_down.gif) left bottom no-repeat;
color: inherit;
padding: 0px 5px 9px 5px;
margin: -20px -5px 0px -6px;
position: relative;
top: -5px;
right: 0px;
left: -7px;
}

/*HEADER CHE CARICA BORDI ARROTONDATI NELLA PARTE SUPERIORE DEL BOX*/
.mod_sx h3{
width: 131px;
background: #266da9 url(../sx_up.gif) left top no-repeat;
color: white;
padding: 2px 0px 2px 7px;
margin: 0px -5px 5px -5px;
position: relative;
top: 0px;
right: 0px;
left: 0px
}

---------------

In explorer, con queste regole le ombre non si vedono, perciò nel suo css ho specificato per il DIV shadow:

---------------
display: inline;
---------------

ma ho solo ottenuto di far apparire le ombreggiature in modo decisamente poco gradevole e scorretto. Modificando i parametri di posizionamento nel css per explorer non ottengo risultati significativi.
C'è qualcuno così gentile che, oltre ad aver avuto la pazienza di leggere fino a qui il mio messaggio, sia in grado di aiutarmi?

Grazie.

[Mich_]

E` un bug noto, che in IE il padding e` interno alla larghezza/altezza degli oggetti, mentre negli altri browser e` esterno. Dipende dal diverso box-model adottato.

Questo non si verifica in IE6 se usi XHTML Strict, che potrebbe quindi essere un modo per sistemare il tutto (se hai usato un linguaggio HTML che si presta ad essere upgradato).
Altrimenti devi rivedere il layout, facendo in modo da adattare le cose ai due brwoser.
Oppure fai un CSS specifico per IE, da linkare all'interno di commenti condizionali e che corregge le impostazioni per IE.

Trovi riferimenti per tutte queste tecniche tra i "link utili" del forum CSS.

[babeuf]

Grazie, ma probabilmente non sono stato abbastanza chiaro nel primo messaggio: ho creato un css specifico per IE, ma la modifica dei parametri di padding e di margine dei due box (.shadow e .mod_sx) non mi permette di ottenere nulla di utile. Inoltre la DTD che ho usato è la Strict ma, pur avendo IE6, il css che uso con Firefox e Opera non funziona bene per IE (inoltre vorrei produrre un layout gradevole anche su IE5).
Queste sono le regole per le ombre nel css per IE:

-------------
.shadow{
padding: 0px 3px 5px 5px;
margin: 0px 0px 0px -8px;
position: relative;
top: 5px;
right: 0px;
left: 8px;
bottom: 0px;
z-index: 100;
display: inline;
}

.shadow span.shadow_up{
padding: 0px 3px 5px 5px;
margin: 0px 0px 0px -8px;
position: relative;
top: -5px;
left: 128px;
z-index: 100;
display: inline;
}

.mod_sx {
padding: 0px 5px 9px 5px;
margin: -20px -5px 20px -6px;
position: relative;
top: -5px;
right: 0px;
left: -5px;
}

.mod_sx h3{
padding: 2px 0px 2px 7px;
margin: 0px -5px 5px -5px;
position: relative;
top: 0px;
right: 0px;
left: 0px
}

---------------

Sono modificate rispetto al css generale, ma come ho già detto, col css generale IE6 non dà buoni risultati pur essendo XHTML Strict valido. E' possibile che vi sia un altro elemento sul quale intervenire oltre al padding?

[Mich_]

Ricorda che IE legge il DOCTYPE solo se questo inizia con il primo carattere del file.
Quindi se hai un commento iniziale o il prologo XML IE va in quirk mode.
Il prologo in XHTML 1.0 si puo` omettere, e dati i problemi con IE6, io lo consiglio.

[babeuf]

Scusa Mich_, non trovo errori nella dichiarazione doctype, nel caso mi fosse sfuggito qualcosa la incollo qui di seguito... Naturalmente così inizia il documento, senza commenti precedenti o prologo xml...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">

Penso anch'io si tratti di una stupidaggine da qualche parte, ma sto diventando più scemo di quel che sono alla ricerca di una soluzione.

[Mich_]

Io non ho IE per provare, ma mi risulta (da varie cose lette, molte delle quali citate nei "link utili") che il box model in IE 6 (non i precedenti, pero`) si comporta standard con XHTML Strict.

L'unica cosa che mi viene in mente, e` provare a fare una validazione del codice HTML e CSS, per verificre se per caso non c'e` qualche errore di sintassi.


PS: ma l'arrotondamento come lo fai? Con dei DIV posizionati opportunamente? (mi pare di capire dal primo post)
Hai preso in considerazione di farlo con i Nifty? Forse nel tuo caso semplifica il codice CSS (a spese di un po' di JS), ma semplificare puo` essere la chiave per limitare il numero di bug di IE in cui incappi.

[babeuf]

Mi aspettavo anch'io che IE6 (per scrupolo ho anche ricontrollato quale fosse la mia versione: è la 6...) si comportasse in modalità standard. Sia il codice che i css sono validati senza neppure uno warning...
Per fare gli arrotondamenti ho messo delle gif di background in alcuni div nel css; avevo già letto nel forum dei Nifty corners, ma non avendo mai usato JS mi era più semplice lavorare così. Farò ancora qualche prova coi fogli di stile specifici per IE (anche se teoricamente non dovrebbero servire!). Poi, in caso, mi metterò a studiare JavaScript, anche se temo non sia semplice ottenere delle ombreggiature sfumate...

[Mich_]

Il bello dei "Nifty" e` che non occorre conoscere JS: si include il JS, si configurano una serie di variabili ed il gioco e` fatto (quasi ... forse se uno non consce i JS qualche difficolta` in piu` puo` incontrarla - comunque il programma si presenta molto semplice da inserire).

Nota che non sto sponsorizzando una tecnologia pittosto che un'altra, ma ho notato la semplicita` dei "Nifty", e soprattutto la pulizia del codice HTML quando vengono usati.
E non occorre definire le dimensioni dei box in anticipo (e questo a mio parere e` una cosa che vale molto, visto che di base non si puo` sapere quanto occupa un blocco che contiene del testo).