problemi di visualizzazione su Internet Explorer

**38xela** · 10-01-2008, 18:40

salve,
fino ad ora ho testato il mio codice su Firefox e non mi ha mai dato problemi di visualizzazione, cosa che invece è successa con Explorer (dovrebbe essere 6.0).
ecco l'html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Sito</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body>
<div id="container">
<div id="header">
<h1>Sito</h1>
<h2>Informazioni</h2>
</div>
<div id="navigation">
<ul>
[*]Home
[*]Catalogo
[*]Autori
[/list]
</div>
<div id="frame">
<div id="menu_sx">
<h3>Dati per il Login</h3>
<form id="login" method="POST" action=".php" name="login">
<div>
<div>
E-Mail
<input type="text" id="formlogin" name="username" />

Password
<input type = "password" id="formlogin" name="password" />
</div>

<input type="button" id="submitlogin" name="invia" onclick="controllo()" value="Accedi" />
</div>
</form>
<div id="venduti">
<[venduti]>
</div>
<form id="ricerca" method="POST" action=".php" name="ricerca">
<div>
<div>
Ricerca Libro
<input type="text" id="formricerca" name="titolo" />
</div>

<input type="button" id="submitricerca" name="invia" onclick="controllo()" value="Cerca" />
</div>
</form>
</div>
<div id="menu_dx">
<div id="news">
<[news]>
Ultime Notizie
</div>
<div id="boh">
<[boh]>
Spazio Vuoto
</div>
Newsletter
</div>
<div id="contenitore"> <[contenitore]> </div>
<div id="footer"> </div>
</div>

</div>

</body>
</html>

ed ecco il css:

#container{
position: absolute;
left: 10%;
width: 80%;
height: 100%;
}

#header{
height: 100px;
background-color: #CD5C5C;
}

#navigation{
min-height: 20px;
background-color: #F08080;

}

#navigation ul {
margin:0;
padding:0;
overflow: hidden;
height: auto;
}

#navigation li {
float:left;
display: inline;
border-left: 1px #4a4a4a solid;
height: 20px;
margin:-1px;
padding: 0;
list-style-type:none;
white-space:nowrap;

}

#navigation li a {
display:block;
padding: 0 18px;
font-size:0.9em;
letter-spacing: 0.7px;
text-decoration : none;
}

#frame{
position: relative;
background-color: #F4A460;
}

#menu_sx{
float: left;
width: 25%;
background-color: #20B2AA;
}

#login {
top: 0px;
padding-left: 10px;
}

#login #formlogin {
height:1.8em;
width:150px;
margin:2px 2px 0 0;
padding:2px;
border:1px solid;
font-size:1em;
vertical-align:middle;
}

#login #submitlogin {
height:1.8em;
width:60px;
margin:0px 2px 10px 0;
border:1px solid;
font-size:0.8em;
vertical-align:middle;
float : right;
}

#venduti{
margin-top: 30px;
min-height: 300px;
background-color: #F08080;
padding-bottom: 60px;
}

#ricerca {
margin-top: 20px;
padding-left: 10px;
}

#ricerca #formricerca {
height:1.8em;
width:150px;
margin:2px 2px 0 0;
padding:2px;
border:1px solid;
font-size:1em;
vertical-align:middle;
}

#ricerca #submitricerca {
height:1.8em;
width:60px;
margin:0px 2px 10px 0;
border:1px solid;
font-size:0.8em;
vertical-align:middle;
float : right;
}

#contenitore{
border: 1px #4a4a4a solid;
min-height: 200px;
background-color: #E0FFFF;
margin: 0 25% 0 25%;

}

#menu_dx{
float: right;
width: 25%;
background-color: #87CEFA;
}

#news{
min-height: 300px;
background-color: #20B2AA;
}

#boh{
min-height: 200px;
background-color: #CD5C5C;
}

#footer{
clear: both;
height: 5%;
bottom: 1em;
background-color: #483D8B;
}

allora:
- il div "navigation" perde il colore di background,
- i div "menu_sx" e "menu_dx" spariscono insieme al loro contenuto

...e diciamo che per ora basta. scusate per la mole di codice ma credo sia necessaria.
grazie in anticipo per l'aiuto.

**ResianTaxidrive** · 11-01-2008, 12:20

ho aggiunto

codice:

