ripropongo il problema menu...

[paolabacci]

ciao! scusate l'insistenza, ma non riesco a venirne a capo!
giorni fa ho iniziato una nuova discusione riguardo un menu orizzontale che su safari e firefox si vede bene, mentre in i.e. i link si dispongono a scaletta...

prima che posti tutto il codice qualcuno forse saprebbe darmi una spiegazione sul perchè potrebbe accadere ciò?...se servirà posterò il codice e il css...intanto non si sa mai...vi mando l'indirizzo, che è

www.gifidea.altervista.org se avete i.e. vi renderete bene conto, purtroppo!, a cosa alludo!
uff...grazieee!!!


un saluto a tutti voi!

[Mauro Accornero]

il tuo problema è dato dal float right dato sul link della lista ti suggerirei di evitare di dare insieme un display inline a li e un float right ai link. Prova ad impostare il menu così:

ul{margin:0;padding:0px;}
ul li{display:inline;margin:0px;padding:0px;}
ul li a{color:#fff;}
ul li a:hover{color:ccc;}

in questo modo hai un menu corretto se vuoi impostare la tua grafica considera che gli elementi inlinea per internet explorer non hanno bordo margine o padding quindi utilizza le immagini di background.

Se non riesci con il display:inline usa float left sia su li che sui link, il float trasforma automaticamente l'elemento in un elemento di blocco e puoi gestire altezza bordi e immagini anche sul link.

[seed_squall_it]

In questi casi, ti suggerisco di cambiare totalmente approccio. Non solo per i problemi dei posizionamenti con quel browser da terzo mondo di IE, ma anche per i contenuti del sito. Infatti, se flotti a destra gli elementi di lista del menu, nel codice sei costretta a scriverli al contrario (il primo è appunto "contatti", mentre a video appare giustamente per ultimo a causa del float: right).

Struttura il menu mettendo i link in ordine nel codice, così come devono apparire visualmente sulla pagina. Poi, assicurati di avere un box (div) che racchiude l'intera lista (ul) del menu. Prima di chiudere questo box, aggiungine un altro vuoto a cui assegni una classe CSS che fa il clear sia a destra che a sinistra (clear: both). Es.:

<div id="nav">
<ul>[*]Link 1[*]Link 2[*]Link 3[/list]
<div class="clr-both"></div>
</div>

A questo punto, nel tuo CSS aggiungi la regola per il clear, flotti a DESTRA l'intera lista (ul) e a SINISTRA i singoli elementi di lista (li, e anche gli elementi a al loro interno, per evitare dei bug). Cosa importante è assegnare almeno una dimensione al box che contiene l'intera lista (meglio se indichi la larghezza), perché altrimenti per IE è "privo di layout":

#nav {
width: 100%; /* Questo "assegna layout" in IE al box contenitore dei float */
}

#nav ul {
float: right; /* Nota che qui NON si devono specificare dimensioni. Ecco perché serve un box che contiene l'intera lista a cui assegni almeno una dimensione */
}

#nav li {
list-style: none;
float: left;
}

#nav a {
float: left; /* Evita alcuni bug degli elementi a contenuti in elementi di lista flottanti */
}

.clr-both {
font-size: 1px; /* Utile per l'immondo di IE! */
height: 0; /* Ancora utile per l'immondo di IE! */
clear: both; /* Pulisce il float in entrambe le direzioni (perché prima hai flottato sia a destra che a sinistra) */
}

E' importante inserire un elemento vuoto che faccia il clear appena prima di chiudere il box che contiene la lista, in modo che il flusso normale del documento sia ripristinato in quel punto (il box che contiene la lista sarà quindi influenzato dall'altezza degli elementi flottanti che contiene).

Il vantaggio di questo metodo è che le voci del menu (sia i li che gli a) diventano elementi block-level, quindi puoi impostare margini, bordi e padding come vuoi, mentre se fossero disposti orizzontalmente solo con display: inline ignorerebbero i margini e i padding verticali.

Ricordati che se assegni un margine orizzontale ad un elemento flottante sullo stesso lato del float (float: left e margin-left insieme per es.), IE raddoppia il margine (mi pare che il 7 non lo faccia, ma non si sa mai...)! Quindi devi aggiungere alla regola dell'elemento anche display: inline.