list: problemi di visualizzazione in IE

[Leggero82]

tra i links utili consigliati in questa sezione c'è anche questo molto utile da cui predere spunto per i menu:
http://css.maxdesign.com.au/listamatic/vertical09.htm

proprio questo tipo di menu in particolare viene visualizzato correttamente in Firefox ma non in IE (con altri browser non ho avuto la possibilità di provare).

sul sito stesso, a questo indirizzo dice che quel menu in particolare ha "rogne" con IE

il fatto è che non capisco dove stia il problema, forse nella gestione dei margini che assume il browser di casa microsoft?

è possibile risolvere il problema?

il codice html e css del menu lo trovate al primo link

grazie

[Leggero82]

vi posto anche il codice html:

<div id="navcontainer">
<ul id="navlist">
<li id="active">Item one[*]Item two[*]Item three[*]Item four[*]Item five[/list]
</div>

e CSS:

#navlist
{
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 13em;
}

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

#navlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
}

[Mich_]

Di solito sono il padding e il border a dare problemi: infatti il box-model di IE e` diverso da quello degli altri browser proprio per quelle proprieta`.

C'e` poi un altro problema (che forse non hai notato):
il nome "active" e` usato dal DOM, e quindi non e` un nome valido per un id.

Comunque se vuoi ulteriore aiuto, dovresti dire che differenze noti nel browser IE: altrimenti e` piu` dififcile aiutarti.

[Leggero82]

allego qui le immagini di come viene visualizzato il menu con Firefox e Internet Explorer.

Non l'ho fatto prima in quanto era raggiungibile dal primo link che ho postato.

Firefox:

[Leggero82]

come è possibile vedere qui invece, con Internet Explorer tra un oggetto[*] ed un altro sembra essere applicato un margine di qualche pixel in cui è possibile notare il colore di sfondo assegnato nel CSS al <div> navlist (background: gray

Internet Explorer:

[Mich_]

Prova a vedere se si tratta del "bug dei tre pixel". Riferimenti tramite ricerca in questo forum (bottone in alto a dx).

[Leggero82]

purtroppo non credo sia quello il problema in quanto come riportato proprio su HTML.it, il bug si verifica quando ad un testo viene attribuito un float.
Non è questo il caso..
Inoltre lo spazio lasciato da IE in questo menu è ben più ampio di 3 px.

non riesco a venircene a capo :master:

[Leggero82]

partendo da un altro esempio credo di aver trovato una soluzione che funziona anche con IE, spero risulti utile anche ad altri:

CSS:

#navlist li {
display: inline;
/* for IE5 and IE6 */
}

#navlist {
width: 120px;
/* to display the list horizontaly */
font-family: sans-serif;
margin: 0;
padding: 0;
border-bottom: 1px #000 solid;
border-right: 1px #000 solid;
border-left: 1px #000 solid;
}

#navlist a {
display: block;
background: #CCD;
border-top: 1px #000 solid;
border-left: 8px solid #AAB;
text-decoration: none;
color: #000;
padding: 3px 2px 3px 5px;
}

#navlist a:hover {
background-color: orange;
border-left-color: #FE3
}

#navlist a:visited { color: #000; }


HTML:

<div id="navcontainer">
<ul id="navlist">
<li id="active">Item one[*]Item two[*]Item three[*]Item four[*]Item five[/list]
</div>


ora vedo di ripulire un po' il CSS