px in barra nav non tornano solo in ff

[gabar-el]

ciao, ho un problema di qualche px con 2 nav in firefox. prima avevo il problema anche su ie, ma con la proprietà vertical-align ho risolto. ff però non ne vuole sapere e non capisco perchè. ho provato varie cose ma nulla, le due barre sono visibili qui e qui il css in questione....
grazie

[Braco]

Originariamente inviato da gabar-el
ciao, ho un problema di qualche px con 2 nav in firefox. prima avevo il problema anche su ie, ma con la proprietà vertical-align ho risolto. ff però non ne vuole sapere e non capisco perchè. ho provato varie cose ma nulla, le due barre sono visibili qui e qui il css in questione....
grazie

usa padding

[gabar-el]

non sei stato molto preciso, potresti esserlo per favore? ho già provato a smanettare con padding, ma l'effetto hover deve far rimanere esattamente a filo i li. e poi usando padding non rischio di "sformare" il layout negli altri browser che ora va bene?
grazie

[Braco]

Originariamente inviato da gabar-el
non sei stato molto preciso, potresti esserlo per favore? ho già provato a smanettare con padding, ma l'effetto hover deve far rimanere esattamente a filo i li. e poi usando padding non rischio di "sformare" il layout negli altri browser che ora va bene?
grazie

Padding è riconosciuto da vari browser, qui trovi la guida standard http://www.w3schools.com/css/css_reference.asp anche qui in italiano http://www.diodati.org/w3c/css2/cover.html#minitoc o qui http://www.morpheusweb.it/html/manuali/css.asp

[gabar-el]

mhhh.... so utilizzare il padding e so cosa è. mi pare tu non abbia capito il mio problema....

[Mich_]

Ho guardato la tua pag, ed in effetti non mi piacciono alcuni effetti nelle barre.
Pero` non so cosa vorresti esattamente.

Guardando il CSS, noto una certa confusione; un disordine nei vari selettori.

Anzitutto tieni presente che le pseudoclassi devono rispettare un ordine preciso:
:link :visted :hover :active
in mancanza del quale gli effetti delle definizioni successive si fanno sentire anche se non voluti

Vedo che in qualche caso fai uso del padding: devi sapere che in IE viene interpretato in modo difforme dagli altri browser. Vedi il capitolo sul box-model del tuo tutorial CSS preferito (oppure del tutorial in HTML.it).

Altra cosa: le altezze fissate in px: dato che non puoi conoscere la dimensione del font usato dal browser (qualsiasi misura fissata da te puo` venir sovrascritta), non e` una buona idea fissare un'altezza fissa. Prova a vedere l'effetto ingrandendo il carattere (control+ nei browser moderni - escluso IE6-). Dovresti usare misure in em per le cose piccole, e misure automatiche per gli spazi grandi.

Ci sono poi altre cose che sarebbero da migliorare: l'uso del segno - (meno) nei nomi dei file (e` un segno aritmetico, che puo` dare problemi in qualche browser), ...

[gabar-el]

credo di essere riuscito a mettere a posto la cosa, se mi date conferma che in ff i link delle nav in stato hover non trasbordano sono ancora + sicuro...

Ho guardato la tua pag, ed in effetti non mi piacciono alcuni effetti nelle barre.

quali?

Guardando il CSS, noto una certa confusione; un disordine nei vari selettori.

e qui, che c'è che non va a grandi linee?

Anzitutto tieni presente che le pseudoclassi devono rispettare un ordine preciso: :link :visted :hover :active

mi sembra di avere tenuto sempre questo ordine...

Conosco poi il problema del padding con ie, ma non mi sembra che in questo caso ci sia, cmq grazie per tutti i consigli, soprattutto per quelli circa gli em, vedrò di perfezionarmi a riguardo.

Ci sono poi altre cose che sarebbero da migliorare: l'uso del segno - (meno) nei nomi dei file (e` un segno aritmetico, che puo` dare problemi in qualche browser), ...

questa non la sapevo, ricordo di aver letto che può aiutare l'indicizzazione, poichè il meno è come se tenesse separate le parole, mentre l'underscore (_) tiene attaccatte le parole e così vengono riconosciute come una e ai fini dell'indicizzazione viene una castronata. Se non sbaglio anche html.it fa così, mi sa che ho copiato proprio da li....
thank's

[Mich_]

Questo e` un estratto del tuo CSS, dove ho lasciato solo i selettori, nell'ordine in cui sono:

