Problema menu CSS

[Sonikag]

Ho questo menu:

#navlist
{
padding: 0px;
margin: 0px;
width: 182px;
color: #006; 
font-size:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}


#navlist li
{
list-style: none;
margin: 0px;
padding: 0px;
border-bottom: 1px #C4C6C1 solid;
text-align: left;
}

#navlist li a
{
display: block;
margin: 0px;
padding: 0px;
padding-top: 24px;
padding-bottom: 23px;
padding-left:23px;
text-decoration: none;
background-image: url(img/grafica/tastoneutro.jpg);
background-position: left top;
background-repeat: no-repeat;

}

La cosa strana che se nel #navlist li anzichè mettere il border-bottom lo metto border-top (come mi servirebbe) in IE7 (il 6 devo ancora provarlo) mi distanzia i pulsanti di circa 12px l'uno dall'altro.

O.T. Testo in pixel esplicita richiesta del cliente :master:

[Mich_]

Occhio all'ordine dei valori negli attributi!
border-bottom: 1px #C4C6C1 solid;
L'ordine corretto e`: width style color
Altri ordini potrebbero non venir interpretati correttamente.

Per sistemare in IE hai due strade:
- passare a XHTML Strict (dovrebbe migliorare molto)
- inserire un display: inline; (non serve dato che e` incompatibile con altri attributi, ma fa contento IE6)


Riguardo il font a 10px.
Puoi dire al tuo ignorante cliente, che i browser (anche IE dal 7 in poi) hanno un limite minimo dei font; io ad esempio ho inpostato un limite di 14px (ho i px piccoli) e quindi questo fa scombinare tutto il layout.
Fate meglio a rispettare la salute visiva dei visitatori, pena la perdita di visitatori.

[Sonikag]

Grazie adesso funziona

[pictor]

Mich non ho ben capito la cosa del 'display:inline;'.

Che effetto ha su IE? (e non infastidisce sugli altri browser?)

[Leilond]

display:inline su un elemento con float ha la MAGICA proprietà di annullare un bug di IE (raddoppio dei margini) ma, essendo gli elemnti float SEMPRE resi come BLOCK, nessun browser (compreso IE) ne risente in altro modo

[pictor]

Grazie

Non conoscevo questo bug.... me lo devo annotare. Nella costruzione del layout di una pagina può darmi problemi enormi (e anzi.... forse m'è già capitato in passato :doh: ).

[Leilond]

Quando possibile (non sempre lo è) io evito di mettere margini ad elementi floattati
Spesso uso due div annidati, quello esterno floattato con margini a zero e quello interno con margini e padding valorizzato come mi serve
Questo mi evita anche quasi ogni tipo di box-model-hack per IE 5... ma ovviamente aumenta un po' il numero di tag "contenitori" nell'html, visto che ogni elemento che devo floattare è sempre all'interno di un div aggiuntivo
Questione di scelte... odio gli hack... li trovo "sporchi" e quando posso li evito