errore in ie con float left

wer16 · 26 Nov 2009

Ciao a tutti,
premesso che sono alle prime armi con gli stili in html e quindi un po' imbranato..

ho creato una pagina html con dreamweaver CS4 che dovrebbe visualizzare un numero 'x' di immagini con delle descrizioni, in due layer separati.
ho utilizzato degli oggetti con float:left; per visualizzarli in sequenza orizzontale ma in i.e. li vedo in verticale e completamente scombinati!
con Dreamweaver e Firefox invece e' tutto ok!

posto il codice, qualcuno di voi mi puo' aiutare a capire il perchè? :dipser:
ho letto di inserire
display : inline; ma non cambia nulla....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PROVA LAYER</title>

<STYLE type="text/css">

#pagina1{
position : absolute;
display : block;
width : 1400px;
top : 0px;
left : 0px;
z-index:0;
}
#centrale1{
position : absolute;
display : block;
width : 1016px;
left : 192px;
z-index: 1;
top: -1px;
}
#layer1
{
float:left;
clear:left;
display : inline;
margin-top: 12px;
margin-left: 20px;
margin-bottom: 12px;
margin-right: 1px;
width : 976px;
height : 306px;
background-image: url(sfondo_1.jpg);
z-index:2;
}
#layer2
{
float:left;
clear:left;
display : inline;
margin-top: 12px;
margin-bottom: 10px;
margin-left: 20px;
width : 976px;
height : 600px;
background-image: url(sfondo_2.jpg);
z-index:2;
}

.pagina_1{
height : 2030px;
}
.centrale_1{
height: 1350px;
}
.quadrato_img
{
margin-top: 9px;
margin-left: 11px;
}
.quadrato_titolo
{
font-family: "Trebuchet MS";
text-align: left;
color: #333333;
font-size: 18px;
font-weight: normal;
width : 234px;

}
.quadrato_testo
{
font-family: "Trebuchet MS";
text-align: left;
color: #000000;
font-size: 12px;
font-weight: normal;
line-height:16px;
width : 234px;
}
.postit{width:100%;overflow:auto;}
.postit h4
{
float:left;
display : inline;
margin-top: 62px;
margin-left: 1px;
width : 426px;
height : 208px;
border: 0;
overflow: hidden;
}
.postit h4:hover { background-color: #E5E5E5; }
.postit h3
{
float:left;
display : inline;
margin-top: 62px;
margin-left: 1px;
width : 255px;
height : 208px;
border: 0px;
overflow: hidden;
}
.postit h3:hover { background-color: #E5E5E5; }
.postit h2
{
float:left;
display : inline;
margin-top: 62px;
margin-left: 21px;
margin-right: 21px;
width : 1px;
height : 208px;
border: 0;
overflow: hidden;
background-color: #CECECE;
}
.postit h1
{
float:left;
display : inline;
margin-top: 62px;
margin-left: 21px;
margin-right: 0px;
width : 1px;
height : 208px;
border: 0px;
overflow: hidden;
}
.postit div
{
float:left;
display : inline;
}

</STYLE>
</head>
<body>
<div id="pagina1" class="pagina_1">
<div id="centrale1" class="centrale_1">

<div id="layer1">
<div class="postit">
<h1></h1>
<h1></h1>
<h3>
<div class="quadrato_img"><img src="img_234.jpg" width="234" height="108" /><div>
<div class="quadrato_titolo">Lorem ipsum</div>
<div class="quadrato_testo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</h3>
<h2></h2>
<h3>
<div class="quadrato_img"><img src="img_234.jpg" width="234" height="108" /><div>
<div class="quadrato_titolo">Lorem ipsum</div>
<div class="quadrato_testo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</h3>
<h2></h2>
<h3>
<div class="quadrato_img"><img src="img_234.jpg" width="234" height="108" /><div>
<div class="quadrato_titolo">Lorem ipsum</div>
<div class="quadrato_testo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

</h3>
</div>
</div> 

<div id="layer2">
<div class="postit">
<h1></h1>
<h1></h1>
<h4>
<div class="quadrato_img"><img src="img_405.jpg" width="405" height="106" /><div>
<div class="quadrato_titolo"> </div>
<div class="quadrato_testo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</h4>
<h1></h1>
<h4>
<div class="quadrato_img"><img src="img_405.jpg" width="405" height="106" /><div>
<div class="quadrato_titolo"> </div>
<div class="quadrato_testo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</h4>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h3>
<div class="quadrato_img"><img src="img_234.jpg" width="234" height="108" /><div>
<div class="quadrato_titolo">Lorem ipsum</div>
<div class="quadrato_testo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</h3>
<h2></h2>
<h3>
<div class="quadrato_img"><img src="img_234.jpg" width="234" height="108" /><div>
<div class="quadrato_titolo">Lorem ipsum</div>
<div class="quadrato_testo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</h3>
<h2></h2>
<h3>
<div class="quadrato_img"><img src="img_234.jpg" width="234" height="108" /><div>
<div class="quadrato_titolo">Lorem ipsum</div>
<div class="quadrato_testo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

</h3>
</div>
</div> 

</div>
</div>

</body>
</html>

wer16 · 26 Nov 2009

allego un'immagine della pagina per spiegarvi il mio problema...
help!

wer16 · 27 Nov 2009

Risolto

stupidaggine galattica
mi sono dimenticato di chiudere un div
:dormo::dormo::dormo:

Cerca

Cerca

errore in ie con float left

wer16

Nuovo Utente

wer16

Nuovo Utente

Allegati

wer16

Nuovo Utente

Discussioni simili