Problema su IE: Float Wrap?

**sigues** · 08-10-2006, 14:09

Salve a tutti, spero che qualcuno potrà aiutarmi a risolvere il problema che mi sta facendo dannare da diverse settimane.
Ho un layout liquido a due colonne, di cui la prima (div #sinistro flottante a sinistra) ha larghezza fissa a 280px mentre la seconda (div #corpoprinc) si deve espandere a coprire il resto.
titolo (#logo) e #menu si allineano a destra, e sono racchiusi in #barra ad altezza fissa; #menu ha position:absolute per allinearsi verso l'alto quando si ridimensiona la finestra (e non uscire così da #barra).

Con Firefox funziona come vorrei, mentre IExploder mi fa cascare un div sotto l'altro: quando viene ridimensionata la finestra, appena finisce la larghezza per contenere i div (vedi "titolo" in #logo) anziché apparire una barra di scorrimento orizzontale tutto il div #corpoprinc viene riposizionato sotto l'immagine nel div #sinistro.

Il problema si ripresenta, anche senza ridimensionare la finestra, se div #corpo contiene una tabella con width:100% (che non posso evitare di usare, trattandosi di thumbnail per una galleria in php)...

in questo secondo caso devo annidare #corpo in un div con width: 100% ed aggiustare i margini sfalsati, oppure sto sprecando fatica?

Se il doctype è giusto, c'è un modo di risolvere la cosa senza usare larghezze fisse?
ho letto attentamente le guide nella sezione css e mi sono documentato in tutti i più importanti siti che trattano bug di IE e affini: ormai mi sono fatto una cultura in materia ma tutti i metodi che ho tentato non hanno avuto successo.

ho caricato una pagina per lavorarci su all'indirizzo
http://xoomer.alice.it/sssputnik/test.html

ecco il codice html:

<!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" xml:lang="it" lang="it">
<head>
<title>TITOLO</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel='stylesheet' type='text/css' href='styletest.css' />
</head>

<body>

<div id="pagina">

<div id="sinistro">
[img]bigimage.gif[/img]
<div id="servizi">
</div>
</div>

<div id="corpoprinc">

<div id="barra">
<div id="logo">TITOLO
</div>
<div id="menu">
google
yahoo
google
yahoo
google
yahoo
google
yahoo
google
yahoo
</div>
</div>

<div id="corpo">
Benvenuti
</div>

</div>

<div class="clr">
</div>

</div>

</body>
</html>

e questo è il foglio di stile:

html, body {
scrollbar-face-color: #008866;
scrollbar-shadow-color: #772200;
scrollbar-highlight-color: #772200;
scrollbar-3dlight-color: #008866;
scrollbar-darkshadow-color: #772200;
scrollbar-track-color: #bbbbbb;
scrollbar-arrow-color: #772200;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background-color: #bbbbbb;
color: #772200;
}

#pagina {
float: left;
background-color: #bbbbbb;
height: 92%;
min-width: 640px;
width: auto;
}

*>div#pagina{height:auto; min-height: 92%; width: 100%;}

#sinistro {
float: left;
width: 280px;
background-color: #bbbbbb;
margin-left:0;
margin-top:0;
margin-bottom:0;
margin-right:-3px;
display: inline;
height: 100%;
}

*>div#sinistro{min-height: 100%; height:auto; margin-right: 0;}

#oginok {
max-width: 100%;
border: none;
margin: 0;
}

#servizi {
position: relative;
width: 240px;
top: 10px;
left: 20px;
margin: 0;
}

#corpoprinc {
border: none;
text-align: right;
margin: 0 0 0 -3px;
height: 100%;
min-width: 360px;
width: auto;
display: inline-block;
}

*>div#corpoprinc{min-height: 100%; height:auto; margin-left: 280px;}

#barra {
position: relative;
left: 0px;
height: 196px;
background-color: #008866;
border: none;
text-align: right;
}

#logo {
position: relative;
top: 20px;
margin-right: 30px;
background-color: #008866;
font-family: Impact, Charcoal, sans-serif;
font-size: 70px;
color: #772200;
}

#logo a {
color: #772200;
font-weight: normal;
text-decoration: none;
background-color: #008866;
}

#logo a:hover {
color: #bbbbbb;
font-weight: normal;
text-decoration: none;
background-color: #008866;
}

#menu {
position: absolute;
bottom: 0;
right: 20px;
margin: 20px 0px 20px 20px;
background-color: #008866;
color: #000000;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
}

#menu a {
font-weight: bold;
color: #772200;
text-decoration: none;
padding: 0px 10px 0px 10px;
background-color: #008866;
}

#menu a:hover {
font-weight: bold;
color: #bbbbbb;
text-decoration: none;
padding: 0px 10px 0px 10px;
background-color: #008866;
}

#corpo {
position: relative;
background-color: #bbbbbb;
border: none;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
text-align: justify;
font-size: 8pt;
color: #000000;
width: 100%;
}

a:link, a:visited, a:active {
text-decoration: none;
font-weight: bold;
color: #008866;
background-color: #bbbbbb;
}

a:hover {
text-decoration: none;
font-weight: bold;
color: #772200;
background-color: #bbbbbb;
}

img {
border: none;
}

.clr {
clear: both;
}

**sigues** · 13-10-2006, 17:52

allora, le ho provate davvero tutte ma sto perdendo la mia salute mentale

non ho notato un diverso comportamento portando il doctype a strict
ho seguito anche l'esempio nel manuale di G.Troiani (ne avevo trovato uno simile pure in rete)
Layout a 2 colonne, una fissa e l'altra liquida
ma non funziona (manco con l'height:0 della colonna liquida)
l'unica differenza è che il mio layout non ha header

1) Position absolute a #corpoprinc: non funziona la width in FF (rimane stretto a min-width:360px)

2) Float Right a #corpoprinc: non funziona la width in FF (e cmq su IE non va)

3) Position absolute a #logo, #menu, #corpo: ridimensionando, su IE si sovrappongono all'img e poi scendono. (se #corpo ha left: 0 non scende)

4) Position absolute a #barra e #corpo: su FF la width (cioè il fondale) di #barra scompare, e #corpo si sovrappone a barra; con width:100% #barra funziona e con top:196px #corpo non si sovrappone, ma su IE scendono; non cambia nulla mettendo left:0 a #barra

5) Usare il trucchetto * html #corpoprinc {
width: expression(document.body.offsetWidth - 400);}
crea dei flash e dopo una certa soglia su IE scende comunque

6) Annidare #corpoprinc in un div con overflow:auto: FF raddoppia il margine di 280px (va portato a 0), IE continua a scendere (se il div ha position:absolute, su FF si appiccica tutto a sx mentre IE raddoppia la width)

QUALCUNO MI AIUTI VI PREGO!!
almeno una piccola risposta, un barlume di speranza!

**sigues** · 17-10-2006, 11:12

grazie a tutti per il prezioso aiuto, questo forum è una vera miniera di consigli e non avrei potuto mai risolvere il mio problema (da solo) se mi fosse stato consigliato qualcosa (di diverso).
rischiavo addirittura di buttare 35 euro per il libro di G.Troiani

su "A List Apart" il layout "Holy Grail" e via ogni paura

**sonik_the_sonik** · 17-10-2006, 13:09

OT
Personalmente non credo di avere buttato 35 euro!!

Discussione: Problema su IE: Float Wrap?

Strumenti discussione

Ricerca discussione

Visualizza

Problema su IE: Float Wrap?

Possibili soluzioni, senza successo

Permessi di invio