PROBLEMA FLOAT: differenza inspiegabile (per me) in IE7

**esotica** · 13-11-2009, 12.19.41

In FF mi disegna bene il DIV che contiene elementi FLOAT anche in altezza.
In IE7 (in IE8 mi dicono che va come FF) invece il DIV che contiene elementi FLOAT non viene disegnato in tutta la sua altezza -> cio' comporta che l'elemento div sotto inizia dove ci sono elementi FLOAT (del div sopra) che non sono stati inclusi nel div di appartenenza.

Ho provato a mettere dei "clear:both; e clear:right ma nulla.

Aiuti, consigli, suggerimenti o alto ... GRAZIE INFINITE.

Questo il codice HTML che si puo' copiare in un txt e provare sul proprio pc.

Codice HTML:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 

'http://www.w3.org/TR/html4/loose.dtd'>
<HEAD>
<STYLE TYPE='text/css'>
	DIV.laterale {margin:0 auto; margin-bottom:10px; text-align:left; font-size:10px; border:2px 

outset red; color:black; background-color:#DDDDDD;
 in-eight:100px;}

	DIV.laterale DIV.titolo {height:20px; font-size:15px; font-weight:bold; text-align:center; 

color:#666666; background-color:#F04040;}

	DIV.laterale UL {list-style-type:none;margin:0px;padding-left:3px;}
	DIV.laterale LI {margin-top:3px; height:15px;}
	DIV.laterale LI.piccolo {width:10px; float:left;}

	DIV.laterale DIV INPUT[TYPE="text"] {height:12px; width:100px; font-size:10px; border:1px 

solid black;}

	DIV.laterale DIV INPUT:focus {border-color: red;}
	DIV.laterale DIV INPUT:hover {border-color: red;}

	DIV.laterale DIV.comandi {margin:0 auto; text-align:center; height: 20px; width:161px; 

padding:0px;}
	DIV.laterale DIV.comandi A {height:20px; text-decoration:none; display:block; color:orange; 

text-align:center; font-size:14px; font-weight:bold; background-color:gray; border: 2px outset 

#DDDDDD;}

	DIV.laterale DIV.comandi LI.pulsanti {margin-right:2px; height:20px; width:20px; 

ackground-color:gray; float:left;}
	DIV.laterale DIV.comandi LI.dato {padding-top:4px; height:20px; width:40px; text-align:left; 

float:left;}
	DIV.laterale DIV.comandi LI.termina {clear:both; height:2px; width:100%; font-size:10px;}

	DIV.laterale DIV.comandi LI.pulsanti A:hover {background-color:#60C060; border:2px outset 

red;}
	DIV.laterale DIV.comandi LI.pulsanti A:focus {background-color:#40C040;}


	DIV.laterale LI.nome {text-align:center; width:80px; overflow:hidden; float:left;}
	DIV.laterale LI.dato {text-align:center; width:40px; float:left;}
	DIV.laterale LI.dato INPUT[TYPE='text'] {width:30px;}
	DIV.laterale LI.dato INPUT[TYPE='submit'] {height:16px; width:60px; background-color:orange; 

font-size:9px;}

	DIV.laterale DIV.termina {clear:both; height:5px; font-size:1px; background-color:white;}
</STYLE>
</HEAD>
<BODY>
	<TABLE STYLE='margin:0 auto; width:761px; background-color:#404000; border:2px solid 

yellow;'>
	<TR><TD><DIV STYLE='width:550px;'>&nbsp;</DIV>
	</TD>
	<TD>
		<FORM NAME='dati' ACTION='lavora.php' METHOD='POST'>
		<DIV CLASS='laterale'>
			<DIV CLASS='titolo'>Inserimento</DIV>

			<DIV CLASS='comandi' TYLE='lear:both;'><UL>
<LI CLASS='pulsanti'><A HREF='risultato.php?x=7#inizio' TABINDEX=1>7</A></LI>
<LI CLASS='pulsanti'><A HREF='risultato.php?x=8#inizio' TABINDEX=2>8</A></LI>
<LI CLASS='pulsanti'><A HREF='risultato.php?x=9#inizio' TABINDEX=3>9</A></LI>

<LI CLASS='piccolo'>&nbsp;</LI>
<LI CLASS='dato'>dato:</LI><LI CLASS='dato'><INPUT TYPE='text' NAME='d1' VALUE='' MAXLENGTH='5' 

TABINDEX=10></LI>
<LI STYLE='clear:right; height:24px;font-size:1px;'>&nbsp;</LI>

</UL><UL>
<LI CLASS='pulsanti'><A HREF='risultato.php?x=4#inizio' TABINDEX=4>4</A></LI>
<LI CLASS='pulsanti'><A HREF='risultato.php?x=5#inizio' TABINDEX=5>5</A></LI>
<LI CLASS='pulsanti'><A HREF='risultato.php?x=6#inizio' TABINDEX=6>6</A></LI>

<LI CLASS='piccolo'>&nbsp;</LI>
<LI CLASS='dato'>dato:</LI><LI CLASS='dato'><INPUT TYPE='text' NAME='d2' VALUE='' MAXLENGTH='6' 

TABINDEX=11></LI>
<LI STYLE='clear:right; height:1px;font-size:1px;'>&nbsp;</LI>

</UL><UL>
<LI CLASS='pulsanti'><A HREF='risultato.php?x=1#inizio' TABINDEX=7>1</A></LI>
<LI CLASS='pulsanti'><A HREF='risultato.php?x=2#inizio' TABINDEX=8>2</A></LI>
<LI CLASS='pulsanti'><A HREF='risultato.php?x=3#inizio' TABINDEX=9>3</A></LI>

<LI CLASS='piccolo'>&nbsp;</LI>
<LI CLASS='piccolo'>&nbsp;</LI>
<LI CLASS='dato'><INPUT TYPE='submit' VALUE='SPOSTA' TABINDEX=12></LI>
<LI STYLE='clear:right; height:1px;font-size:1px;'>&nbsp;</LI>

<!--<LI CLASS='termina'>- clear both - li -</LI>-->

</UL>
			</DIV>

			<DIV CLASS='termina'>- clear div -</DIV>

		</DIV>
		</FORM>

		<DIV CLASS='laterale' STYLE='clear:both;'>
			<DIV CLASS='titolo'>altro riquadro</DIV>
		</DIV>

	</TD></TR>
	</TABLE>
</BODY>
</HTML>

18-11-2009, 20.25.27

Può dipendere da molti fattori:
1) in primo luogo le versioni vecchie di ie non supportano alcune istruzioni di css di versioni recenti
2) I valori di margin e padding devono essere impostati per ogni direzione (destra, sinistra, sopra e sotto) e non solo quelle diverse da zero altrimenti i brower possono redimensionarli secondo le impostazioni predefinitite
3) etc

