[css] problemi con IE

[miki_area57]

sto provando a creare un sito tableless (è il primo) quindi ancora non ho ben capito come mettere le cose. Cmq ho trovato una soluzione decente solo che IE fa come gli pare e vien fuori un casino, quindi che faccio, riuncio e faccio con le tabelle, spacco Bill o esistono 2 o 3 dritte per ovviare a questi problemi?
Purtroppo è per lavoro e quindi non posso perderci tanto tempo.


http://www.giardi.net/lah/chisiamo.htm

Si vede correttamente con Firefox Opera, da schifo con IE

[kaze]

Posta il codice dei CSS altrimenti è un pò difficile darti una mano !!!

[miki_area57]

body{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background:#fff;}

#testata{
background:url(lah_r2_c11.gif) center no-repeat;
margin: 0px 0px 0px 0px;
width:100%;
height:70px;
}
#altosx{
background:url(scritta_lah.gif) left center no-repeat;
margin: 3px 0px 0px 10px;
height:70px;
width:100%;
position:relative;
}
#barrablu{
background:url(fiori.jpg) center no-repeat #003;
margin: 0px 0px 0px 0px;
height:202px;
width:100%;
}
#centrale{
width:100%;
margin: 0px 0px 0px 0px;
text-align:center;
}
#cellagrande{
width:417px;
padding: 0px 0px 0px 0px;
margin:0px auto;
border-bottom:dashed 1px #003;
border-left:dashed 1px #003;
border-right:dashed 1px #003;
height:100%;
position:relative;
}
#cella{
width:100%;
padding:20px 5px 5px 5px;
}
#chisiamo{
background:url(chisiamo.gif) left no-repeat;
width:100%;
height:9px;
}
#corpo{
text-align:justify;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
padding:20px 10px 0px 0px;
}
#boxsx{
margin-left:3%;
float:left;
width:100px;
}
#menu{
position:relative;
top:50px;
}
.rombo{
background:url(rombo.gif) center no-repeat;
height:25px;
width:20px;
float:left;
}
#chisiamomenu{
background:url(chisiamo_menu.gif) no-repeat left center;
width:110px;
height:25px;
position:relative;
left:30px;
}
#dovesiamomenu{
background:url(dovesiamo_menu.gif) no-repeat left center;
width:130px;
height:25px;
clear:right;
position:relative;
left:30px;
}
#contattimenu{
background:url(contatti_menu.gif) no-repeat left center;
width:96px;
height:25px;
clear:right;
position:relative;
left:30px;
}
#servizimenu{
background:url(servizi_menu.gif) no-repeat left center;
width:81px;
height:25px;
clear:right;
position:relative;
left:30px;
}
.riga{
width:150px;
height:25px;}
.menuhidden{
display:none;
}
#boxdx{
background:url(chisiamo_destra.gif) no-repeat center;
padding:30px 30% 0px 10px;
width:22px;
height:233px;
float:right;
}
h1{display:none;}
h2{display:none;}
.menuhidden{display:none;}

[kaze]

Non riesco a capire dove è il problema, è pur vero che lo sto guardando a puntate (il lavoro ahimè...).

In linea di massima potrebbe essere un problema di box model !!!

[span]

in linea di massima sarebbe da rifare :quipy:

il CSS contiene un sacco di codice inutile, la struttura xhtml è sovradimensionata (ti manca la C di cascading, in pratica ), non mi convince tanto l'uso delle immagini di sfondo per il menu che ti obbliga a far condenere i div in un link (non sono neanche sicuro che così facendo la pagina sia validata.

ho anche notato che adusi del position relative

cmq... basta critiche

per ottenere un effettetto decente aggiungi ad ogni id del menu "float: right" ed elimina left: 30; (se vuoi anche position relative che non serve)

fatto questo, per aumentare la distanza del simil punto elenco dall'elenco aumenta il width del box che li contiene

----- fine aggiustamento menu ----

per centrare la parte con il testo anche con ie taglia:

	<div id="cellagrande">
		<div id="cella">
			<div id="chisiamo"></div>
			<h2>Chi Siamo</h2>
			<div id="corpo">May Day &egrave; sinteticamente [...] Cooperativa Sociale

    COHALA</div>
		</div>
	</div>

e incollalo dopo la chiusura dell'ultimo div

dopo di ché aggiungi nell'id cella grande, DOPO margin: 0 auto;, margin-top: -263px; clear: both;

fine... il CSS è un po' sporco ma così facendo dovrebbe funzionare.

[span]

Originariamente inviato da span
la struttura xhtml è sovradimensionata (ti manca la C di cascading, in pratica )

a 800x600 il menu si sovrappone, e il testo dei contenuti aumenta un sacco il margine a destra....

per i contenuti puoi fare:

1) Il div corpo lo puoi cancellare.
2) La definizione nel CSS dell' ID corpo la copi nell'ID cella o cella grande, è indifferente. Copi tutto tranne la definizione del padding
3) per mantenere la distanza dal titolo fatto con l'immagine dai al div che contiene l'immagine un margin-bottom: 20px;
4) Il border che hai definito in #cellagrande mettilo in #cella così risolvi un problemino di IE.
5) Elimina i width del 100%, se non scrivi niente il width è 100% di suo nei div

[miki_area57]

ciao e grazie dei consigli.

Praticamente questo è il primo sito che faccio con solamente l'uso dei css e xhtml, quindi sto andando molto a prove (e con molta fatica perchè non ho avuto tanto tempo di leggermi guide on-line) e non ho ancora ben capito come funzioni il sistema dei div, cioè qual'è il metodo giusto per creare la struttura.

L'utilizzo di immagini all'interno del css come sfondo è fatto per dare una certa formattazione alla pagina nel caso in cui i css non siano compatibili. I link ho trovato la soluzione (li trasformo in block e gli do il width).

Cmq domattina provo i consigli.

Potrei anche rifare TUTTO, se solo riusci a capire qual'è il metodo giusto, ehehe (tanto per il cliente ho già la home fatta con le tabelle, quindi in caso di bisogno gli do quella)

PS
"la struttura xhtml è sovradimensionata (ti manca la C di cascading, in pratica" vorrebbe dire?

PPS
Visto che mi hai aiutato ti ho clikkato il banner che dici in firma

[span]

era per dire, vedi modifiche del 2° post.

non sfrutti a pieno l'ereditarietà dei css.

non è necessario che ci sia:

<div contenitore>
  <div del tittolo />
  <div del contenuto />
</div>

tu hai utilizzato div del contenuto per distanziare i contenuti dal titolo, il ragionamento però è molto oriantato ad un layout fatto di tabelle. Usi i div come se fossero delle celle di una tabella.

in contenitore puoi definire la formattazione del contenuto
e a titolo dai un margin-bottom per distanziarlo dal testo che segue

cmq non è male dai... c'è un po' di roba inutile ma è un buon inizio


grazie del click