il mio menu si vede giusto con IE7 e sbagliato con FFOX

[Antares88]

Ho realizzato un menù arrotondato per un sito, basato su 3 immagini di sfondo: l'estremità di sinistra, l'estremità di destra, e la parte centrale che si ripete orizzontalmente.

Il codice è questo:

HTML:

<div id="mm">
                <div id="leftcorner">
                    <div id="rightcorner">
                    <div id="menu">
                    <ul id="navlist">
                        <li id="active">
                        	Ambiente[*]Cultura[*]Istruzione[*]Sanità[*]Sociale[*]Trasporti, viabilità, infrastrutture[/list]
                    </div>
                    </div>
                </div>
            </div>

CSS:

div#leftcorner{
	background-image:url(../media/m_left.jpg);
	width:15px;
	height:27px;
}

div#rightcorner{
	background-image:url(../media/m_right.jpg);
	background-position: right;
	background-repeat:no-repeat;
	width:960px;
	height:27px;
}

div#mm{
	width:960px;
	background-image:url(../media/m_1px.jpg);
	height:27px;
}

#navlist li
{
	display: inline;
	list-style-type:none;
	padding-right: 70px;
}

div#menu{
margin-top: 3px;
}

Su Firefox però il testo dei link non esce centrato in altezza, ma leggermente spostato verso l'alto. SU IE7 invece viene visualizzato correttamente. Ecco gli screenshot per capire:


Menù su Firefox

Menù su IE7

Cosa c'è che non va, e come posso risolvere ? è come se in firefox non mi prendesse quel margin-top:3px; del div#menu...

[pr0v4]

Dal mio punto di vista proverei ad impostare un line-height, perche' se nn mi ricordo male dovrebbe essere il metodo giusto per dare l'altezza ad una linea.

Prova a sostituire margin-top: 3px con line-height:27px; che altro non e' che l'altezza del tuo menu.

[blekm]

Originariamente inviato da Antares88
Su Firefox però il testo dei link non esce centrato in altezza, ma leggermente spostato verso l'alto. SU IE7 invece viene visualizzato correttamente.

guarda, per esperienza ti dico che dovrebbe essere il contrario. Devi farlo funzionare correttamente su FF (e Opera, quasi sicuramente) e poi vedere cosa viene fuori su IE

[Antares88]

Originariamente inviato da pr0v4
Dal mio punto di vista proverei ad impostare un line-height, perche' se nn mi ricordo male dovrebbe essere il metodo giusto per dare l'altezza ad una linea.

Prova a sostituire margin-top: 3px con line-height:27px; che altro non e' che l'altezza del tuo menu.

FUNZIONA !!!!! grazie mille, te ne sono grato !

[pr0v4]

Di niente!

Cmq per precisare il comportamento errato e' quello di IE! Perche', sempre se mi ricordo bene, sbaglia a dare dei margini a degli elementi inline come gli <a>, per dare dare i margini a questi elementi vanno dichiarati prima block in questo modo: display:block;

Buon proseguimento a tutti!!!

[Antares88]

omg su internet explorer 6 succede questo

O.o

ma perché mi viene tanta voglia di tornare alle care vecchie tabelle ? T_T

p.s. che poi anche con le tabelle ho qualcosa da ridire... ho notato che IE6 non mi prende l'attributo max-width... cercando qua e la ho visto che non è supportato. In che modo posso sostituirlo ?

[ronnin]

a me succede che su firefox le voci di menu vengano sbattute in basso......
e ho messo line-heigth ma niente...
su IE6 e 7 invece e' perfetto

suggerimenti?

[ronnin]

eccomi qui!
in allegato una immagine nel menu come lo vede firefox...

la fascia con sfondo viola e' il div che dovrebbe contenerlo!
il div e' giuto, ma il contenuto NO!!!

ecco il codice del menu

<div id="menu">
<ul>[*]Home[*]Chi siamo[*]Catalogo[*]Come funziona[*]Dicono di noi[*]FAQ[/list]</div>

ed ecco lo stile applicato

#menu{
color: #000000;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
width: 400px;
height:23px;
background: url(images/scheletro/fondo_menu.gif) no-repeat;
float:left;
text-align:left;
background-color:#CCCCFF;
padding:0 auto;
}

#menu ul { float:left; width:400px; vertical-align: middle;}
#menu ul li   {list-style:none; padding:0px 10px 0px 0px; float:left;line-height:23px; height:23px} 
#menu ul li a {text-decoration:none; color:#000000; font-weight:bold;line-height:23px; height:23px}

per favore... AIUTOOO!!!
e' da ieri che ci sto sopra...

[Mich_]

Perche` il div #menu e` floattato?
C'e` un clear dopo il float? (importante per vedere tutto un oggetto flottato ! )

Perche` il vertical-align? (che tra l'altro non dovrebbe aver effetto fuori da una tabella)

Inoltre nello stile per il link hai messo le dimensioni, che pero` non si possono applicare ad un oggetto inline. Forse devi aggiungere a tale stile display: block;

[ronnin]

ok... tolto il float, aggiunto il display (ho fatto tutte le prova...) niente da fare!

le voci di menu non si schiodano da li!!!
non so che fare...

a questo punto penso che togliero' la lista e mettero una serie di DIV inlinea.......