Ho fatto una prova sul mio server locale con chrome e ie6 e ho notato questo:
- I valori degli input text impostati nel css non vengono tenuti in conto da ie, così li visualizza molto più grandi e deve mandarli a capo sotto le righe dei pulsanti con i numeri
- Tutta l'impaginazione del tasto sposta non viene elaborata e manda sotto anche quello

Io ti consiglio di impaginare diversamente: levare completamente le tabelle e impaginare solo con i div(o viceversa, anche se personalmente preferisco i div alle tabelle) e togliere tutti i float e farne solo due:
Nel riquadro grigio uno di sinistra con float: left con dentro tutti i numeri e sempre nel riquadro grigio uno di destra con i campi input e il tasto sposta, in questo modo levi la possibilità che si dividano le righe di pulsantini con i numeri e rendi tutto più compatto.
Invece di andare a capo con i <LI> vuoti usa dei <p> così riesci a gestire meglio le interlinee e la posizione

**esotica** · 01-04-2010, 13.14.47

finalmente ho trovato il tempo di rimettere mano al codice... ho seguito i tuoi consigli e il risoltuto mi sembra OTTIMO !!!! GRAZIEEEEE

Anzi se vedi ancora qualcosa da sistemare, dimmelo. Ancora GRAZIEEEEEE

Codice:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 

