Non capisco dove sbaglio...aiuto please !

enricoeur

Non capisco dove sbaglio...aiuto please !

Allora,

ho questo problema, sto modificando un template che ho acquistato fatto con foglio di stile .css, devo aggiungere un div con dentro una mappa, nel file .css ho insserito dunque

div#map_container { 
        float: center; 
        margin: 0; padding: 160px 10px 0 10px;
        width: 870px; height: 260px; }

Su firefox tutto ok, la mappa compare dove deve comparire ( 160 px sono lo spessore dell'area destinata al menu e all'heder del sito ), esattamente come dice il css, su IE, fa così, considera il padding come se fosse un margine con il div precedente e tira giù la mappa di 160 px. In sto modo mi ritrovo con uno spazio bianco di 160px in mezzo, tra l'heder del mio sito con il menu e la google map.

Qualche consiglio ?

Grazie

laburno

Ciao enricoeur,
IE interpreta male i padding. Se il padding superiore a 160 ti serve solo per fare spazio ad un menu, e se i posizionamenti lo consentono, dovrebbe poter essere possibile usare invece il margin (e risolveresti in maniera pulita).

Se sei vincolato ad usare il padding, puoi usare un hack per farlo interpretare correttamente da IE. Non te ne propongo neanche uno ma vado dritto ai commenti condizionali, perché usare hack sporca il codice ed è brutto.

Crea un foglio di stile che contenga solo gli elementi da correggere per IE. Poi nell'header del tuo documento html, inserisci:

[html]

[/html]

Tutto quello che è all'interno di questo commenti speciali è letto solo ed esclusivamente da Internet Explorer.
if lte IE7 è la condizione e significa "leggi il commento solo se il browser è una versione minore o uguale di Internet Explorer 7 (lower than or equal)". Esistono altre condizioni da utilizzare (una googlata e trovi tutto). In questa maniera mostri a IE un css fatto ad hoc per correggere i suoi bachi e lo nascondi dagli altri browser che interpretano tutto correttamente.

Per quanto riguarda il codice css da inserire in stile-per-ie.css è questo:

[html] div#map_container {
float: center;
margin: 0; padding: 160px 10px 0 10px;
width: 850px; height: 100px; }[/html]

Il problema è nell'interpretazione del box model. gli standard vorrebbero che quando si definisce height (o width) ad un elemento, in quel valore non sia incluso il padding, il margine e il bordo, ma solo la dimensione effettiva del contenuto. IE interpreta male e considera height l'area effettiva del contenuto più il padding.

Se ti interessa approfondire:
Commenti condizionali http://www.quirksmode.org/css/condcom.html
Box Model http://css.html.it/guide/lezione/28/il-box-model/