.closer {
	line-height: 0.1px;
	clear: both;
	float: none;
}

poi per gli altri stili ho provato a mettere dei float qua e la

codice:

#container{
position: absolute;
left: 10%;
width: 80%;
height: 100%;
}

#header{
height: 100px;
background-color: #CD5C5C;
}

#navigation{
	min-height: 20px;
	background-color: #F08080;
	float: left;
	clear: both;
}

#navigation ul {
margin:0;
padding:0;
overflow: hidden;
height: auto;
}

#navigation li {
float:left;
display: inline;
border-left: 1px #4a4a4a solid;
height: 20px;
margin:-1px;
padding: 0;
list-style-type:none;
white-space:nowrap;

}

#navigation li a {
display:block;
padding: 0 18px;
font-size:0.9em;
letter-spacing: 0.7px;
text-decoration : none;
}



#frame{
	position: relative;
	background-color: #F4A460;
	float: left;
	width: 100%;
}



#menu_sx{
float: left;
width: 25%;
background-color: #20B2AA;
}

#login {
top: 0px;
padding-left: 10px;
}

#login #formlogin {
height:1.8em;
width:150px;
margin:2px 2px 0 0;
padding:2px;
border:1px solid;
font-size:1em;
vertical-align:middle;
}

#login #submitlogin {
height:1.8em;
width:60px;
margin:0px 2px 10px 0;
border:1px solid;
font-size:0.8em;
vertical-align:middle;
float : right;
}

#venduti{
	margin-top: 30px;
	min-height: 300px;
	background-color: #F08080;
	padding-bottom: 60px;
	float: left;
	width: 100%;
}

#ricerca {
	margin-top: 20px;
	padding-left: 10px;
	float: left;
}

#ricerca #formricerca {
height:1.8em;
width:150px;
margin:2px 2px 0 0;
padding:2px;
border:1px solid;
font-size:1em;
vertical-align:middle;
}

#ricerca #submitricerca {
height:1.8em;
width:60px;
margin:0px 2px 10px 0;
border:1px solid;
font-size:0.8em;
vertical-align:middle;
float : right;
}

#contenitore{
	border: 1px #4a4a4a solid;
	min-height: 200px;
	background-color: #E0FFFF;
	margin: 0 25%;
}

#menu_dx{
float: right;
width: 25%;
background-color: #87CEFA;
}

#news{
min-height: 300px;
background-color: #20B2AA;
}

#boh{
	min-height: 200px;
	background-color: #CD5C5C;
	float: right;
}
.closer {
	line-height: 0.1px;
	clear: both;
	float: none;
}
#footer{
clear: both;
height: 5%;
bottom: 1em;
background-color: #483D8B;
}

il closer l'ho applicato in

codice:

<div id="frame">
<div id="menu_sx">
<h3>Dati per il Login</h3>
<form id="login" method="POST" action=".php" name="login">

<div><p class="closer"></p>
<div>

a sinistra viene abbastanza bene a destra non mi viene. Non ho capito come mai i box a destra hanno quella altezza in FF, dove viene impostata?
Comunque secondo me dovresti ripartire dall'inizio e controllare per ogni cosa che aggiungi che funzioni in IE e in FF.

**38xela** · 11-01-2008, 15:47

grazie,
proverò a vedere come si comporta con questi cambiamenti e ti farò sapere.
Per quanto riguarda le altezze dei box a destra a cosa ti riferisci?
E comunque si, anch'io credo che la soluzione migliore sia quella di rifare tutto da capo, anche se speravo di no...

**ResianTaxidrive** · 11-01-2008, 16:05

In firefox vedo che le caselle menudx, news e boh hanno una certa altezza, non sono a filo testo, per intenderci. Non capisco perchè...
scusa, ora vedo che c'è il min-heigth, guardando gli stili con DW non lo vedevo; ma non sarà proprio il min-height che fa casino? sembra che ie non lo calcoli minimamente.

Cmq tante volte si sta meno a rifare da capo che non modificare, anche a me è capitato di non venirne fuori mentre rifacendo da capo funzionava bene. Cerca di mettere meno proprietà possibile e verificale passo passo.

Discussione: problemi di visualizzazione su Internet Explorer

Strumenti discussione

Ricerca discussione

Visualizza

problemi di visualizzazione su Internet Explorer

Permessi di invio