dimensione fissa di elementi <li> con firefox

[No?Ya]

Ciao a tutti!

Strano ma vero per una volta nella mia vita IE interpreta correttamente il CSS mentre Firefox no!

Il problema è il seguente:

vorrei realizzare un menu in cui ogni voce sia un elemento[*]

avrò così:

<ul id="pulsantiera">
	[*]home
	[*]chi siamo
	[*]gallery
	[*]contatti[/list]

(chiaramente non ho ancora definito le ancore come si devono comportare)

Vorrei che ogni voce del menù avesse una dimensione fissa, in modo da creare dei "pseudobottoni" 75x50 px.

ho scritto il css così:

ul#pulsantiera{
	list-style: none;
	margin:0;
	padding:0;
}
ul#pulsantiera li{
	margin:0;
	padding:0;
	display: inline;
	min-height: 50px;
	min-width: 75px;
	height:50px;
}
ul#pulsantiera li a{
	margin:0;
	width:75px;
	height:50px;
	min-height: 50px;
	text-align:center;
	text-decoration:none;
}

e la cosa assurda è che Internet Explorer fa giusto, ovvero mi da ogni singolo elemento[*] della dimensione giusta (75 x 50 pixel) mentre Firefox adatta la grandezza in base alla lunghezza del testo del singolo elemento[*].

Ho provato anche ad impostare le proprietà "min-width" ma pare ignorarle...

qualcuno ha consigli?

Grazie!!

[Fello]

IE non fa mai giusto...... credimi :-)

nel tuo caso, da quello che vedo, devi sostituire

display: inline;

con

float:left;

per ottenere il risultato sperato

[fcaldera]

se assegni display: inline ad un elemento le sue dimensioni diventano ininfluenti per cui anche in questo caso è IE che sbaglia a comportarsi così. L'alternativa è floattare le voci[*]

fai così

ul#pulsantiera li{
margin:0;
padding:0;
display: inline;
float: left;
width: 75px;
height:50px;
}


Ciao

[No?Ya]

Grazie ragazzi !!! Ora funziona...

Resta ancora una cosa però... ho messo ora le proprietà dell'anchor innestato:

ul#pulsantiera li a{
	font-size:10pt;
	color: white;
	margin:0;
	width:75px;
	height:50px;
	min-width:75px;
	min-height: 50px;
	text-decoration:none;
}
ul#pulsantiera li a:hover{
	background-color: red;
	color:black;
}

anche in questo caso firefox quando punto il mouse sopra l'anchor si attiva solo se sono esattamente sui testi dei link, con IE invece il link è attivo per tutta l'area del bottone (quello che vorrei avvenisse pure con Firefox)... dove ho sbagliato?

se volete vedere la pagina ho postato questo .rar: prova layout

*edit: precisazione... per cercare di risolverlo, ho messo una proprietà li:hover che funziona con firefox ma non con IE... però è una soluzione che non mi piace perchè di fatto si illumina l'area ma non è cliccabile se non quando si punta esattamente su una parola, quindi potrebbe essere fuorviante per l'utente!


grazie ancora!

[fcaldera]

aggiungi al link

display: block;

e le dimensioni che hai dato all'elemento li

[No?Ya]

grazie mille!

p.s.

Ho visto il tuo portfolio... molto belli i siti che hai realizzato!