Layout con CSS: problema

[crazymac]

Salve a tutti!
E' il primo messaggio che spedisco su uno dei forum di html.it e mi auguro di trovare qualcuno che possa risolvere il mio problema.
Seguendo i tutorial presenti su constile.org, mi sono imbarcato nella progettazione di un sito basato totalmente sui CSS: il risultato ottenuto è soddisfacente, ma al momento di testare la compatibilità con un browser che non sia IE saltano fuori i problemi...
Spedisco in allegato uno screenshoot di come viene visualizzata la pagina dai 3 browser su cui l'ho testata, ossia IE6, NN7 e Opera7.
Come potete vedere, il layout sia in NN7 che Opera7 risulta scompaginato, anche se in modi differenti: ho ricontrollato il CSS più volte, ma ancora non sono riuscito a capire quali errori ho commesso (probabilmente perchè è da poco che li utilizzo! :tongue: ).
Possibile che abbia sbagliato qualcosa nel padding, nei margin o nel posizionamento, ma davvero non riesco a venirne a capo...
Vorrei evitare di dover realizzare un fogli odi stile personalizzato per ciascun browser, per un discorso di principio piuttosto che per pigrizia: se in altri siti funziona tutto per bene, perchè non dovrebbe funzionare sul mio!
Qui di seguito trovate il codice del CSS:

body {
PADDING-TOP: 0px;
PADDING-RIGHT: 0px;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
MARGIN: 0px;
FONT: 80% verdana,helvetica,sans-serif;
TEXT-ALIGN: center;
}
code {
DISPLAY: block;
MARGIN: 0px 1em 0.5em;
FONT: 80% verdana,helvetica,sans-serif;
}
hr {
DISPLAY: none;
}
#testa-c1 {
PADDING-TOP: 0px;
PADDING-RIGHT: 0px;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
TOP: 0px;
LEFT: 20px;
WIDTH: 180px;
HEIGHT: 80px;
POSITION: absolute;
BACKGROUND: url(img/scaline.gif) #f0f0f0;
}
#testa-c2 {
BORDER-RIGHT: #000 0px dotted;
BORDER-LEFT: #000 0px dotted;
PADDING-TOP: 0px;
PADDING-RIGHT: 0px;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
BACKGROUND: #fff;
position:relative;
MARGIN: 0px 205px 0px 205px;
}
#testa-c3 {
PADDING-TOP: 0px;
PADDING-RIGHT: 0px;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
TOP: 0px;
RIGHT: 20px;
WIDTH: 180px;
HEIGHT: 80px;
POSITION: absolute;
BACKGROUND: url(img/scaline.gif) #f0f0f0;
}
#interlinea {
BORDER-TOP: #000 3px solid;
BORDER-RIGHT: #000 0px solid;
BORDER-BOTTOM: #000 0px solid;
BORDER-LEFT: #000 0px solid;
PADDING-TOP: 6px;
PADDING-RIGHT: 0px;
PADDING-BOTTOM: 4px;
PADDING-LEFT: 0px;
BACKGROUND: #C2D5E6;
MARGIN: 0px 20px 5px 20px;
}
#ultimeuscite {
PADDING-TOP: 0px;
PADDING-RIGHT: 0px;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
TOP: 115px;
LEFT: 20px;
WIDTH: 180px;
HEIGHT: 400px;
POSITION: absolute;
BACKGROUND: #C2D5E6;
}
#notizie {
PADDING-TOP: 0px;
PADDING-RIGHT: 0px;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
BORDER-RIGHT: 0px solid #fff;
BORDER-LEFT: 0px solid #fff;
MARGIN: 0px 205px 0px 205px;
HEIGHT: 365px;
position:relative;
BACKGROUND: #eaeaea;
}
#footer {
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
border-top:0px solid #fff;
border-right:0px solid #fff;
border-left:0px solid #fff;
MARGIN: 5px 205px 5px 205px;
position:relative;
BACKGROUND: #aaa;
}
#editoriale {
PADDING-TOP: 0px;
PADDING-RIGHT: 0px;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
TOP: 115px;
RIGHT: 20px;
WIDTH: 180px;
HEIGHT: 400px;
POSITION: absolute;
BACKGROUND: #C2D5E6;
}
#piedipagina {
BORDER-TOP: #000 0px solid;
BORDER-RIGHT: #000 0px solid;
BORDER-BOTTOM: #000 0px solid;
BORDER-LEFT: #000 0px solid;
PADDING-TOP: 1em;
PADDING-RIGHT: 0px;
PADDING-BOTTOM: 1em;
PADDING-LEFT: 0px;
BACKGROUND: #eee;
MARGIN: 5px 20px 0px 20px;
}

