Float E Ie.

[fickyz]

Buonanotte a tutti,
è appena emerso un problemino "crossbrowser" nella realizzazione della nuova release del mio sito.
Ho intenzione di attenermi fortemente alla DTD strict, nonchè alle fondamentali W3CAG per l'accessiblità. A quanto sembra fino ad ora ci so riuscendo alla perfezione!

Il problema sorge nel posizionamento del menu sinistro:

La pagina è così strutturata:

<DIV ID="INTESTAZIONE">Nome sito</div>

<div id="main" style="float:left;..."></div>
<div id="sinistra" style="float:left;..."></div>
<div id="contenuti" style="float:right;..."></div>
</div>
<div id="extra" style="float:right;..."></div>

In firefox se inserisco una lista di definizione nel div "sinistra" annidato in "main" tutto funziona correttamente: la lista si posiziona in alto all'interno del div.

In IE, invece la lista va giù, a fondo pagina! Come posso risolvere il problema?! :master: Mille grazie...notte!

[Renyp]

Mmmhhh..non capisco granchè, prova a postare un po' di codice css e html, magari si individua meglio il problema..
In ogni caso, ricorda che quando usi float per elementi non rimpiazzati - ossia elementi che non hanno di per sè delle dimensioni come le img -, come proprio i div, devi specificarne la larghezza..

[fickyz]

<div id="main">

<div id="content">
<div class="top_content"><h2><a name="main_content"></a>IN PRIMO PIANO</h2></div>
<h3>Lorem Ipsum dolor</h3>


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.</p>



<div class="top_content"><h2><a name="main_content"></a>PROSSIMAMENTE</h2></div>
<h3>Lorem Ipsum dolor</h3>


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.</p>




</div>
</div>

<div id="sx">
<div class="menu"><h4>Menu Prinpale</h4></div>
<ul class="menu">[*]Mito e storia[*]Come raggiungerci[*]Dove alloggiare[*]Da fare e vedere[*]Pubblicazioni[*]Monitoraggio acque[*]Bandiera blu 2006[/list]

<div class="menu" title="community"><h4>Community</h4></div>
<ul class="menu">[*]Le vostre foto[*]Palinuro Gallery[/list]


<div class="menu"><h4>Utilita'</h4></div>
<ul class="menu">[*]Indirizzi e numeri[*]Farmacie di turno[/list]
</div>

</div>

<div id="dx"></div>

e qui sotto il foglio di stile

/* DIV MAIN */
div#main {
float:left;
width:80%;
margin:0;
padding:0;
vertical-align:top;
}
/* DIV SX */
div#sx {
float:left;
width:25%;
margin:0;
padding:0;
}
/* DIV CENTER */
div#content {
float:right;
width:75%;
margin:0;
padding:0;
}
div.top_content {
width:100%;
height:30px;
background-image:url(../../images/bg/bg_primopiano.gif);
border:1px solid #006699;
background-repeat:no-repeat;
background-position:left,top;
}

/* DIV CONTENT MAIN */
div#content_main {
width:100%;
margin:0;
padding:0;
}
div#content_sx {
float:left;
width:48%;
margin:0;
padding:0;
}
div#content_dx {
float:right;
width:48%;
margin:0;
padding:0;
}
/* DIV DX */
div#dx {
float:right;
width:20%;
margin:0;
padding:0;
}

/*INTESTAZIONE MENU LATERALI */
div.menu {
width:95%;
height:1.7em;
background-color:#006699;
padding:0;
margin:0;
}
div.menu h4{
font-family:Trebuchet MS;
font-size:medium;
color:#FFFFFF;
padding-left:0.8em;
padding-top:0.1em;
margin:0;
}
/*MENU LATERALI CON ROLLOVER */
ul.menu {
width:95%;
list-style:none;
margin:0;
padding:0;
}
ul.menu li a {
display:block;
text-decoration:none;
text-align:left;
padding:0 0 0 0.5em;
height:1.8em;
line-height:1.7em;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:normal;
}
ul.menu li {
display:inline; }

ul.menu li a:link, ul.menu li a:visited {
background-color:#E5E5E5;
color:#000000;
border-bottom:1px solid #203C5E;
}
ul.menu li a:hover, ul.menu li:active {
background-color:#0099CC;
color:#ffffff;
text-decoration:underline;
border-bottom:1px solid #203C5E;
font-weight:bold;
}

è strano pure per me...non riesco a capire! Ho provato in tutti i modi, anche variando la grandezza dei div, includendo l'elenco menu in un altro div!

[Renyp]

se non ho capito male, il div casinista è quello con classe "sx", giusto?
Hai provato ad inserire come valore di width un valore assoluto, nel senso non in percentuale?

[fickyz]

Originariamente inviato da Renyp
se non ho capito male, il div casinista è quello con classe "sx", giusto?
Hai provato ad inserire come valore di width un valore assoluto, nel senso non in percentuale?

Non so se possa occorrermi un width predefinito perchè il layout non ha una grandezza predefinita, ma deve adattarsi alla risoluzione dello schermo! :master:

[fickyz]

che rabbia....firefox funziona, mozzilla funziona, opera funziona, netscape funziona...IE la solita pecora nera