Maledetto internet explorer!

[frodo_jedi]

Questa volta proprio non capisco che cosa non va a ie...
Visitate il sito www.cimbripan.org è il primo sito che ho fatto quindi non aspettatevi un gran che...

Se lo aprite con firefox non ci sono problemi mentre con ie
ho i seguenti problemi:

- nella pagina di index ottengo delle line dopo le bandiere
(non ho usato le tabelle ma du liste concatenate + il css)

- in tutte le altre pagine non si vede il backround delle colonne laterali. Perchè??????????????
Ho implementato la struttura della paginaesattamente come c'era scritto nel manuale di HTML.it riguardo ai layout a 3 colonne e precisamente il codice è

/* CSS Document */

/*body*/
body{
	margin: 0px;
	padding:0px;
	border:0px;
	font-family: Verdana,Arial,sans-serif;	
	}

/*container*/
#container{
	position: relative;
	width:auto; 
	margin: 0px auto;
	background: url(../IMG/sfondi/img_lati.jpg) repeat-y top right;
	}

/*container2*/
#container2{ 
    	background: url(../IMG/sfondi/img_lati.jpg) repeat-y top left;
	text-align: left;
	}

#header{
	.............
	}

#navigation{
	..................
	}

#extra{
	.................
	}
#content{
	margin: 0px 170px;
	padding: 25px 10px 8px 10px;
	text-align:justify;
	border-left-color: #b0c4de;/*bordo del content*/
	border-left-width: 2px;
	border-left-style: solid;
	border-right-color: #b0c4de;/*bordo del content*/
	border-right-width: 2px;
	border-right-style: solid;
	background-color: #ffffff;
	}

#footer{
	................
	}

Notare che la larghezza dei lati è 170px come specificato in

	
#content{
	margin: 0px 170px;
        ..........
        }

Qualcuno potrebbe aiutarmi?

[seed_squall_it]

C'è un po' di casino nelle liste che usi per i link vicini alle bandiere. Hai messo una lista dentro l'altra e usi elementi[*] sia per le bandiere che per i link alla loro destra. Per risolvere:

<ul>[*]Entra[*]Va rentro
.....[/list]

Le immagini delle bandiere puoi metterle via CSS come sfondo degli elementi <a>. Quindi la tua lista va impostata così via CSS:

ul {
padding: 0;
margin: 0;
}

ul li {
list-style: none;
padding: 0;
margin: 0;
display: inline; /* per IE che altrimenti ti aggiunge
uno spazio in più tra le voci */
}

/* Puoi impostare padding e/o margin degli elementi[*]
differenti in seguito per "spaziare" le voci */

ul li a {
line-height: YYpx; /* YY è "l'altezza" di un link,
sufficiente per contenere le immagini delle bandiere in
altezza */
display: block;
padding: 0 0 0 XXpx; /* XX è il padding sinistro
dell'elemento <a> sufficiente per contenere le immagini
delle bandiere in larghezza */
margin: 0;
background-repeat: no-repeat;
background-position: center left;
text-decoration: underline;
}

ul li a:hover {
text-decoration: none;
}

#italia {
background-image: url(italia.gif);
}

#veneto {
background-image: url(veneto.gif);
}

....

Così le bandiere saranno impostate come sfondi (cliccabili) dei vari link e non saranno scritte direttamente nel codice con dei tag <img>. Ovviamente poi devi "personalizzarti" i padding, i margin e le caratteristiche dei link come preferisci.

Per l'altro problema la cosa è più complessa, visto che su IE5 anche la "barra" superiore dei link non è posizionata nel modo giusto. Penso sia un problema di posizionamenti e/o margini di elementi come le liste...ora provo a guardarci.

[frodo_jedi]

Ciao e grazie 1000 per avermi risposto così dettagliatamente.
Per favore dai un occhio all'altro problema, forse ho fatto degli errori ma non capisco perchè allora firefox e konqueror mi fanno vedere tutto correttamente...

Prova a vedere per favore se c'è qualche problema nell' id
#header perchè se non ricordo male prima di fare le ultime modifiche a questa parte le immagini laterali si vedevano...
Però sui posizionamenti non ci metto la mano sul fuoco.

Ti sono veramente grato per l'aiuto che mi hai dato fin qui.

