quell'assurdo spazio in IE...

**awd** · 18-04-2005, 01:42

porto in rilevo un problema che ho notato postando nella discussione http://forum.html.it/forum/showthrea...hreadid=818911

Abbiamo questo codice:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<title>Documento senza titolo</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
#container{ 
margin:0px; 
padding:0px; 
width:100px; 
background-color: #ff0000; 
border: 1px solid black;
} 
#sx{ 
margin:0px; 
padding:0px; 
float:left; 
width:30px; 
height:50px; 
background:#aaa; 
} 
#dx{ 
margin:0px; 
padding:0px; 
margin-left:30px; 
width:70px; 
height:50px; 
background:#e6e6e6; 
} 
</style> 
</head> 

<body> 
<div id="container"> 
<div id="sx">sx</div> 
<div id="dx">dx</div> 
</div> 
</body> 
</html>

in pratica abbiamo un div contenitore e due div al suo interno. il primo è flottato a sinistra e l'altro di conseguenza dovrebbe porsi alla sua destra visto che per le sue dimensioni si incastra giusto giusto nel contenitore! provato con firefox, opera o mozilla e funzionerà! con IE invece esso va a capo! :master:

allora facciamo la prova dello "gnugnu" e proviamo a togliere progressivamente del pixel alla width del div dx! 70...69...68...67!! cosa succede? ecco che ora il div si incastra ma....cos'è quello spazio rosso sulla sinistra???

guardate su firefox come dovrebbe essere realmente: lo spazio è sulla destra!
togliamo addirittura tutta la width in modo che si adatti in automatico!! stessa cosa!!

ci ho perso un po' di tempo (è l'una e mezza!!) per trovarne la causa! bene con il codice a questo punto (senza width di dx) proviamo a togliere le due altezze height:50px;.... magia!!! tutto a posto!!

VVoVe:

un'altra prova? andate a questa pagina: http://www.html.it/layout_css/layout_css_19.htm e visualizzate l'esempio creato con i css (http://www.html.it/layout_css/2cf.php?stile=2cfbase)! copiamo il codice e il css in una pagina e mettiamo degli sfondi colorati ai div container, navigation e content per distinguerli! bene a questo punto aggiungiamo due belle altezze
a content e navigation e...ecco là il solito spazio che salta fuori!!!

Conclusione:
inutile precisarlo, se mettiamo le altezze ai div IE mette di mezzo sto assurdo spazietto! Io ho messo su tutto questo spettacolo e poi magari è una cosa già nota...mah speriamo di no, così mi daranno un premio!

il motivo per cui lo fa? qualcuno lo sa?

**carp** · 18-04-2005, 08:55

guarda qui:
http://pro.html.it/articoli/id_525/idcat_8/pro.html

**colde** · 18-04-2005, 10:27

Mah, per quanto mi riguarda la storia dell'altezza in relazione allo spazio maledetto, non mi ero ancora accorto. Per quanto riguarda gli hack, personalmente preferirei non utilizzarli; non mi danno l'impressione di crossbrowser quindi rimango un po restio. E' una mia fissa?

**floyd46** · 18-04-2005, 11:35

se tu scrivi questo codice:
#dx{
margin:0px;
padding:0px;
margin-left:30px;
width:70px;
height:50px;
background:#e6e6e6;
}
il div non avrà + width: 70px ma 100px.
Se tutto il contenitore è 100px, è normale che vada a capo, o no?
E' la regola del box model.
Mi pare che ho risposto in un altro 3d a questa domanda, scrivendo 2 esempi: 1 con bordi e l'altro senza.
ciao

**awd** · 18-04-2005, 12:58

Non floyd non è così, devi considerare che alla sua sinistra c'è il div sx! se sono 100px ci dovrebbe stare giusto dentro, come infatti fa in firefox! (stiamo parlando di IE6 funzionante non in quirk)

@carp grande, ora me lo studio!

**floyd46** · 18-04-2005, 14:32

scusa awd, ma non sono d'accordo con te:
che alla sinistra di quel contenitore ce ne sia un altro, poco importa. Ma nn per me, sia chiaro ma stando a quanto interpretato dai browser attraverso il codice CSS.
se tu scrivi questo codice:
#dx{
margin:0px;
padding:0px;
margin-left:30px;
width:70px;
height:50px;
background:#e6e6e6;
}
il suddetto div sarà largo (width) 100px.
i margini, i bordi ed il padding sono elementi additivi.
E pensa che se avessi dichiarato un margin-right, o un border-right o un padding-right, avresti dovuto sommare, ai 100px, anche le misure delle proprietà del lato destro.
E non lo dico io ma un luminare (Tantek) che ha risolto il problema del box model. Considerando questa basilare regola dei div, mi sono trovato sempre bene sia in IE, sia in Opera, sia in Mozilla che in FF. Testo le pagine su questi 4 browser.
ciao

**awd** · 18-04-2005, 18:19

mmm non ci capiamo mi sa...forse non mi sono spiegato bene io!
questo non è un problema di box model! io ho visto sta cosa su IE6 con il doctype che ho postato che lo fa funzionare non in quirk ma in standard mode, ossia con la corretta interpretazione del box model!
giustamente la somma di width + margin-left del div dx danno un totale di 100px, cioè l'esatta larghezza del contenitore e quindi dovrebbe starci esattamente! che poi container abbia un bordo di 1 px non conta perché, x il box model, è esterna alla'area del contenuto! in totale il contenitore è largo 102 px!
e come ha giustamente postato carp ecco il problema in questione con la relativa soluzione http://pro.html.it/articoli/id_525/i...pag_2/pag.html!

**carp** · 18-04-2005, 18:40

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container{
margin:0px;
padding:0px;
width:102px;
background-color: #ff0000;
border: 1px solid black;
voice-family: "\"}\"";
voice-family:inherit;
width:100px;
} html>body #container{width:100px;}
#sx{
margin:0px;
padding:0px;
float:left;
width:30px;
height:50px;
background:#aaa;
float:left;
display: inline;
}
#dx{
margin:0px;
padding:0px;
width:70px;
height:50px;
background:#e6e6e6;
float: left;
}

</style>
</head>

<body>
<div id="container">
<div id="sx">sx</div>
<div id="dx">dx</div>
</div>
</body>
</html>

potresti adottare questa soluzione,
però giustamente con firefox il contenitore
non si estende sotto i div sx e dx.

dovresti aggiungere un altro elemento che faccia il clear del float

**awd** · 18-04-2005, 19:16

eh flottandoli entrambi FF si comporta così, ma alla fine credo che abbia ragione, anche se in questo caso è più comodo IE!
Mettere inline a sx avevo già provato, non fa nessun effetto!
Il child selector l'hai messo per rafforzare la larghezza a 100 senza che lo veda IE?
perché hai messo un pezzo in xhtml non l'ho capito però, visto che il codice era in html!

**carp** · 18-04-2005, 19:27

hai ragione.. che tonto!

il display: inline non c'entra nulla..

ciao

Discussione: quell'assurdo spazio in IE...

Strumenti discussione

Ricerca discussione

Visualizza

quell'assurdo spazio in IE...

Re: quell'assurdo spazio in IE...

Permessi di invio