layout 3 colonne float .. dove sbaglio?

[Gnegno]

inzialmente sembrava funzionare.. poi il caos.. su ie anche stessa versione, provata su computer diversi da risultati diversi.
Ho provato anche ad applicare una soluzione hack box model, ma non è cambiato niente .. non so più dove sbattere la testa per sistemare questo layout, altrimenti l'unica soluzione è tornare ad usare le classiche tabelle
In pratica in ie principalmente l'extra si allinea a dx sotto il content e in alcuni casi produceva un repeat del background del content perchè evidentemente sfora troppo a dx (cosa credo risolvibile forzando solo repeat verticale e nn orizzontale) però per il resto il testo all'interno del navigation risulta particolare allineato in basso rispetto a quello su firefox (dove il sito è perfetto).. nn so più che fare..

dimenticavo di dire che l'ho eseguito partendo dall'articolo pubblicato su pro.html.it

body {
	background-color: #ededed;
	color: #000000;
	font-family: verdana, arial, sans-serif;
	font-size: 76%;
	text-align: center;
}

#container {
	margin-top: 10px;
	width: 720px;
	height: 455px;
	text-align: left;
	background-image: url(../images/frame_background.jpg);
}

#header {
	width: 720px;
	height: 117px;
	text-align: center;
}

#navigation {
	margin-left: 17px;
	margin-right: 17px;
	padding-top: 5px;
	padding-left:18px;
	height: 13px;
	background-image: url(../images/menu_background.gif);
	background-color: #D7D4B2;
	color: #000000;
	font-family: Helvetica, sans-serif, arial;
	font-size: 11px;
}

#main_index {
	float: left;
	margin: 0px 0px 0px 17px;
	padding: 5px 0px 0px 0px;
	width: 526px; \width: 543px; w\idth: 526px;
	height: 283px;
	background-color: #C9C598;
	color: #000000;
}

#content_index {
	float: right;
	padding-left:5px;
	width: 491px; \width: 496px; w\idth: 491px;
	height: 283px;
	background-color: #C9C598;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: left;
}

#whereis {
	float: left;
	width: 30px;
	height:283px;
	background-image: url(../images/whereis_background.gif);
	background-color: #C9C598;
	color: #ffffff;
	text-align: center;
}

#extra {
	float: right;
	margin-right:17px;
	width: 160px; \width: 177px; w\idth: 160px;
	height:283px;
	background-color: #C9C598;
	color: #ffffff;
	text-align: center;
	font-size: 5px;
}

#footer {
	clear: both;
	background-image: url(../images/frame_background.jpg);
	background-color: #C9C598;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #ABA87C;
	text-align:center;
}

la struttura della pagina è

<div id="container">
  <div id="header"></div>
  <div id="navigation"></div>
  <div id="main_index">
    <div id="content_index"></div>
    <div id="whereis"></div>
  </div>
  <div id="extra"></div>
  <div id="footer"></div>
</div>

[Gnegno]

okkei.. il problema è dovuta all'interpretazione errata dei box model di ie.. però non riesco a paginare escludendo margin e padding... però perchè con il box model hack non funge ugualmente? Ho sbagliato a contare?

[zoom]

allora,
quando un div "scivola" sotto in IE significa semplicemente che non ci sta nel contenitore.
Quindi probabilmente hai sbagliato qualche conto.
Una cosa semplice per iniziare è:

1. imparare a flottare senza i margini, in modo da non avere problemi con hack vari.
2. nel caso qualcosa non torni riduci tutte e 3 le larghezze di molto, in modo che se hai sbagliato la somma te ne accorgi subito perchè in quel caso funzionerebbe tutto bene...

Comunque quasi sicuramente è un problema di dimensionamento.

[Gnegno]

senza margini la cosa è ok!
Appena aggiungo i margini su firefox è perfetto, mentre su ie il div main è shiftato a a destra di molto.. il doppio o poco più di 17px, di conseguenza l'extra non ci sta più e va giù.

Però anche provando l'hack la cosa non cambia di un pixel!

[zoom]

quell'hack non lo conosco...
di solito uso la tecnica di Tantek per il box model di IE...
quindi non posso aiutarti

non riesci a evitare i margini per semplificare la cosa? comunque controlla bene le somme, sicuramente sbagli qualcosa... :master:

[Gnegno]

ma il box model non è quello di tantek? mmhh.. su questo argomento ho un po di confusione.

Cmq effettivamente ho notato che senza specificare il margin, ma solo aumentando il padding riesco a paginare in modo compatibile..

[Gnegno]

ok. mi rispondo da solo. no... inizio a schiarmi le idee (forse).. ho visto che i padding la cosa si stava risolvendo però vorrei cercare di capire..
eppure i conti mi sembra che tornino..

questo dovrebbe essere con la modifica tantek giuto?

div#main_index {
 float: left;
 padding-top: 5px;
 margin-left:17px;
 width: 526px;
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 543px;
}
body>div#main_index{
 width: 543px
}

div#content_index {
 float: right;
 padding-left:5px;
 width: 491px;
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 496px;
}
body>div#content_index{
 width: 496px
}

div#whereis {
 float: left;
 width: 30px;
}

#extra {
 float: right;
 margin-right:17px;
 width: 160px;
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 177px;
}
body>div#extra{
 width: 177px
}

il container è di 720px
main_index: 17 + 526 = 543
content_index: 5 + 491 = 496
whereis: 30
extra: 160 + 17 = 177
496+30 = 526
543+177 = 720
a me sembra che i conti tornino :master:

però cmq sia in questo caso.. con il css così definito addirittura sfalsa anche la visualizzazione su firefox!

Cmq nel caso di box model in cui è definita l'altezza .. anche là vale eventualmente la regola dei vari hack, simple, tantek..etc..etc..? Direbbi di sì, ma tutti gli esempi visti fanno solo riferimento alla width..

[Gnegno]

allora.. la situazione attuale cmq è che ho provato a mettere i padding al posto dei margin (ovviamente dove era possibile), box model hack (tantek come ho scritto nel post precedente mi sballa anche su browser recenti) e ho guadagnato visibilità del sito con:
- win: ie 6, 5.x, opera 8.5, firefox 1.6
- mac: opera 8.5, safari 1.3.1, firefox 1.4

però .. ovviamente ci sono dei però ..
Con ie mi mette 2px fra la fine della head e navigation, avendo tagliato l'immagine e la barra del menù ha uno sfondo che parte con un bordo differente dallo sfondo.. ovviamente vedere quello stacco sta male...ho provato a impostare un margin-top a -2px ma su ie la cosa funzionerebbe, sugli altri invece la barra di navigazione sale correttamente, ma si nasconde dietro all'header, ho forzato lo z-index .. ma anche in quel modo niente..
inoltre si vede che inserisce altri spazi verticali di qualche px fra i vari div, per esempio fra main_index e navigation

ci siamo quasi, anche se non è proprio lo stesso identico layout in tutti i browser

[Gnegno]

up