Differenza di visualizzazione tra IE e FireFox

Valeria75

Nuovo Utente
28 Set 2006
29
0
0
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">
<!-- Menu sinistro -->
<div id="menu-sx">
<!-- Login -->
<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>
<!-- Fine menu sinistro -->
</div>
</body>


Grazie
 

dead

Utente Attivo
22 Lug 2005
684
0
0
55
Brescia
www.dead.it
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" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="stileIE.css" />
<![endif]-->


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

Nuovo Utente
28 Set 2006
29
0
0
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

Utente Attivo
22 Lug 2005
684
0
0
55
Brescia
www.dead.it
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! :confused:

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

Nuovo Utente
28 Set 2006
29
0
0
Chiarissimo!!! Quindi basta inserire sempre text-align e margin e "dovrei" essere apposto ;-)

Grazie
 
Discussioni simili
Autore Titolo Forum Risposte Data
C Ma perchè!!!! Differenza visualizzazione con iOS Safari HTML e CSS 2
S Differenza date record successivi MS Access 7
Gabriele Visioli Differenza tra hosting e hosting WordPress Hosting 4
S Differenza tra le funzioni include () e require ()? PHP 1
T differenza fra mysql xampp e un mysql server Database 0
U [PHP] Differenza tra amministratore e utente PHP 2
M PHP Arrotondamento minuti in differenza tra due Orari PHP 9
Emix [PHP] Differenza Date + Ore PHP 3
S [PHP] Eseguire differenza su dati SQL presenti sulla stessa colonna PHP 1
V [PHP] Differenza reale tra bindParam e bindValue PHP 8
K Certificato SSL (https) gratuito o a pagamento? che differenza c'è? Server Dedicati e VPS 1
andrea.peo Calcolo differenza fra record attivo e precedente PHP 1
G Calcolo differenza valori provenienti da una tabella PHP 0
giap Classi stili/stili per singoli TAG- differenza- HTML e CSS 2
Z Google: qual'è la differenza tra Popolarità e Autorevolezza di un sito? SEO e Posizionamento 1
M Qual'è la differenza tra Server.Transfer e Response.Redirect? ASP.NET 1
Giacomo92 Differenza tra Webmaster e Web designer? Webdesign e Grafica 2
V Calcolare la differenza tra due date in PHP PHP 1
V Differenza tra operatori == e === in javascript? Javascript 1
felino [C#] Differenza tra ClipboardPasted e ClipboardPasting .NET Framework 2
F differenza tra 2 date PHP 5
M Calcolare differenza temporale tra datetime salvati sui records di una tabella mysql PHP 18
Monital Differenza tra int smallint etc. Database 5
S Differenza data PHP 1
A Differenza tra anteporre o posporre l'operatore di incremento nel ciclo for Javascript 5
Shyson Differenza UTF-8 e gli altri HTML e CSS 12
L Reale differenza con il precedente HTML HTML e CSS 1
C Differenza tra due ore PHP 17
PenguinLover Differenza tra detrazioni e deduzioni? Leggi, Normative e Fisco 3
Monital Differenza tra date PHP 8
YellowMan Differenza tra Server Virtuale e Cloud Server Cloud Computing e Cloud Server 1
M Differenza tra precision e scale PHP 2
novello88 Differenza tra include() e require() PHP 18
M [VB.Net] Che differenza c'è tra CType e DirectCast? ASP.NET 1
S Differenza tra queste righe di codice Javascript 2
N Con Google Crome a differenza di Explore i comandi per la musica non funzionano Javascript 0
S Differenza tra orari sballata! PHP 2
G Differenza fra due date PHP 5
M Differenza tra richiesta sincrona e asincrona Ajax 0
emanuelevt differenza tra $array[]='valore' o array_push($array,'valore') PHP 2
emanuelevt differenza concreta tra array_rand e shuffle PHP 2
SolidSnake4 differenza tra sleep() e microtime() PHP 9
I Differenza data PHP 2
M Differenza tra date e countdown PHP 4
M Differenza tra valori sulla stessa colonna Database 10
A Differenza comportamento tra click mouse e pressione tasto invio Visual Basic 0
borgo italia differenza tra applet e script? Javascript 10
I Differenza tra blog e sito Webdesign e Grafica 12
M pagerank vs. trustrank: che differenza c'è? SEO e Posizionamento 2
A Differenza in b / w GET e POST PHP 0

Discussioni simili