Differenza di visualizzazione tra IE e FireFox

Valeria75 · 1 Ott 2006

Ciao a tutti, vorrei capire come gestire correttamente un margine che sia visualizzabile allo stesso modo tra IE e FireFox. Nel dettaglio nel codice HTML allegato il bordo rosso risulta centra in IE (corretto), mentre con FireFox risula allineato a SX... come posso fare in modo che sia sempre centrato?

<style type="text/css">

/* Login */
#boxbarlogin {
width:205px;
float:left;
}

#boxbarlogin-top {
width:100%;
height:38px;
background-image: url(Box/BarLogin_Top.jpg);
background-repeat: no-repeat;
}

#boxbarlogin-back {
width:100%;
height:150px;
background-color:#999999;
background-repeat: no-repeat;
}

#boxbarlogin-down {
width:100%;
height:10px;
background-image: url(Box/Bar_Down.jpg);
background-repeat: no-repeat;
}

#boxbarlogin-content {
width: 175px;
border: 1px solid #FF0000;
}

#content {
width: 760px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 0;
}

#menu-sx {
border: 0;
float: left;
width: 203px;
background-color: #666666;
}

#menu-dx {
border: 0;
float: right;
width: 202px;
}

#center-area {
border: 0;
float: left;
width: 350px;
text-align: center;
margin: 0 0 0 0;
}

</style>
</head>
<body>

<div id="content">

<div id="menu-sx">

<div id="boxbarlogin">
<div id="boxbarlogin-top"></div>
<div id="boxbarlogin-back">
<div id="boxbarlogin-content">
testo testo testo <br> testo testo testo <br>
</div>
</div>
</div>
</div>

</div>
</body>

Grazie

dead · 2 Ott 2006

Anche se sembra che sia IE a fare la cosa giusta, come al solito è il contrario. Infatti al #boxbarlogin-content manca la proprietà margin:auto; Se tu non precisi la posizione del div, FF correttamente lo mette nel flusso, cioè lo allinea a sx.

NOTA: in questo caso la soluzione è semplice, però ci sono dei casi più complicati in cui le direttive da dare a IE ed FF nel foglio di stile vanno in contrasto l'una con l'altra. Come risolvere in questi casi?
La maniera migliore è fare un foglio di stile condizionale.

Nell'header della tua pagina inserisci queste istruzioni:
<link rel="stylesheet" type="text/css" media="screen" href="stile.css" />


Poi crei DUE fogli di stile: stile.css e stileIE.css. Nel primo ci metti le istruzioni che vanno bene sia per FF che per IE, nel secondo le istruzioni SOLO per IE.

FF non leggerà il secondo foglio di stile, mentre IE si.

Valeria75 · 2 Ott 2006

Grazie mille per la risposta dettagliata e per i suggerimenti...

Ora funziona correttamente!!

Un paio di dubbi: margin: auto; mi consigli di metterlo anche negli altri elementi del foglio di stile?? (in base alla logica che ho seguito e che ho allegato)

margin: auto .... cosa vuol dire "auto"... perchè lo centra?? (correttamente ovviamente), non capisco la "auto" per cosa sta?

Grazie ancora

dead · 2 Ott 2006

auto significa automatic o qualcosa del genere. In pratica lasci al browser il compito di centrare l'elemento.

Curiosamente in IE questa direttiva auto, non funziona (e ti pareva?

, quindi in IE per essere sicuro di centrare devi mettere text-align:center (che invece non dovrebbe riguardare l'elemento ma il testo al suo interno!

Per gli altri elementi vedi tu se serve o meno; dipende dal contesto.
Ricordati che con FF margin:auto allinea il contenitore, non il testo al suo interno (per quello c'è text-align:center)

Valeria75 · 2 Ott 2006

Chiarissimo!!! Quindi basta inserire sempre text-align e margin e "dovrei" essere apposto ;-)

Grazie

Cerca

Cerca

Differenza di visualizzazione tra IE e FireFox

Valeria75

Nuovo Utente

dead

Utente Attivo

Valeria75

Nuovo Utente

dead

Utente Attivo

Valeria75

Nuovo Utente

Discussioni simili