div#navUp {
div#navUp ul {
div#navUp ul li {
div#navUp ul li a {
div#navUp ul li a:link, 
div#navUp ul li a:visited {
div#navUp ul li a:hover {
div#navUp ul li a:active {
div#navUp ul li.attivo a,
div#navUp ul li.attivo a:link,

div#navDown ul li.attivo a:visited {
div#navDown {
div#navDown ul {
div#navDown ul li {
div#navDown ul li a {
div#navDown ul li a:link, 
div#navDown ul li a:visited {
div#navDown ul li a:hover {
div#navDown ul li.attivo a {
div#navDown ul li.attivo a:link, 
div#navDown ul li.attivo a:visited {

Come vedi c'e` un ordine invertito (in neretto).

Inoltre i selettori per lo stesso blocco sono veramente tanti: si puo` senz'altro ottimizzare il CSS, non tanto per l'interpretazione da parte dei browser, ma per il programmatore che deve capire cosa sta facendo.

Poi vedi l'immagine allegata:
in alto a dx (il mouse era sopra il link "come raggiungerci") la striscia bianca dell':hover ha un'altezza superiore alla striscia amaranto a riposo. Stessa cosa nel menu "home, chi siamo, ..."
In fondo la scritta esce dal riquadro: e` sicuramente dovuto all'uso di dimensioni in px.

Se poi ingrandisci il carattere, la cosa diventa decisamente orribile (pezzetti incorniciati a destra).
Scusa la bassa risoluzione, am una definizione migliore no nci stava nei limiti del forum

[gabar-el]

grazie della risposta mich_!
cosa intendi per ordine invertito? ho omesso lo stato active (non mi serve, posso ometterlo tranquillamente?), e in che modo posso ottimizzare il css? la cosa mi interessa ma non capisco come fare, come posso eliminare selettori per lo stesso blocco?

tu usi linux vero? queste differenze sono rimediabili semplicemente definendo il testo in em?
il fatto che strasbordi ovviamente non è il max, ma al momento sono impossibilitato a utilizzare linux e non riesco a verificare....

[Mich_]

Io uso FF sotto linux.
FF puoi scaricarlo per IE ed installarlo senza problemi. Non e` identico a quello sotto linux, ma le differenze sono piuttosto piccole (trascurabili in prima approssimazione).

Nel codice che ho postato (la serie dei selettori), in neretto sono riportati dei selettori in cui il :visited viene prima del :link.

Poi nei tuoi attributi ci sono molte ripetizioni: in molti caso non sono necessarie.
E un CSS piu` snello, oltre che pesare meno in termini di KB, e` piu` facile da gestire.
Esempio: il tuo

div#navUp ul li a {
	margin: 0;
	padding: 2px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
}
div#navUp ul li a:link, div#navUp ul li a:visited {
	color: #fff;
	text-decoration: none;
}
div#navUp ul li a:hover {
	color: #000;
	background-color: #fff;
	text-decoration: none;
	border-top: 1px solid #900;
	border-bottom: 1px solid #900;
}
div#navUp ul li a:active {
	color: #000;
	background-color: #fff;
	text-decoration: none;
}

Puo` essere riscritto come:

#navUp a, #navUp a:visited {
	margin: 0;
	padding: 2px;             /* occhio che questo fa differenza fra browser */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;         /* questo puo` venir sovrascritto dai browser settati correttamente (a parte IE6) */
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}
#navUp a:hover {
	color: #000;
	background-color: #fff;
	text-decoration: none;
	border: 1px 0 solid #900;       /* anche questo e` diverso tra browser */
}
/* l':active potrebbe anche non servire: lo vedi solo mentre premi il bottone,
   fino a che la pagina viene ricaricata; eventualmente puoi renderlo uguale a :hover */
#navUp a:active {
	color: #000;
	background-color: #fff;
	text-decoration: none;
}

queste differenze sono rimediabili semplicemente definendo il testo in em?

Si`, e con altri piccoli accorgimenti: vedi ad esempio alcuni esempi di menu e/o layout che trovi citati tra i "link utili"