Ringrazio anticipatamente chi riuscirà a darmi un aiuto!

[Sgnafurz]

ehm ... l'allegato?

[crazymac]

Bravo merlo che sono...
Ecco qui l'immagine! (speriamo)

[Sgnafurz]

fammi capire, ma quei layer sono contenuti dentro una tabella?
puoi postare il codice della tabella se è cosi?

[crazymac]

Originariamente inviato da Sgnafurz
fammi capire, ma quei layer sono contenuti dentro una tabella?
puoi postare il codice della tabella se è cosi?

Non ci sono tabelle, le sezioni sono associate ad un <div> ciascuno con una sua classe (tipo #notizie, #interlinea, ecc), la cui posizione è definita attraverso i css.
Ti posto il codice di tutta la pagina, sperando che possa esserti utile per capire meglio il problema:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<HEAD>
<TITLE>Embn: Liquido con colonne separate</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
@import url(layout.css);
</style>
<style type="text/css" media="screen">
@import "testi.css";
</style>

<META content="MSHTML 6.00.2800.1170" name=GENERATOR></HEAD>
<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<DIV id=testa-c1>
<div align="center"></div>
</DIV>
<HR>
<DIV id=testa-c2>[img]img/logo.gif[/img]</DIV>
<HR>
<DIV id=testa-c3></DIV>

<HR>

<DIV id=interlinea><CODE>prova interlinea prova interlinea prova interlinea prova interlinea</CODE>
</DIV>

<HR>

<DIV id=ultimeuscite>
<div align="center">
<h1>ultime uscite</h1>
<CODE>prova ultime uscite prova ultime uscite prova ultime uscite prova ultime
uscite</CODE> </div>
</DIV>
<HR>
<DIV id=notizie>
<h2>prova notizie prova notizie prova notizie</h2>
</DIV>
<div id="footer">
<form name="form1" method="post" action="" style="margin:0">
cerca nel sito
<input type="text" name="textfield" size="20" style="background-color:#ffffff; border-style:none">
<input type="submit" name="Submit" value="vai" style="background-color:#cccccc; font-family:Verdana; font-size:12px">
</form>
</div>
<HR>
<DIV id=editoriale>
<div align="center">
<h1>editoriale</h1>
</div>
</DIV>

<HR>

<DIV id=piedipagina>
<CODE>#piedipagina #piedipagina #piedipagina #piedipagina #piedipagina #piedipagina

#piedipagina #piedipagina #piedipagina #piedipagina #piedipagina #piedipagina

#piedipagina #piedipagina #piedipagina #piedipagina #piedipagina
</CODE>
</DIV>

</BODY>
</HTML>

Ciao e grazie per l'interessamento!

[Marcolino's]

Il problema principale è che tu hai voluto usare Height che daccordo è previsto ma non tutti sfruttano correttamente.
In particolare IE che digerisce sempre tutto, usa quel metacomando, mentre NN, Mozilla, Opera e tutti gli altri, pur riconoscendolo, lo vedono con alcune limitazioni.
In particolare ti consiglio di leggerti l'articolo sul box model sempre sul sito constile.org

[Marcolino's]

Scusa ho visto ora il tuo allegato, ma sviluppi con un editor online: [<META content="MSHTML 6.00.2800.1170" name=GENERATOR></]

comunque nel codice ho visto anche questo:

<style type="text/css" media="screen">
@import url(layout.css);
</style>
<style type="text/css" media="screen">
@import "testi.css";
</style> 

Spiegamelo! Non ne comprendo la ragione.

[Sgnafurz]

ok adesso lo testo da me in locale, se riesco a fare qcs posto qui

[crazymac]

Spiegamelo! Non ne comprendo la ragione.

No no, nessun editor online, si tratta di un refuso...
Il file "testi.css" è questo:
h1 {
font: verdana,helvetica,sans-serif;
font-size: 12px;
color: #000;
background: #7DA7D9;
font-weight: bold;
padding-top: .5em;
padding-bottom: .5em;
}
h2 {
font: verdana,helvetica,sans-serif;
font-size: 12px;
color: #000;
background: #aaa;
font-weight: bold;
padding-top: .5em;
padding-bottom: .5em;
}

Mi serve per colorare lo sfondo dei titoli ("editoriale", "ultime notizie" e così via): alla fine avrei accorpato i due css ma per mia praticità li tenevo separati.

[crazymac]

Originariamente inviato da Sgnafurz
ok adesso lo testo da me in locale, se riesco a fare qcs posto qui

Grazie mille per l'aiuto Sgnafurz! Rimango in attesa di qualche dritta...