problema height con CSS solo in IE

[Jerry Masslo]

metti il line-height uguale all'height, suppongo tu li voglia entrambi di 10px, così l'ho provato e funge.

[james]

Originariamente inviato da Jerry Masslo
metti il line-height uguale all'height, suppongo tu li voglia entrambi di 10px, così l'ho provato e funge.

E' vero, a 10 funziona, io stavo facendo le prove con line-height a 5px e height a 5 px, ed in quel caso si ripresenta il problema dell'altezza minima. Un problema è risolto perchè mi va bene un'altezza di 10, ma nell'altro caso che dovrebbe essere di 5 credo allora che non posso fare nulla.
Dico anche che cosa sto cercando di realizzare, magari sbaglio l'approccio. Vorrei creare una barra orizzontale di navigazione, il classico menu, solo che vorrei che abbia i 4 spigoli arrotondati, quindi ho creato l'immaigine di sfondo completa, ho tagliato la parte superiore (10px) che comprende la curvatura, la parte inferiore (10px) che comprende la curvatura ed una linea di un pixel da ripetere verticalmente, così se anche le voci del menu siano troppo lunghe e quindi vadano a capo, resterebbero comunque dentro l'area utile della barra. E' sbagliato questo approccio? O meglio, ci sono soluzioni migliori e più efficaci? Anche perchè in presenza di barre molto sottili posso avere spessori solo maggiori di 8+8+altezza testo in IE...

Posto la foto dell'esempio

[Marcolino's]

Realizzi l'immagine della tua barra, senza le scritte ovviamente, alta quanto deve essere e molto più larga di quanto deve essere.
Ovvero se hai una larghezza standard, la realizzi di quella dimensione.
La fai bombata, con il gradiente giusto e con gli angoli arrotondati.
Poi la metti come sfondo del livello in cui metti la navigazione, per esempio:

div#nav-bar {
  background: url(barra.gif);
}

Nota che non ho definito per il livello un colore di sfondo, e la barra è una gif trasparente.
Sarebbe stato molto meglio usare il png, ma siccome IE non supporta la trasparenza di questo formato, ti tocca usare una gif.
Quindi applichi il menù alla tua barra:

div#nav-bar ul {
list-style: none;
width: 100;
margin: 0;
padding: 0;
}
div#nav-bar ul li a {
display: inline;
padding: 2px 1em 2px 1em;
height: 20px; /* deve essere l'altezza della tua barra */
line-height: 20px /* deve essere esattamente uguale all'altezza */
text-decoration: none;
color: #f5f5f5; /* colore del testo, fai tu */
}
div#nav-bar ul li a:hover {
formattazione dell'effetto hover, fai tu
}

La tua barra la applichi così:

<div id='nav-bar'>
<ul>[*]<a hreh='home.html'>home</a>[*] ... eccetera .... [/list]
</div>

Se ci sono errori fai un fischio, il codice non l'ho testato

[Jerry Masslo]

se vuoi il mio parere quella barra è piuttosto problematica con css e senza table, perché non consente una semplice gestione del testo ridimensionabile, si può fare comunque ma è complicatuccio, per me che il testo sia ridimensionabile è un requisito indispensabile e questo complica l'utilizzo di quella barra.