Differenze di formattazione tra i browser

[Zorck]

Ho un problema di formattazione del testo a seconda dei diversi browser. Per avere i margini laterali al minimo ho impostato il testo in questo modo:

.Annuncio {
font-family: "Palatino Linotype";
color: #660000;
font-size: 16px;
font-weight: bold;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
text-indent: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

Il sito è www.triches.eu ed il paragrafo con questa formattazione è quello rosso a destra dell'immagine ("Contattatemi per un preventivo..." ecc). La riga ed il paragrafo sono impostati così:

<th width="490" bgcolor="#CCCCCC" scope="col" valign="middle"><p class="Annuncio" align="center">Contattami per un preventivo ecc... </p></th>

Su Internet Explorer funziona tutto bene, mentre con altri programmi (ad esempio con FireFox) vengono lasciati dei margini tutto intorno al testo.

Non sarebbe un problema, non fosse per il fatto che su FireFox invece di restringersi il paragrafo ed andare a capo prima succede che mi allarga la cella della tabella.... e questo mi scombina tutta l'impaginazione: la colonna scura di destra dovrebbe essere larga 20 pixel e fare da cornice, invece su FireFox mi si restringe parecchio.

C'è un modo per evitare questo problema? Dipende dalle impostazioni sul browser oppure ho fatto qualche errore io?

[Zorck]

Nessuno ha una soluzione per questo problema? Ho notato che capita anche con le vecchie versioni di Internet Explorer.

La visualizzazione corretta della pagina (che vedo nell'anteprima di Dreamweaver) è quella in cui la fascia grigia del bordo destro della pagina è larga quanto le fasce grige orizzontali, cioè 20 pixel.

[NeoWolf]

margin:0px

[Zorck]

Grazie dell'indicazione. Dove lo dovrei mettere?

Ho provato a metterlo nella formattazione di tutti i testi, giusto per provare, ma non ha funzionato. Si sono appiccicati tutti tra di loro, ma lo stesso la cella con il testo si è allargata a discapito di quella di destra.

Ho provato a metterlo anche nella tabella, ma non è cambiato nulla (tra l'altro Dreamweaver non me lo riconosce tra i comandi di tabella, quindi non penso vada li).

[NeoWolf]

nel css ma non capisco esattamente cosa vuoi che esca?

[Zorck]

A sinistra della pagina c'è una colonna grigia che fa da cornice. In tutte le altre pagine questa è larga 20pixel, esattamente come quelle 3 fasce orizzontali dello stesso grigio.

Su alcuni browser invece nella home page il testo a sinistra dell'immagine (dove c'è scritto in rosso "Contattatemi per un preventivo...") fa allargare la sua cella a discapito della colonna grigia della cornice, che quindi diventa molto più stretta (ad occhio sarà un 5 pixel). Ho impostato la larghezza di entrambe le celle con width="x", ma il browser se ne frega e le ridimensiona come gli pare.

Questo succede con l'ultimo Mozilla Firefox e con alcune versioni di Internet Explore. Con altre versioni di Internet Explorer invece funziona tutto come dovrebbe.

Ora invece sono in ufficio dove c'è IE 7 e le celle hanno tutte la larghezza corretta, però ha problemi il menù di sinistra: compaiono dei grossi bordi bianchi tra una voce e l'altra che non dovrebbero esserci ed il sottomenù si apre molto lontano rispetto al menù principale.

Io non capisco come sia possibile che uno stesso identico codice è visto in maniera totalmente diversa dai vari browser ed addirittura tra più versioni dello stesso browser.

[Zorck]

Cerco di spiegarmi con delle immagini, che effettivamente è complicato da spiegare a parole:

Questo è quello che vedo con l'ultimo Firefox (mi pare il 3.6) e con IE 8:



Si vede tutto abbastanza bene, ma la colonna di destra che dovrebbe fare da cornice al sito dovrebbe essere larga 20 pixel, come le due righe orizzontali dello stesso grigio... invece il testo alla sua sinistra si espande e la rimpicciolisce (tutte le celle della tabella hanno impostato width="x", quindi la larghezza corretta glie l'ho data, ma lui se ne frega).

Questo è quello che vedo con IE 7:



La colonna di destra è ok, ma svalvola completamente il menù: compaiono delle righe bianche fastidiosissime sopra ogni cella ed i sottomenù si allontanano dal menù.

[Zorck]

La dimensione della cornice l'ho risolta per tentativi, era il testo scorrevole che creava casini. Continuo ad avere problemi con il menù però, che su IE 7 o su IE 8 in "Visualizzazione Compatibilità" continua a svalvolare.

Ho capito che il problema sta in questo campo, che è quello che definisce gli stili delle caselle dei sottomenù:

ul.MenuBarVertical ul
{
margin: 5% 0 0 95%;
padding: 0;
list-style-type: none;
opacity: 0.95;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 300px;
left: -1000em;
top: 0;
}

Il menù è di 150px mentre il sottomenù è di 300px.

In pratica con IE8 o Firefox calcolano il 95% di margine rispetto alla casella precedente, quindi il primo sottomenù si colloca a 142,5 pixel dal bordo sinistro del menù (95% di 150 pixel) ed il secondo sottomenù si colloca a 285 pixel dal bordo sinistro del primo sottomenù (95% di 300 pixel).

IE 7 invece lo calcola sempre in base ai 300px dei sottomenù, quindi si porta a 285 pixel di distanza dal margine sinistro sia nel primo che nel secondo sottomenù, ma così facendo il primo sottomenù viene staccato dal menù principale.

C'è modo di correggere questa cosa?