[css] Ancora resa diversissima tra IE e FF

[ernest]

Ciao a tutti

ho sentito parlare bene del layoutomatic e quindi l'ho usato come base per un'impaginazione che sto facendo. Purtroppo però, nonostante la buona (?!?) base, il layout si sputtana in IE (e qualcosa non va pure in FF).



Firefox è abbastanza OK ma, come si vede nell'ingrandimento, il menu, fatto a lista, si discosta di un pixel dallo sfondo; i padding sono tutti a zero ma non è stato sufficiente.



Con Explorer invece la situazione precipita...

I problemi diventano 3:
1) Il div che contiene le bandiere inspiegabilmente decolla verso sinistra; questo è l'html:

<div id="container">
		<div id="header"><img src... />
			<div id="flags">
			<span id="LangText" style="margin-right:20px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color:#000066"></span>
			<a href... codice per le bandiere /></a>
			</div>
... poi sotto inizia il codice del menu...

mentre questo è il Css:

#flags
{
	position: absolute;
	width: 760px;
	top: 50px;
	margin-left: auto;
	margin-right: auto;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #0000B3;
	text-align: right;
	}

2) Lo spazio non voluto sotto il menu orizzontale non lascia... raddoppia!!!

3) Il contenuto del box principale decolla verso il basso spinto (???) dalla sidebar (quella grigia negli screenshots).


La pagina si trova sotto http://www.idratech.it/homepage.php. Volendo posso postare direttamente il codice ed il Css.

Any suggestion?

[ernest]

Nessuno avrebbe qualche suggerimento per questi problemi?

[Mich_]

Non mi sembra molto XHTML.

In particolare
width="200" height="70" hspace="0" vspace="0"
width="100%" border="0" cellpadding="5" cellspacing="0"
ed altri attributi di quel tipo potrebbero andare in conflitto con il CSS.

Anche lo script sembrerebbe fatto per IE, e potrebbe dare qualche problema in altri browser.

Inoltre usare tabelle per la formattazione non e` ammesso per l'accessibilita`.

Tieni presente che ci sono buone patch per IE : le trovi nei siti tipo constile.org o altri citati tra i "link utili".

[Kintaro]

Così a occhio:

1) le tue flag sono posizionate assolute ma il div contenitore non è relativo, comunque mi pare che se usi un float right fai prima.

2) secodno me hai semplicemente fatto male il conto dei pixel. Header è alto 120 e ha un immagine di 70 e sotto si posiziona il navcontent (mi pare), o fai l'immagine di 2 pixel in più o posizioni diversamente il navcontent.

Io ti consiglierei di togliere il navcontend dall'header. In header ci metti come sfonto il logo e poi con text-align right e padding top, semplicemente metti le flag al posto giusto. Forse non te ne fai nulla del div flag.
Sotto ci metti il navcontent alto il giusto con suo sfondino repeat-x e dentro i tuoi ul sempre alti giusti.

3) il bordo di content viene visto da explorer come un bordo esterno mentre dagli altri come interno. Inutile dire chi ha ragione, però o usi un hack per cambiare la width a explorer (sconsiglio) o metti il border a 0 ed ottienni il bordino con un background.

E comunque quanto ti consiglia mich è giusto. Oramai hai fatto 30, fai 31 ed elimina anche la tabella sulla sinistra.