visualizzazione sito con IE strana!

[Alexthebest]

ciao a tutti, sto provando a modificare un template che ho trovato su internet per adattarlo alle mie esigenze... per ora non ho riscontrato parecchi problemi, e sto imparando un sacco di cose nuove (è la prima volta che uso i css "seriamente")
ho scoperto anche che IE ha molti problemi di visualizzazione e supporto dei css, e vanno usati alcuni "trucchetti" per farlo funzionare a dovere...
la pagina che sto iniziando a modificare è questa, e il problema di visualizzazione che mi da è questo
funziona perfettamente con tutti i maggiori browser; safari, firefox, opera... poi quando provo con il più famoso e (purtroppo) utilizzato al mondo... si vede da schifo!

il codice probabilmente è un po' contorto, ma non mi sembra scorretto! qualcuno sa darmi una mano?
grazie

[deleted_26]

1) Versione di ie che da problemi?
2) Hai validato html e Css?
3) Puoi postare la porzione di codice relativa a quell'errore?

[Alexthebest]

Originariamente inviato da Simosito
1) Versione di ie che da problemi?
sia la 6 che la 7
2) Hai validato html e Css?
si sono validi
3) Puoi postare la porzione di codice relativa a quell'errore?

        <div id="content1">
	<div id="logo">
		<h1>Primo</h1>
		<h2>Secondo</h2>
	</div>
	<div id="content">
	<div class="bgtop">
	<div class="bgbtm">
		<div class="post">...			</div>
			...
		</div>
	</div>
	</div>
	</div>
	<div id="footer">
<p class="legal">&copy;2007 All Rights Reserved. Design by Free CSS Templates</p>
	</div>
	</div>

questo è l'html della colonna di mezzo, la parte che mi da problemi è l'integrazione del footer nella fine della colonna.
il css relativo è questo:

#content1 {
	float: left;
	width: 542px;
}

#content {
	background: url(images/img03.jpg) repeat-y left top;
}

#content .bgtop {
	background: url(images/img02.jpg) no-repeat left top;
}

#content .bgbtm {
	background: url(images/img04.jpg) no-repeat left bottom;
}

#footer {
	height: 60px;
	margin-top: 30px;
	padding: 15px 0;
	text-align: center;
	background: url(images/img05.jpg) no-repeat;
}

#footer p {
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: normal;
}

grazie ancora

[essezeta]

Se hai fretta e vuoi solo risolvere con una "toppa" sostituisci le righe 110 - 118 (dalla pagina che hai linkato) con queste:

</div> 
</div> 
</div> 
<hr style="clear:both; visibility:hidden"> 

		<div id="footer">
		<p class="legal">bla bla bla</p>
		</div>
</div>

Ma si tratta di una soluzione di sporca...

In realtà dovresti ristrutturare i tuoi box...
questo è un rapido es. (nota i commenti):

<div class="xwrap">   

	<div class="xtop"></div> 

<div class="xcontent">contenuto a volontà 
contenuto a volontà 
	<div class="xbottom"></div> 
</div> 

	<div class="xfooter"></div> 

</div>

Comunque se vuoi renderti conto con i tuoi occhi (e sopratutto sulla tua stessa pagina), copia questo codice subito prima della chiusura del </body> e attacca le regole che seguono nel tuo css, sotto la tua pagina errata vedrai un box in maniera corretta:

 
.xwrap {
width:542px; margin:0 auto;
}
.xtop {
height:220px; background: url(images/img02.jpg) top no-repeat;
}
.xcontent {
background: url(images/img03.jpg) repeat-y;
text-align:center;
}
.xbottom {
height:54px; background: url(images/img04.jpg) bottom no-repeat;
}
.xfooter {
height:54px; margin-top:30px; background: url(images/img05.jpg) no-repeat;
}

Non sono espertissimo, ma ho trascorso la notte INSONNE e cercando di stancarmi ho fatto diversi test e funziona su IE6, IE7 e FF, ecco gli screenshot:





Piccolo consiglio:
provate gli angoli arrotondati con js del mitico Fulciniti... e non avrete più paranoie con immagini di bg...

[Alexthebest]

innanzitutto ti ringrazio per l'immenso lavoro che hai fatto per aiutare uno "sconosciuto"
non so se al tuo posto sarei stato così paziente da riscrivere tutto il codice e fare tutte quelle prove!
dopo cena provo subito a capire (l'ho guardato di sfuggita) e usare il tuo metodo!
per guanto riguarda il javascript... lo so che rende tutto più comodo... ma proprio non lo sopporto! non mi piace per nulla e cerco di farne sempre a meno, piuttosto speriamo che i browser si inizino ad adattare come già fa il mitico safari e comincino a supportare i css3
(quando diventerò ricco e famoso ricordami di regalarti un mac per sdebitarmi! )
saluti, e grazie ancora!

[Alexthebest]

Originariamente inviato da essezeta
In realtà dovresti ristrutturare i tuoi box...
questo è un rapido es. (nota i commenti):

<div class="xwrap">   

	<div class="xtop"></div> 

<div class="xcontent">contenuto a volontà 
contenuto a volontà 
	<div class="xbottom"></div> 
</div> 

	<div class="xfooter"></div> 

</div>

ecco, ho ricontrollato il codice del template che avevo ed in effetti era una porcheria!! quello che l'ha creato ha usato il div content, che sarebbe dovuto essere il contenuto al centro, per contenere anche i div top e bottom!
in effetti la strada che mi hai consigliato tu è certamente la più logica, un contenitore generale e poi il top, il contenuto e il bottom! (che in effetti avevo iniziato a fare, usando il content1 come contenitore generale, anche per poter mettere la scritta di titolo in alto, senza però accorgermi che i div subito dopo erano in ordine brutto).
ora funziona, grazie ancora!

[essezeta]

innanzitutto ti ringrazio per l'immenso lavoro che hai fatto per aiutare uno "sconosciuto"

intanto mi sento in debito verso la comunità per tutti i consigli e gli aiuti ricevuti in passato da "sconosciuti"... poi ero insonne... ...e poi non voglio troppi meriti... perché in realtà ho una raccolta di brani di codice che a mano a mano ho personalizzato e archiviato... quindi il grosso del lavoro era già fatto: io ho solo fatto due o tre prove e stampato un paio di screenshot...

buona notte a tutti...