CSS: differenze tra browser

[zetadi]

Sto provando a muovere i primi passi tra i CSS.
Ho però notato delle differenze di impaginazione tra Opera, IE e Mozilla.
Ad esempio ho creato una pagina contenente una serie di piccoli articoli, posti in verticale, inseriti ciascuno in un DIV.
Mozilla crea uno spazio minore tra un div e l'altro, così, utilizzando la funzione "margin-bottom:-10px;" per avvicinarli, ottengo una corretta visualizzazione con IE ed Opera ed una quasi sovrapposizione con Mozilla.
E' una cosa normale?
Oppure dovrei utilizzare altri tag? Anche se per l'impaginazione sto seguendo dei tutorial, e non credo siano errati!!
Oppure pensavo di creare un foglio solo per Mozilla: a me pare la soluzione migliore. Che ne dite?
Qualcuno mi da una dritta su come richiamare questo foglio?

grazie e ciao

[Toeke]

In questo forum potranno certamente aiutarti meglio ^_^

Toeke

[blakwolf]

il fatto è questo... i browser con motore gecko sono molto più corretti con i css, infatti sia opera sia IE soffrono in molte versione di mancanze e del box modeled.

il tuo problema penso che sia legato proprio ad uno di questi ultimi problemi (box modeled) o al display di default del div che dovrebbe essere block e non inline

al massimo qui trovi qualche tutorial sul box modeled

www.constile.org

il sito ti consiglierà la tecnica di tantek che però io ti sconsiglio perchè a volte in xhtml crea problemi con i nuovi browser, piuttosto annidia gli oggetti

[blakwolf]

per esempio

sbagliato:

<div style="width:100px; padding:10px;">testo</div>


giusto per evitare box modeled:

<div style="width:100px;"><div style="margin:10px;">testo</div></div>

[blakwolf]

errore posting

[zetadi]

Io tutte le proprietà le inserisco nel foglio: perciò nella pagina ci sarà solamente

<div id="articolo"><h2>Titolo articolo</h2>


Testo articolo, testo articolo, testo articolo, testo articolo</p></div>

Le impostazioni usate nel foglio sono:

#articolo h2 { font-size:2em; color:#990000; font-weight:bold; }
#articolo p { text-align:justify; }

con dimensione e famiglia del font impostate nel body.
Il mio problema ripeto è che la spaziatura tra titolo e testo dell'articolo, e tra gli articoli stessi è differente tra IE ed Opera e Mozilla.

Cmq non penso si tratti del box modeled visto che uso tutte le ultime versioni dei browser.
Per quanto riguarda Constile. è lì che mi son documentato e sul testo sui CSS sempre di G. Troiani.

display di default del div che dovrebbe essere block e non inline

Mi spieghi meglio di che si tratta, per cortesia?
Mi dici anche se è possibile impostare un foglio solo per mozilla.
Grazie

[mylinks]

Prova a definire le proprietà margin di h2 e p e tutto dovrebbe andare a posto ...
cmq l'obettivo dei CSS non è tanto quello di avere un sito "uguale" per tutti i browser, ma un sito "visibile" per tutti i browser ... quindi ti consiglio di testare la tua pagina anche senza CSS ... ricorri anche a validatori online dell'accessibilità ... io ne ho avuto bisogno

[mylinks]

div {display: block;}

Prova così

[blakwolf]

inoltre ricordati che solo netscape / mozilla e safari hanno il box modeled esatto, tutti gli altri compreso IE6 sono ancora buggati

tra l'altro forse il problema può essere questo... dimmi che i div sono singoli perche l'attributo id="" DEVE essere univoco... non devono esistere due oggetti con lo stesso id in una pagina, al massimo usa class e raggiungilo con .classe