A presto!

[frodo_jedi]

Ciao seed_squall_it,
percaso sei riuscito a risolvere il mio problema?

[seed_squall_it]

non ancora...devo ancora guardare ad essere sincero. Ho avuto dei casini con il mio di sito (sempre grazie a IE!!!)

[seed_squall_it]

Stavo per mettermi a guardare l'header del sito, ma vedo che mi hai preceduto e hai risolto

[frodo_jedi]

A dire il vero non ho ancora risolto nulla, per favore dai un occhio all'header forse il problema è lì...

[seed_squall_it]

Uhm...ho riguardato il sito con IE 5 e la testata è OK. Probabilmente ieri ha preso le impostazioni del CSS "in ritardo" (ogni tanto lo fa). Non so dirti nulla con IE 6 perché non ce l'ho sottomano (mi è partito il portatile con Win XP ).

Per le immagini delle colonne laterali, con IE 5 si vedono perfettamente...

[frodo_jedi]

Ciao, grazie per avermi risposto.

Come è possibile che con IE6 non si vedono le immagini laterali e con IE5 si?

I posizionamenti dentro l'id #header secondo te sono corretti?

[seed_squall_it]

Guarda...se devo dirti la verità, IE 5 è migliore di IE 6. So che sembra assurdo, ma è così. Evitando accuratamente di incorrere nei problemi del box model (che cmq ha anche IE 6 in modalità compatibile), IE 5, in moltissimi "esperimenti" che ho fatto, si è comportato esattamente come Firefox! IE 6 invece, nella stessa situazione, sbagliava qualunque cosa! Inoltre IE 6 ha una serie di bug "esclusivi" che IE 5 non ha! Per la serie: "Microsoft ha migliorato il suo browser da una versione all'altra"...

Per il resto, ho notato che ridimensionando la finestra, tutti i conentuti della colonna destra vengono a "sovrapporsi" al box centrale dei contenuti. Dovresti rivedere (così magari correggi l'errore di IE 6) la struttura delle 3 colonne (l'header mi sembra corretta).

Potresti creare due box "contenitori" che contengano i 3 box della pagina (colonne e contenuti). Questi servono solo per dare l'"illusione" delle colonne alte nello stesso modo tramite l'applicazione dell'immagine di sfondo delle colonne laterali.

<div id="sfondocolonnasx">
<div id="sfondocolonnadx">

<div id="colonnasx">...</div>
<div id="contenuto">...</div>
<div id="colonnadx">...</div>

</div>
</div>

Codice CSS:

body {
background-color: #ffffff; /* colore di sfondo anche per il box
dei contenuti */
padding: 0;
margin: 0;
}

#sfondocolonnasx {
width: 100%;
background-image: url(SFONDO COLONNA SX);
background-repeat: repeat-y;
background-position: top left;
}

#sfondocolonnadx {
width: 100%;
background-image: url(SFONDO COLONNA DX);
background-repeat: repeat-y;
background-position: top right;
}

#colonnasx {
width: XXpx;
float: left;
}

#contenuto {
width: XXpx; /* larghezza massima fissa del box dei contenuti */
margin: 0 auto;
}

#colonnadx {
width: XXpx;
float: right;
}

Ovviamente questo codice è il minimo "essenziale" per le tre "colonne" della pagina. In pratica, le due colonne laterali sono flottanti una a destra e una a sinistra e il box dei contenuti è statico (quindi dà l'altezza ai due box "contenitori" con gli sfondi delle 2 colonne). Il box dei contenuti deve cmq essere sempre più alto delle 2 colonne laterali, altrimenti queste "escono" dai contenitori e si sovrappongono al footer (nel caso, ti basta inserire un tag <br class="clear" /> prima di chiudere il box "sfondocolonnadx" a cui applichi una classe per "pulire" l'allineamento dei float e ripristinare il flusso del documento normale).

br.clear {
clear: both;
}

Questo codice, ripristinando il flusso all'interno dei due box "contenitori" per gli sfondi delle colonne, li forza ad avere un'altezza tale da contenere per intero il più alto dei box flottanti.
Tra l'altro risolve anche un bug di Netscape 6 con i contenitori di blocchi flottanti!

Per il resto, fai delle prove...