2 colonne: i div scendono su IE

**sigues** · 22-09-2006, 02:33

ciao a tutti!
ho un problema col layout che mi sta facendo impazzire, spero che qualcuno qui possa aiutarmi.
sto preparando un tema per flatnuke, con firefox si comporta tutto come vorrei, ma le noie arrivano come al solito con IE:

ho caricato una pagina ripulita dal codice a questo indirizzo, se preferite copio&incollo direttamente nel forum.

-se provo a ridimensionare la finestra, una volta che non c'entra più in larghezza il TITOLO, tutto il div "corpoprinc" scende sotto il float sinistro
-il problema si presenta anche senza ridimensionare la finestra del browser, quando dentro il div "corpo" metto una tabella per delle thumbnails con width 100% (deborda dal div?)

*nota: il footer non posso racchiuderlo, ad esempio in "pagina", a causa di flatnuke e per questo ho risolto in parte con le percentuali

ho consultato una marea di articoli e ho tentato un sacco di espedienti (come ad esempio creare un min-width per explorer attraverso margini negativi), ma l'unico risultato è che ora ho un sacco di confusione e non riesco nemmeno a capire quale sia la radice del problema.

AIUT!!!!

**sigues** · 22-09-2006, 18:56

...aggiungo dettagli quindi non è solo un "up"

html più o meno ripulito dal php:

<html lang="it">
<head>
<title>TITOLO</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="expires" content="0">
<meta name="resource-type" content="document">
<meta name="distribution" content="global">
<meta name="author" content="Me">
<meta name="copyright" content="Copyright (c) 2006 by TITOLO">

<link rel='StyleSheet' type='text/css' href='style.css'>

</head>

<body bgcolor="#bbbbbb">

<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">
<div class="motd">[img]themes/test/images/motd.png[/img]Benvenuti</div> </div>
</div>

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

</div>
<div class="footer" align="center">
<a href="http://validator.w3.org/check/referer" target="_blank">
Valid HTML!</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">
Valid CSS!</a>

<a href="feed.xml" target="_blank">
Get RSS 2.0 Feed</a>
<a href="mailto:xxx@xxx.xxx">
Mail me!</a>

Tutti i marchi registrati e i diritti d'autore in questa pagina appartengono ai rispettivi proprietari.
</div>

</body>
</html>

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%;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
color: #772200;
}

#pagina {
position: relative;
background-color: #bbbbbb;
height: 92%;
width: 100%;
}

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

#sinistro {
position: relative;
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 {
position: relative;
width: 280px;
height: 340px;
border: none;
margin: 0;
}

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

#corpoprinc {
position: relative;
border: none;
text-align: right;
margin: 0 0 0 -3px;
height: 100%;
min-width: 360px;
}

*>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: left;
}

/*---------------------------------
flatnuke elements
---------------------------------*/
.menubis {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #772200;
text-decoration:none;
}

.motd {
text-align: justify;
font-size: 8pt;
color: #000000;
}

.footnews {
margin-top: 10px;
padding: 5px;
text-align: center;
font-size: 8pt;
color: #000000;
}

.footer {
position: relative;
top: 0;
margin: 0 auto 0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
color: #772200;
width: 100%;
height: 7%;
}

.footer a img {
opacity: 0.5;
}

.footer a:hover img {
opacity: 1;
}

.footer small {
opacity: 0.5;
font-size: 10px;
}
/*---------------------------------
common html elements
---------------------------------*/

font {
font-size: 8pt;
text-decoration: none;
color: #772200;
}

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;
}

a.menubis:link, a.menubis:visited, a.menubis:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #008866;
text-decoration:none;
}

a.menubis:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #772200;
text-decoration:none;
}

td, th {
font-size: 8pt;
}

input {
max-width: 20em;
height: 2em;
border: none;
padding: 2px;
font-size: 8pt;
font-weight: bold;
color: #008866;
background-color:#cccccc
}

select {
max-width: 20em;
height: 2em;
border: none;
padding: 2px;
font-size: 8pt;
font-weight: bold;
color: #008866;
background-color:#cccccc
}

textarea {
max-width: 400px;
max-height: 300px;
background-color:#cccccc;
color: #008866;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
}

img {
border: none;
}

.clr {
clear: both;
}

dentro il div "corpo" si caricano a seconda della pagina, "motd" oppure "menubis".
è in "menubis" che a volte viene racchiusa la tabella con le thumbnails che mi dà problemi,
ma credo che l'origine sia la stessa del titolo che scende sotto il float quando si ridimensiona la finestra.
non posso mettere una width fissa a "corpoprinc" perché non sarebbe più liquido, come posso aggiustare??

vi prego non so più dove cercare, tra guide e trick e hack e quirk le ho provate tutte!!

Discussione: 2 colonne: i div scendono su IE

Strumenti discussione

Ricerca discussione

Visualizza

2 colonne: i div scendono su IE

Permessi di invio