Bug di IE che non riesco ad identificare

**Donald** · 14-12-2009, 01:34

Il design è molto semplice: un header a larghezza intera, sotto una barra di navigazione e sotto ancora il contenuto. Eppure IE6/7 aggiunge uno spazio bianco tra la barra di navigazione e il contenuto...

Qualcuno sa di quale bug di IE6/7 si tratta, e come eliminarlo? Ecco un esempio più o meno minimale di cosa sto parlando.

Codice html

codice:

<!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">

<head>
	<link rel="stylesheet" type="text/css" href="prova.css" />
</head>

<body>

<div id="header">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultricies pellentesque turpis vel commodo. Nam nibh justo, rhoncus ut fringilla sit amet, faucibus vel urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla tortor urna, tempor lacinia elementum sed, vehicula at odio. Morbi ac ipsum dolor. Quisque porta, erat id eleifend lacinia, velit diam interdum tortor, mollis suscipit ante massa ac nisi. Nullam nisi quam, molestie at porttitor vel, sagittis a lacus. Etiam molestie congue nulla, ac ornare felis tempor non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla quis eleifend ligula. Integer vitae dui ac quam elementum cursus eu et nunc. Vestibulum eu dapibus justo. Nullam mollis hendrerit purus sit amet tempor. Donec tellus arcu, tempor quis elementum sed, commodo vitae nunc. Sed velit ipsum, fringilla sit amet porttitor quis, luctus ac justo. Nam convallis ante felis. Donec hendrerit elementum sapien at placerat. Maecenas vel erat enim, eu blandit ipsum. 
</div>

<div id="navbar">
	<ul>
		[*]
			Home
		
		[*]
			Some link
		
	[/list]
</div>


<div id="main-text">
	

Lorem ipsum</p>
</div>

</body>
</html>

Codice CSS

codice:

body {
margin: 0;
padding: 0;
}

#header {
float: left;
}

#main-text, #navbar li {
background-color: #aeeeee;
}

#main-text {
float: left;
clear: left;
margin: 0;
width: 750px;
}

#navbar {
margin: 0;
padding: 0;
}

#navbar ul li {
display: inline;
float: left;
}

I colori sono messi solo per evidenziare lo spazio vuoto.

La mia soluzione, per ora, consiste nel servire a IE6/7 un css aggiuntivo con la sola riga

codice:

#main-text {clear: none !important}

che sicuramente funziona, fino a che qualcuno non ha uno schermo abbastanza largo per contenere affiancate sia la barra di navigazione che i contenuti...

**bionicoz** · 14-12-2009, 04:03

Non capisco bene perché tutti quei float e clear, peraltro anche con safari lascia lo spazio, nn solo con IE.
così cmq dovrebbe andare:

codice:

body {
margin: 0;
padding: 0;
}

#header {
background-color: olive;
margin: 0;
}

#navbar{
background-color: fuchsia;
margin: 0;
}

#navbar ul, #navbar li{margin: 0; padding: 0;}

#navbar li{display: inline;
}

#main-text {background-color: maroon;
width: 750px;
margin: 0;
}
#main-text p{margin: 0;
}

**Donald** · 14-12-2009, 20:05

Ovviamente quei float servono a qualcosa, nella pagina intera. Ho cercato di creare un esempio minimale, in cui tutte le regole CSS aggiuntive e il markup aggiuntivo non ci fossero, ma in cui si vedesse ancora il bug. È chiaro che posso riprodurre il risultato di questo esempio minimale senza i float, ma non è questa la mia domanda.

La mia domanda è cosa devo cambiare per far sì che IE visualizzi correttamente il mio esempio, senza cambiare esempio. :-) A volte si riesce a fare in modi insospettati, ad esempio rendendo qualche elemento inline ecc. Nel mio caso non ci sono riuscito, né ho trovato online riferimenti a questo bug.

Per inciso a me Safari visualizza tutto come mi aspetto, senza spazio in mezzo. Uso Safari 4.0.4 (531.21.10) su Windows XP.

Discussione: Bug di IE che non riesco ad identificare

Strumenti discussione

Ricerca discussione

Visualizza

Bug di IE che non riesco ad identificare

Permessi di invio