Spazio bianco tra i div

**Iwk_Batterio** · 21-02-2007, 22:47

Questa è la pagina 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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="stile.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="struttura">
		<div id="top">
			<div id="top_sinistra"></div>
			<div id="top_destra"></div>
			<div id="top_centro"></div>
		</div>
	</div>
</body>

</html>

E questo è il relativo CSS:

codice:

body {
  background-color : #FFFFFF;
  color : #000000;
  font : 12px Verdana, Arial, Helvetica, sans-serif;
  text-align : center;
  border: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}

#struttura {
  background-color : #FFFFFF;
  width : 97%;
  border-style:groove;
  border-width:1px;
  border-color : #000000;
  margin: 1% auto;
  min-width:760px;
}

#top {
  background-color : #FFFFFF;
  width : 100%;
}

#top_sinistra {
  background-image : url(immagini/struttura/top_sinistra.jpg);
  height : 190px;
  width: 189px;
  float:left;
  display:inline;
}

#top_centro {
  background-image : url(immagini/struttura/top_centro.jpg);
  height : 190px;
  width:auto;
  margin-left: 0px 0px 0px 189px;
}

#top_destra {
  background-image : url(immagini/struttura/top_destra.jpg);
  height : 190px;
  width:193px;
  float:right;
  display:inline;
}

Come mai tra i box top_sinistra, top_centro, top_destra mi lascia dello spazio bianco con IE6? Credo sia il bug dei 3px di IE 6 visto che non me lo fa nè con IE7 nè con firefox.. sì ma.. come lo sistemo? Ho cercato online delle soluzioni e mi sembra di aver capito che devo impostare al box top l'height dell'1% ma così facendo non si sistema nulla!

**Mich_** · 22-02-2007, 10:07

Togli il margin dal top_centro e mettici invece float:left.

Nota: il margin-left ha un solo valore, non puoi usarlo come se fosse margin.

**Iwk_Batterio** · 22-02-2007, 16:07

Ops sì.. ovviamente al posto di margin-left inizialmente ho provato con margin che supporta 4 valori.

Comunque rimuovendo margine mettendo float in questo modo:

codice:

#top_centro {
  background-image : url(immagini/struttura/top_centro.jpg);
  height : 190px;
  width:auto;
  float:left;
  border: 0px 0px 0px 0px;
}

Mi rimuove l'immagine di sfondo centrale (top_centro.jpg) e rimane un rettangolo bianco!

**Iwk_Batterio** · 23-02-2007, 15:18

up

**pictor** · 23-02-2007, 15:44

Mmmm è un caso che il div centrale non abbia il display:inline (che mi hai spiegato tu poco fa

) ?

Provare ad aggiungerlo magari risolve.....

Altro non saprei.... è un comportamento strano.... se è bianco prova a controllare se proprio non lo mostra o se magari il div viene modificato e non si vede lo sfondo (che però magari c'è).

Poi mi pare di aver letto di un bug di explorer con il background. Prova a cercare qualcosa.

**Iwk_Batterio** · 23-02-2007, 16:29

Ho provato ad aggiungere display: inline; ma non cambia nulla. Comunque io lo metto nei box flottanti perchè mi è stato consigliato così...

Se inserisco del testo nel box centrale con un semplice

Hello</p> allora effettivamente visualizzo l'immagine di background ma SOLTANTO nell'area in cui c'è il testo! Come faccio a fare in modo che mi venga comunque visualizzata tutta l'img di bg?

L'attuale css del box centrale è:

codice:

#top_centro {
  background-image : url(immagini/struttura/top_centro.jpg);
  height : 190px;
  width:auto;
  float:left;
  display:inline;
}

Non è un bug di IE.. lo fa anche firefox.
Ah, tra le tante cose... i 3px con IE 6 di bug sono spariti! Rimane solo da fare in modo che lo sfondo sia sempre e comunque visualizzato per intero nel box

**pictor** · 23-02-2007, 16:43

Mettigli i bordi a quel div.... guarda se effettivamente lo vedi interamente o se qualche parte è nascosta.

Inoltre prova a scrollare la pagina.... hai detto che non è solo un bug di explorer ma prova comunque. A volte a me spariscono le cose senza motivo, scollo per coprire la zona incriminata, riscrollo in su per tornarci e magicamente appare

Se gli imposti un colore di sfondo lo visualizza?

**Iwk_Batterio** · 23-02-2007, 22:01

Ok, il problema ora mi è chiaro, ma risolverlo è tutt'altro che facile:

- Tengo il box al centro flottante. A questo punto bisogna fare in modo che il box centrale occupi tutto lo spazio che ha a disposizione, fermandosi prima del box flottante a destra. E' possibile?

- Il box centrale non lo flotto. Funziona benissimo con tutti i browser tranne con IE6, per il quale devo trovare un modo per rimuovere lo spazio bianco che lo separa dai box flottanti.

Idee?

**Iwk_Batterio** · 24-02-2007, 15:02

up

Discussione: Spazio bianco tra i div

Strumenti discussione

Ricerca discussione

Visualizza

Spazio bianco tra i div

Permessi di invio