'http://www.w3.org/TR/html4/loose.dtd'>
<HEAD>
<STYLE TYPE='text/css'>
	DIV.laterale {margin:0 auto; margin-bottom:10px; text-align:left; font-size:10px; border:2px outset red; color:black; background-color:#DDDDDD;}

	DIV.laterale DIV.titolo {height:20px; font-size:15px; font-weight:bold; text-align:center; color:#666666; background-color:#F04040;}

	DIV.laterale UL {list-style-type:none; margin:0px; padding-left:3px;}
	DIV.laterale LI {margin-top:3px; height:15px;}
	DIV.laterale LI.piccolo {width:10px; float:left;}

	DIV.laterale DIV INPUT[TYPE="text"] {height:12px; width:100px; font-size:10px; border:1px solid black;}

	DIV.laterale DIV INPUT:focus {border-color: red;}
	DIV.laterale DIV INPUT:hover {border-color: red;}

	DIV.laterale DIV.comandi {margin:0 auto; text-align:center; 
width:83px; height:80px; padding-left:5px; padding-right:5px; border-left:1px solid black; border-right:1px solid black; float:left;}
	DIV.laterale DIV.comandi A {height:20px; text-decoration:none; display:block; color:orange; text-align:center; font-size:14px; font-weight:bold; background-color:gray; border: 2px outset #DDDDDD;}

	DIV.laterale DIV.comandi LI.pulsanti {margin-right:2px; height:20px; width:20px; float:left;}
	DIV.laterale DIV.comandi LI.dato {padding-top:4px; height:20px; width:40px; text-align:left; float:left;}
	DIV.laterale DIV.comandi LI.termina {clear:both; height:2px; width:100%; font-size:10px;}

	DIV.laterale DIV.comandi LI.pulsanti A:hover {background-color:#60C060; border:2px outset red;}
	DIV.laterale DIV.comandi LI.pulsanti A:focus {background-color:#40C040;}


	DIV.laterale LI.nome {text-align:center; width:80px; overflow:hidden; float:left;}
	DIV.laterale LI.dato {text-align:center; width:40px; float:left;}
	DIV.laterale LI.dato INPUT[TYPE='text'] {width:30px;}
	DIV.laterale LI.dato INPUT[TYPE='submit'] {height:16px; width:60px; background-color:orange; font-size:9px;}

	DIV.laterale DIV.termina {clear:both; height:5px; font-size:1px; background-color:white;}
</STYLE>
</HEAD>
<BODY>
	<TABLE STYLE='margin:0 auto; width:761px; background-color:#404000; border:2px solid yellow;'>
	<TR><TD><DIV STYLE='width:550px;'>&nbsp;</DIV>
	</TD>
	<TD>
		<FORM NAME='dati' ACTION='lavora.php' METHOD='POST'>
		<DIV CLASS='laterale'>
			<DIV CLASS='titolo'>Inserimento</DIV>

			<DIV CLASS='comandi'><UL>
				<LI CLASS='pulsanti'><A HREF='risultato.php?x=7#inizio' TABINDEX=1>7</A></LI>
				<LI CLASS='pulsanti'><A HREF='risultato.php?x=8#inizio' TABINDEX=2>8</A></LI>
				<LI CLASS='pulsanti'><A HREF='risultato.php?x=9#inizio' TABINDEX=3>9</A></LI>

				<LI CLASS='pulsanti'><A HREF='risultato.php?x=4#inizio' TABINDEX=4>4</A></LI>
				<LI CLASS='pulsanti'><A HREF='risultato.php?x=5#inizio' TABINDEX=5>5</A></LI>
				<LI CLASS='pulsanti'><A HREF='risultato.php?x=6#inizio' TABINDEX=6>6</A></LI>

				<LI CLASS='pulsanti'><A HREF='risultato.php?x=1#inizio' TABINDEX=7>1</A></LI>
				<LI CLASS='pulsanti'><A HREF='risultato.php?x=2#inizio' TABINDEX=8>2</A></LI>
				<LI CLASS='pulsanti'><A HREF='risultato.php?x=3#inizio' TABINDEX=9>3</A></LI>
			</ul></div>
			<div class='comandi'><UL>
				<LI CLASS='dato'>dato:</LI><LI CLASS='dato'><INPUT TYPE='text' NAME='d1' VALUE='' MAXLENGTH='5' TABINDEX=10></LI>
				<LI CLASS='dato'>dato:</LI><LI CLASS='dato'><INPUT TYPE='text' NAME='d2' VALUE='' MAXLENGTH='6' TABINDEX=11></LI>
				<LI CLASS='dato'><INPUT TYPE='submit' VALUE='SPOSTA' TABINDEX=12></LI>
			</UL></DIV>

			<DIV CLASS='termina'>- clear div -</DIV>


		</DIV>
		</FORM>

		<DIV CLASS='laterale' STYLE='clear:both;'>
			<DIV CLASS='titolo'>altro riquadro</DIV>
		</DIV>

	</TD></TR>
	</TABLE>
</BODY>
</HTML>

Discussione: PROBLEMA FLOAT: differenza inspiegabile (per me) in IE7

LinkBack

Strumenti discussione

Display

PROBLEMA FLOAT: differenza inspiegabile (per me) in IE7

Regole di scrittura