Problema tra IE e Firefox

**garlick** · 01-12-2005, 20:00

Ciao, ho la mia pagina:

codice:


<body>

<div id="container">

<div id="header"></div>


<div id="nav">

<div id="nav-middle">
[#RICERCA#]
[#CALENDARIO#]
[#ARTICOLI#]
[#SONDAGGI#]

[#FEED#]


</div>

</div>

<div id="content">
<div id="testo">

[#CONTENUTO#]

</div>
</div>

</div>


</body>

Con il relativo foglio di stile:

codice:

div#container{
margin:0 auto;
text-align: center;
width: 700px;
}

div#header{

margin-top: 0px ;
text-align: left;
width: 700px;
background:  url(img/head.gif);
height: 185px;
}

div#content{
float: left;
margin-top: 0px ;
text-align: left;
width: 495px;
background:  url(img/bg-left.gif) repeat-y;

}

div#nav{

float: right;
margin-top: 0px ;
text-align: left;
width: 205px;
background: url(img/bg-right.gif) repeat-y;

}
div#nav-middle{
float:right;
margin-top: 0px ;
margin-right: 0px ;
text-align: left;
width: 160px;
margin-left:10px;
}

div#testo{
float: left;
width: 430px;
margin-top: 0px ;
margin-left: 25px ;
text-align: justify;
padding: 10px;

}

div#testonav{
float: left;
padding: 5px;
width: 130px;
margin-top: 0px ;
text-align: left;
margin-left: 9px;
}

Il problema è che non capisco come mai ci sia un a capo tra le due colonne del layout utilizzando Internet Explorer, eppure penso di aver utilizzato correttamente float: left e float: right... usando Firefox questo problema non si presenta, tutto è allineato come dovrebbe essere.
Altra questione: i margini del testo nella colonna di sinistra sono diversi cambiando browser, in IE la distanza tra il testo e il bordo è come dovrebbe essere, mentre in firefox il testo è appiccicato. Come posso risolvere in modo che sia la stessa cosa per i due browser?

Ultima questione: come posso fare affinchè la colonna di destra (più corta) abbia la stessa lunghezza di quella di sinistra (più lunga)? Io non so a priori quanto questa sia lunga e quindi non posso impostarlo manualmente.

Per vedere online cosa succede, potete andare qui:

http://www.michelerua.it/dblog

Grazie

**Zulkifar2** · 01-12-2005, 21:12

Io farei:

<body>
<div id="container">

<div id="header"></div>
<div id="content">
<div id="testo"></div>
</div>

<div id="nav">
<div id="nav-middle"></div>
</div>

</div>
</body>

e per i css cambierei:

div#content{
margin-top:0px;
margin-left: 205px ;
text-align: left;
width: 495px;
background: url(img/bg-left.gif) repeat-y;}

div#nav{
float: right;
margin-top: 0px ;
text-align: left;
width: 205px;
background: url(img/bg-right.gif) repeat-y;}

Sono alle prime armi pure io ma mi sento di suggerirti questo. Se funziona ti offro da bere ehehehe :maLOL:

**garlick** · 02-12-2005, 00:00

peccato, niente drink gratis, non funziona, anzi è peggio di prima perchè così le due colonne sono una sotto l'altra invece che una di fianco all'altra...

Cavoli, come posso risolvere? :master:

**garlick** · 02-12-2005, 00:36

Dunque... stavo cercando di risolvere il mio problemino e sono arrivato a questo punto:

sono riuscito a far stare tutte e due le colonne alla stessa altezza riducendo il margine destro, che a quanto pare era troppo elevato in IE e faceva sballare tutto mentre in Firefox tutto funzionava... :master:

Per fare in modo che le colonne siano della stessa altezza e non una più corta dell'altra ho pensato di mettere uno sfondo in orizzontale al div "container", in modo che coprisse tutta l'altezza delle colonne. Purtroppo però così in IE funziona alla perfezione mentre in Firefox nonm i visualizza nessuno sfondo!

I cambiamenti rispetto al codice che ho scritto nel primo post sono solo:

div#container{
margin:0 auto;
text-align: center;
width: 700px;
background: url(img/content.gif) repeat-y; }

Ricordo che il div "container" al suo interno contiene i div del corpo e della barra a destra. Perchè in Firefox lo sfondo del div container non si vede?

Altro problema: mi sembra a questo punto che se io imposto i margini di un div a destra o a sinistra con (margin-left= 15px per es.), questa distanza viene calcolata in modo diverso da Firefox rispetto a IE, come mai?

**Zulkifar2** · 02-12-2005, 04:17

(Cavolo nel div content ti ho suggerito margin-left al posto di margin-right scusa... spero te ne sia accorto)

Non puoi postare qui il sito? Astrarre tutto è un po' complicato..

Io non metterei uno sfondo al content se poi sopra ci sono dei div che lo coprono (ma non sono sicuro di questo)

Se aggiungi dei margini a un div firefox giustamente somma alla dimensione del div quella dei margini, mentre IE non lo fa (tanto per cambiare). Prova a cercare "box model"..

Discussione: Problema tra IE e Firefox

Strumenti discussione

Ricerca discussione

Visualizza

Problema tra IE e Firefox

Permessi di invio