[XHTML - CSS] Compatibilità IE vs FIREFOX

[fabiosh75]

Ciao a tutti,
ho un problema con dei DIV con Firefox, il problema è che il DIV interno esce e si sovrappone al DIV esterno, allegao immagine per chiarire meglio il problema.

il codice HTML è il seguente:

<div id="content_sx">
  <div class="barra"></div>
  <div id="canali">		
  </div> 
</div>

il codice CSS è il seguente:

#content_sx {
	margin-left: 27px;
	width: 485px; 
	padding-left: 3px;
	padding-right: 3px;
	background: #F8F7EF;
   	border: 1px dashed #B2B2B2;
	border-width: 1px 1px;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.barra {
	background-color: #A52A2A;
	width: 100%;
	text-indent: 10px;
	DISPLAY: BLOCK;
}

#canali {
       float: left; 
       margin: 5px 0px 5px 0px;
       padding: 5px 0px 5px 0px;
       border: 1px solid;
       border-color: #000;
       background: #F4F4F4;
       color: #000;
       width: 482px;
}

il problema come potete notare dall'immagine allegata non si presenta in IE... dove sbaglio? Nel codice HTML o nel CSS? :master:

[Mich_]

Fai lo stesso errore di IE: non sei capace di fare le somme.

width = margin-left + border-left + padding-left + largh.interna + padding-right + boder-right + margin-right;

[fabiosh75]

Allora io ho sommato per content_sx
485+27+6+20+2 = 540

per canali 482+2= 484

ma anche se canali lo riduco a 404 totale sempre fuori sta... l'attributi width si riferisce alla larghezza interna giusto? :master:

[Mich_]

Originariamente inviato da fabiosh75
Allora io ho sommato per content_sx
485+27+6+20+2 = 540

per canali 482+2= 484

ma anche se canali lo riduco a 404 totale sempre fuori sta... l'attributi width si riferisce alla larghezza interna giusto? :master:

No. width si riferisce alla larghezza totale (tranne in IE)

[fabiosh75]

Non ti seguo allora width = vale 540 o 485? 540 suppongo (x Firefox) e allora se in canali metto width 400 perchè non cambia nulla e non rientra dentro il div content_sx?

[Mich_]

Ma il problema e` nella larghezza o nell'altezza?

Perche` il grafico che hai postato va fuori in altezza, mentre il conto era sbagliato in larghezza.

E perche` metti float il div interno? rispetto a cosa deve flottare? I float sono trattati in modo leggermente diverso, e potrebbe essere quello il problema con l'altezza.

[fabiosh75]

Il problema era nell'altezza perchè usciva dal div esterno, comunque hai ragione il problema era nel float tolto quello tutto è andato a posto!
Purtroppo non ho ancora ben chiaro il concetto di flusso nei css... finora li avevo usati solo per il testo ed usavo le tabelle questo è il mio primo progetto senza tabelle sta venendo bene però ci sto mettendo 10 volte il tempo che per farlo con le tabelle!

Grazie... anche per la pazienza

[Mich_]

però ci sto mettendo 10 volte il tempo che per farlo con le tabelle

Una nuova tecnologia ha bisogno del suo tempo per essere digerita.
Lo so che la prima volta ci si trova spaesati, ma poi vedrai che la cosa diventa anchepiu` veloce: programmare le pagine con i CSS rispecchia molto meglio la suddivisione logica della pagina.

[fabiosh75]

Si è proprio questo che mi ha spinto a cambiare!
Devo dire che una delle prime cose che ho notato, separando i contenuti dalla grafica è la pulizia del codice XHTML!
Ieri ho comprato un libro sui CSS (CSS guida completa di Gianluca Troiani), sembra un ottimo libro più avanti ti dirò...

Due domande... ok separare i contenuti dalla struttura, es. io gli sfondi li applico tutti tramite CSS però una galleria fotografica dinamica (o non) devo per forza di cose inserire il tag IMG mica le posso mettere nel foglio CSS... o no?

La seconda domanda... io prima usavo i templates di Dreamweaver per il modello della pagina, con i css, dato che comando tutto tramite il foglio CSS, però mi vedo costretto ad usarli nuovamente infatti se io creo un menù sulla colonna di destra e creo 100 pagine ok posso cambiare lo stile a tutti agendo sul CSS ma se devo variare una voce la devo cmq rivedere su tutte e 100 le pagine... o c'è un sistema per aggiornare anche le voci (forse mettendole nel CSS)?

[Mich_]

la pulizia del codice XHTML

E` notevole, infatti. E pulizia significa meno errori e piu` facilita` di manutenzione.


Dai commenti che ho letto qui, il libro di Troiani e` uno dei piu` quotati.

però una galleria fotografica dinamica (o non) devo per forza di cose inserire il tag IMG

In una galleria le immagini sono elementi di contenuto (in generale sono dei link), quindi non ha senso metterli come background.
Ricorda nel tag <img> di inserire l'attributo alt, e nel link l'attributo title.

ma se devo variare una voce la devo cmq rivedere su tutte e 100 le pagine

I CSS non sono la risposta corretta a quel problema (sempre che io abbia capito giusto). La risposta corretta sono le inclusioni lato server, che si possono fare con SSI o con qualsiasi linguaggio lato server (ASP, PHP, ...).