Problema margine su ul

[sator75]

Ciao a tutti,

sto riscontrando un prb con una ul. In particolare ho un div all'interno del quale ho creato un menu verticale con l'uso di una "ul" che conterrà un numero da definire di "li" ed eventuali sottomenu.
Il div ha un immagine di sfondo che si ripete in verticale che crea un bordo di circa 30 px sulla sx del div.
Vorrei far iniziare le "li" da dove termina questo bordo.
Ho provato con diversi tentativi ma quando sembrava che avessi risolto i prb si sono presentati su IE con la spaziatura sballata.
Con il codice attuale, gli item vengono posti in orizzontale e non in verticale malgrado l'uso di list-item.
Vi uppo il codice in modo che sarà più facile per voi darmi una mano.

CODICE HTML

<div id="menu-btn">
<ul>[*]ciccio[*]ciccio[*]ciccio[/list]
</div>

CODICE CSS

div#menu-btn {
background-image:url(immagini/sfondo-menu-nav.jpg);
background-repeat:repeat-y;
width: 211px; /*Larghezza immagine di sfondo */
height:auto; /*Altezza a seconda del numero di menu*/
}


div#menu-btn ul {
display:list-item; /*Visualizzazione verticale della lista*/
margin: 0;
padding: 0;
}

div#menu-btn li {
margin-left:30px; /*Distanza da bordo generato da sfondo*/
padding:2px 0;}

div#menu-btn a {
width:100%;
color:#00FF00;
text-decoration:none;
}

Mi dareste una mano?

[sator75]

Qualcuno sa darmi una mano? Grazie.

[copsteve]

Prova mettendo il "margin-left" sull'<ul> anzichè sul[*]

[sator75]

Ho provato come hai suggerito ma senza risultato, ho però cambiato il codice in questo modo:

HTML:

<div id="menu-btn">
<ul id="ul-menu-nav">[*]ciccio
[*]ciccio
[/list]
</div>

CSS:

#menu-btn {
float:left;
background-image:url(immagini/sfondo-menu-nav.jpg);
background-repeat:repeat-y;
width: 211px;
height:auto;
}

#ul-menu-nav {
list-style-type:none;
width:180px;
margin:0;
padding:0;
}

#ul-menu-nav a {
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
width:211px;
margin-left:40px;
/*text-indent:20px;*/
}

Adesso gli elementi me li ha piazzati bene ma il risultato su FF e IE6 sono differenti, in particolare la distanza dal margine sx è diversa per i 2 browser, vi allego le immagini per chiarezza (1° FF e 2° IE6):




Io vorrei che le scritte delle list-item iniziassero non appena termina la barra verticale blu al lato sx generata dalla ripetizione y dell'immagine sfondo-menu-nav.
Avete qualche suggerimento, sto uscendo letteramente pazzo.

[gengix]

In alcuni elementi (h, ul ecc..) i vari browser di default impostano dei valori per alcune proprietà; i margini e il padding sono tra queste.
Ti conviene quando inizi a scrivere il codice azzerare i margini e il padding negli elementi base della pagina.
Questa regola

* {
margin:0;
padding:0;
}

Ti mette in una condizione iniziale uguale in tutti i browser. Nel tuo caso a codice già iniziato prova a vedere se ti crea dei danni o se ti risolve il problema.

[sator75]

Grazie per la risposta ma ho scoperto l'arcano, il prb non era nelle dichiarazioni degli attributi ma in un div nell'html che non avevo chiuso.
Adesso il prb è un altro, vorrei mettere delle icone alle list item ma quando le inserisco (anche quelle di default) lo spazio tra l'icona e la scritta è molto grande.
Quale attributo dovrei usare per risolvere?

[gengix]

Prova dare un margine negativo ai link.