problema height con CSS solo in IE

[james]

Ho creato una semplice immagine, alta 10px, ho creato un div a cui ho impostato le seguenti proprietà:

height:10px;
margin:0px;
padding:0px;
background-image:url(images/navigation_bg_up.jpg);
background-repeat:no-repeat;
background-color:#CCC;

mi spiegate per quale motivo con Firefox e Opera il box occupa 10px in altezza ed in IE no?!

[Jerry Masslo]

anche se aggiungi:

line-height:0

?

[james]

Originariamente inviato da Jerry Masslo
anche se aggiungi:

line-height:0

?

ho provato ma è uguale

[james]

a prescindere dell'immagine, posso anche ometterla, se creo una cosa del genere:

<style type="text/css">
div#prova {
width: 760px;
height: 0px;
margin: 0px auto;
padding: 0px;
background-color: #CCC;
line-height: 0px;
}
</style>

<div id="prova"></div>

con IE il div non ha altezza pari a zero, cioè, è come se ci fosse un'altezza minima con IE (possibile che questo browser faccia sempre come gli pare?! o sono io che ho omesso qualcosa?)

[Jerry Masslo]

metti un non breaking space dentro il div, se lo lasci vuoto fa come dici tu.

[Marcolino's]

No con IE c'è sempre un'altezza minima, mentre gli altri, se non definisci un'altezza non ti fanno vedere il livello.
Però proprio oggi ho letto su un altro forum, un intervento di G. Troiani al riguardo, in cui metteva in evidenza il fatto che Mozilla e figli, modificano il loro modo di interpretare il codice in funzione della DTD, interpretando l'altezza in modo differente se usi una DTD rigorosa piuttosto che una di transizione.

gianluca Troiani
Bene.
In realtà non è un fatto misterioso, credo dipenda da come Mozilla gestisca le immagini in linea e il testo che le affianca.
Se infatti si usa un'immagine con 'display:block', questa non presenta alcun margine. Dunque ho cercato di risolvere con l'unica proprietà che poteva essere utile: 'vertical-align'. Con alcuni valori il problema si presenta, con altri no.

Ovviamente è un problema leggermente diverso, ma spiega abbastanza bene il modo di operare di Gecko:
http://forum.diodati.org/messaggi.asp?f=2&id=2280

[james]

Originariamente inviato da Jerry Masslo
metti un non breaking space dentro il div, se lo lasci vuoto fa come dici tu.

Non lo sapevo, grazie mille, non sapevo più a cosa pensare, io non mettevo il classico perchè credevo che avesse lui stesso un altezza, non si finisce mai di imparare.

[james]

Originariamente inviato da Marcolino's
No con IE c'è sempre un'altezza minima, mentre gli altri, se non definisci un'altezza non ti fanno vedere il livello.
Però proprio oggi ho letto su un altro forum, un intervento di G. Troiani al riguardo, in cui metteva in evidenza il fatto che Mozilla e figli, modificano il loro modo di interpretare il codice in funzione della DTD, interpretando l'altezza in modo differente se usi una DTD rigorosa piuttosto che una di transizione.


Ovviamente è un problema leggermente diverso, ma spiega abbastanza bene il modo di operare di Gecko:
http://forum.diodati.org/messaggi.asp?f=2&id=2280

Thanks per la puntualizzazione.

[james]

scusate ma pensavo di aver risolto, invece il problema è doppio. Il div di prima era seguito da un altro, non ci dovrebbero essere spazi tra i due div, dovrebbero essere attaccati dato che hanno margin e padding a 0, eppure non si toccano, perchè?!

div#navigation_up {
height:10px;
margin:3px 0px 0px 0px;
padding:0px;
background-color:#CCC;
line-height:0px;
}
div#navigation {
margin:0px;
padding: 0px;
background-color:#CCC;


<div id="navigation_up"></div>
<div id="navigation"></div>

[james]

dipende dal line-height, se lo specifico uguale a 0 il div ha l'altezza esatta che specifico nel height, però poi ho una sorta di margin sotto, se non lo specifico il margin sotto non ce l'ho però la riga non è alta quanto dico io ma quanto dice IE, una soluzione c'è?