float left differenze tra FF e IE

**max103** · 17-05-2006, 12:39

ho un div "wrapper" che contiene "content" e "navigationright"
dentro "content" ci sono icone di una galleria fotografica, dentro "navigationright" un menu.
In FF vedo ok, in IE le icone sbordano e vanno sopra a "navigationright".
Come posso evitare che i contenuti dei due div si sormontino?

CSS:
div#wrapper{
float:left;
width:100%;
}
div#content{
float:left;
margin-right:200px;
margin-top: 3px;
}
div#navigationright{
float:right;
width:200px;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 0px;
margin-left:-200px;
background:#F5F4D6;
border-top: 0px;
border-right: 0px;
border-bottom: 2px solid #918F71;
border-left: 0px;
}

allego uno schema per capire meglio:
nero=#wrapper
verde=#content
arancio=#navigationright
grigio=icone

grazie

**max103** · 17-05-2006, 15:37

sto facendo delle prove:

al div content ho aggiunto clear:left;

in FF sempre bene, in IE sempre male, ma ora mi manda a capo tutte le icone (giustamente)...

**Mich_** · 17-05-2006, 15:41

Anzitutto devi sapere che il box model di IE e` diverso da quello degli altri browser.

Puoi togliere bordi e padding alle icone, ed a tutti i blocchi, e dovrebbe tornare uguale (salvo il bug dei tre pixel).
Oppure puoi ridefinire le varie larghezze solo per il browser IE:

codice:

<!--[if IE]>
  <style ...>
    #navigationright{
       width:196px;
    }
    .icona {
       width: ???px; /* il width dell'altro - 2*(bordi+padding)
    }
  </style>
<![endif]-->

**max103** · 17-05-2006, 16:14

ok, ora provo, scusa se ti faccio altre due piccole domande:

- il codice if che mi hai allegato in ordine di lettura del foglio di stile, va prima, dopo o dove voglio rispetto a quello (standard)?

- con questo concetto potrei creare due fogli di stile separati, if IE carica questo, if tutti gli altri carica quello.
Dato che ho caricato il css da file esterno, come faccio per mettere l'if direttamente nell'head dell'html e fargli scegliere a secnoda del browser quale foglio caricare?

spero di essere stato chiaro.

grazie

**fcaldera** · 17-05-2006, 16:17

inoltre ti ricordo che se imposti un float ad un elemento con un margine, questo raddoppierà su IE a meno di non impostare display: inline.

**Mich_** · 17-05-2006, 16:43

- il codice if che mi hai allegato in ordine di lettura del foglio di stile, va prima, dopo o dove voglio rispetto a quello (standard)?

Chiaramente dopo: e` una correzione che vai a fare su altre dichiarazioni. Basta che inserisci le dichiarazioni che devono essere modificate

- con questo concetto potrei creare due fogli di stile separati, if IE carica questo, if tutti gli altri carica quello.

No, non e` la stessa cosa. Il CSS standard lo carica comunque, poi se il browser e` IE (e puoi anche distinguere le varie versioni) carica anche l'altro stile.

Dato che ho caricato il css da file esterno, come faccio per mettere l'if direttamente nell'head dell'html e fargli scegliere a secnoda del browser quale foglio caricare?

Dentro i commenti condizionali puoi mettere il tag <link> anziche` lo stile. La cosa non cambia

I commenti condizionali, sono visti da tutti come commenti HTML. Solo IE li interpreta come comandi. A volte vi vengono inseriti script o richiami a script specifici per IE
Altri esempi:

**max103** · 17-05-2006, 16:44

ho fatto alcune prove, ma mi succede sempre la stessa cosa il div#content con le icone (che in realtà non sono semplici icone, ma div#icona con dentro l'icona vera e prorpia e altri elementi riferiti alla foto)
mi schiaccia il div#navigationright, allego uno schemino

scusa mich ho postato senza leggere la tua risposta...

**max103** · 17-05-2006, 16:56

Originariamente inviato da Mich_

I commenti condizionali, sono visti da tutti come commenti HTML. Solo IE li interpreta come comandi. A volte vi vengono inseriti script o richiami a script specifici per IE

prometto che poi provo a mettere in atto tutto quello che ci siamo detti,

quindi io potrei mettere in head una cosa così?

**Mich_** · 17-05-2006, 17:33

La sintassi e` giusta; la semantica un po' meno.
<!--[if gte IE 5.5000]>
significa se e` IE5.5 o maggiore (quindi anche IE6 e IE7).

**max103** · 17-05-2006, 18:05

ho fatto una prova di questo tipo, ho aggiunto a content un colore, per vedere se riconosce l'if:

codice:

<head><link href="stili.css" rel="stylesheet" type="text/css" />


<!--[if lte IE 5.5]>
<style type="text/css">
div#content{
	background-color: #9966FF;
	margin-right: 200px;
	float: left;
	}  
</style>
<![endif]--></head>

ma non succede nulla in IE, se invece tolgo l'if,

allora va, come mai? C'è un errore nel codice dell'if?

codice:

<head><link href="stili.css" rel="stylesheet" type="text/css" />


<style type="text/css">
div#content{
	background-color: #9966FF;
	margin-right: 200px;
	float: left;
	}  
</style></head>

scusa: ma il valore condizionale (if) non posso scriverlo direttamente nel foglio di stile, lasciando pulito l'html?

Discussione: float left differenze tra FF e IE

Strumenti discussione

Ricerca discussione

Visualizza

float left differenze tra FF e IE

Permessi di invio