Mam dziwny problem z tagami <li>.
Mianowicie we wszystkich przegladarkach "punktator" graficzny ma poprawny odstep od tresci tekstowej, ale juz w IE 7 i IE 6, ta ikonka jest zaraz przed tekstem, nie wiem jak mam to ustawic.
Oto obrazki (jeden z FF a drugi z IE7)
http://img541.imageshack.us/gal.php?g=firefoxm.jpg

Kod CSS:

[CSS] pobierz, plaintext 
li {
	list-style: inside url(bullet.gif);
	border: 0px;
	margin: 0px;
	padding: 0px 0px 0px 10px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	cursor: pointer;
}
[CSS] pobierz, plaintext 

Manipulowalem przy margin i padding, ale to tylko zmienialo pozycje tej ikony wzgledem lewego boku diva, a nie wiem jak zmienic odstep miedzy ikona, a trescia tekstowa <li>.

Kod HTML, gdzie wstawiam <li>:

[HTML] pobierz, plaintext 
<li class="link"><a href="#">Strona Główna</a></li>
[HTML] pobierz, plaintext 

Druga kwestia to zaokraglone rogi divow, ktore dzialaja wszedzie, oprocz IE i to wszystkich wersji IE od IE5 do IE8.
Jest na to jakas rada, chociaz na IE 8 ?

Na rogi masz skrypt w JS > http://www.editsite.net/blog/rounded_corners.html
A co do tego co pisałeś to daj tak

[CSS] pobierz, plaintext 
div {
	-webkit-border-radius: 5em; /* Safari, Chrome */
	-khtml-border-radius: 5em    /* Konqueror */
	-moz-border-radius: 5em; /* Firefox */
	border-radius: 5em;
}
[CSS] pobierz, plaintext 

Chociaz watpie ze IE to przetrawi, to jest nowy dodatek w CSS3 i nie kazda przegladarka (czyt. IE) to trawi.
Tak samo jak z box-shadow
Zobacz ten skrypt js, ktory ci podal Pan @Up, albo poszukaj na google.pl, bo jest wiele innych sposobow, nawet w samym CSSie, kiedys widzialem taki troche brzydki, ale skuteczny sposob
Co do <li> Pan @Up takze juz wyjasnil...

Dzieki zobacze zaraz, poki co daje POMOGL


No i nie jest tak pieknie jakby sie wydawalo
Dodam ten margin, to w firefoxie robi sie jeszcze wiekszy odstep, co wyglada ochydnie
Jest jakis inny sposob?

Między nagłówkami head wstawić to

style-ie.css

Czemu nie zrobisz tego normalnie po co tyle zachodu ?

[CSS] pobierz, plaintext 
<style type="text/css">
 
 li {
	background: url(bullet.gif) no-repeat left;
	border: 0px;
        padding-left: 10px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	cursor: pointer;
        float: left;
        display: block;
}
 
li a {
    float: left;
    border: 1px solid #3399ff;
 
}
 
 
</style>
 
[CSS] pobierz, plaintext 

i html

[HTML] pobierz, plaintext 
 
<li class="link"><a href="#">Strona Główna</a></li>
[HTML] pobierz, plaintext 

W sumie racja.
Dzieki za naprowadzenie na wlasciwy tor

Jeszcze jedno ale jak dajesz li class="link" bo w tym momencie nie potrzebie dajesz tą klasę

nazywaj to jakoś w css ;]

[CSS] pobierz, plaintext 
<style type="text/css">
 
    li.link {
    background: url(test.png) no-repeat left;
    padding-left: 20px;
    display: block;
    float: left;
 
    }
 
    li.link a {
    font-size: 0.7em;
    color: #3399ff;
 
}
</style>
[CSS] pobierz, plaintext 

bo zamiast

[HTML] pobierz, plaintext 
<li class="link"><a href="#">Strona Główna</a></li>
[HTML] pobierz, plaintext 

możesz dać przy twoim rozwiązaniu

[HTML] pobierz, plaintext 
<li><a href="#">Strona Główna</a></li>
[HTML] pobierz, plaintext 

Faktycznie z ta klasa, to byla pozostalosc po "kombinowaniu" Bezmyslnie skopiowalem tutaj
Ale co do odwolania do klas, bo troche tego nie rozumiem, jest jakas roznica miedzy:

[CSS] pobierz, plaintext 
li.link {}
[CSS] pobierz, plaintext 

a

[CSS] pobierz, plaintext 
.link li {}
[CSS] pobierz, plaintext 

To takie pytanko na przyszlosc, zeby wyrobic sobie dobre nawyki.

No i jeszcze jedno drobne pytanko, mianowicie, czy tagi <li> nalezy obejmowac tagiem <ul> ?
Bo prawde mowiac sam juz nie wiem, w IE chyba 7 lub 6, brak <ul> powodowal dziwne zachowanie, caly layout mi sie rozjechal.

Acha i jeszcze cos, chyba musze wylaczyc domyslne "ikonki" dla <li>, bo jak dam margin:10px; to zaczynaja pojawiac sie punktatory graficzne

li.link to
<li class="link"></li>

a
.link li to
<div class="link">
<ul><li></li></ul>
</div>

wypadało by przy większej ilości linków stosować znacznki typu ul np.

[HTML] pobierz, plaintext 
 
<div class="przyklad">
   <ul>
<li><a href="index.php">Link</a></li>
<li><a href="index.php">Link</a></li>
<li><a href="index.php">Link</a></li>
</ul>
</div>
 
[HTML] pobierz, plaintext 

Masz dokładnie opisane pod każdym twoim cytacie żeby były wszystko ci zrozumiałe

Ok dzieki za odpowiedzi i pomoc, ale po zastosowaniu rad Krzysztofa, pojawil sie kolejny problem w IE 7.
Mianowicie porobily sie odstepy:
http://img59.imageshack.us/img59/4296/18137094.jpg

Wszedzie margin i padding pionowy mam na 0px, a mimo to IE 7 robi te odstepy
Co moze byc powodem tego?

pokaż css i html

[CSS] pobierz, plaintext 
body {
	background: #000000 url(gradient.gif) repeat-x;
	margin: 0px;
	padding: 0px;
}
.menu {
	overflow: hidden;
	margin: 0px 5px 10px 5px;
	padding: 5px;
	border: 1px solid #333333;
	width: 160px;
	height: auto;
	background: #000000;
}
.podLista {
	margin: 0px;
	padding: 0px 0px 0px 10px;
	width: auto;
	height: auto;
	border: 0px;
	background: #000000;
}
p {
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999999;
	text-align: justify;
}
h3 {
	text-align: left;
	border: 0px;
	margin: 0px;
	padding: 0px 0px 5px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #ff0000;
	cursor: default;
	font-weight: normal;
}
li.link {
	list-style: outside none none;
	background: url(bullet.gif) no-repeat left;
	border: 0px;
	margin: 0px;
	padding: 0px 0px 0px 10px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	cursor: pointer;
	display: block;
}
ul {
	border: 0px;
	margin: 0px;
	padding: 0px;
}
a:link {	
	color: #999999;
	text-decoration: none;
}
a:visited {
	color: #999999;
	text-decoration: none;
}
a:active {
	color: #999999;
	text-decoration: none;
}
a:hover {
	color: #999999;
	text-decoration: underline;
}
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<script type="text/javascript">
function showHide(msg_id){
	var element = document.getElementById(msg_id);
	element.style.display=element.style.display=='none' ? '' : 'none';
}
</script>
<body>
<div class="menu">
	<h3>Menu 3</h3>
	<p>
	<ul>
	<li class="link"><a href="#">Strona Główna</a></li>
	<li class="link"><a href="#">Strona Główna</a></li>
	<li class="link"><a href="java script:void(0);" onclick="showHide('lista1');">Rozwiń</a></li>
        </ul>
	<div class="podLista" id="lista1" style="display:none;">
		<ul>
		<li class="link"><a href="#">Podlink 1</a></li>
		<li class="link"><a href="#">Podlink 2</a></li>
		<li class="link"><a href="#">Podlink 3</a></li>
		</ul>
	</div>
        <ul>
	<li class="link"><a href="#">Strona Główna</a></li>
	<li class="link"><a href="#">Strona Główna</a></li>
	</ul>
	</p>
</div>
</body>
[HTML] pobierz, plaintext 

Tylko mnie nie bij, bo pewnie popaprane

Nie będę tego komentować ;] masz tu przykład prawidłowo zrobionego menu

[CSS] pobierz, plaintext 
<style type="text/css">
 
.menu {
width: 200px;
height: 30px;
}
 
.menu h1 {
color: #ff0000;
font-size: 1em;
font-weight: bold;
}
 
.menu ul, ul li {
height: 30px;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
 
.menu ul {
float: left;
margin: 0 0 0 8px;
}
 
 
.menu ul a {
padding: 6px 6px 6px 6px;
line-height: 1.8em;
font-size: 1em;
text-decoration: none;
font-weight: bold;
color: #00ff00;
}
 
.menu ul a:hover {
color: #000000;
}
 
.menu ul li {
padding-left: 10px;
background: url(bullet.gif) no-repeat;
}
</style>
 
[CSS] pobierz, plaintext 

i html

[HTML] pobierz, plaintext 
<div class="menu">
<h1>Menu</h1>
   <ul>
<li><a href="index.php">Link</a></li>
<li><a href="index.php">Link</a></li>
<li><a href="index.php">Link</a></li>
</ul>
</div>
[HTML] pobierz, plaintext 

przypatrz się uważnie a dasz na pewno radę

A moglbys powiedziec co dokladnie, bo widze tu bardzo wiele zmian, ale tez mam wytlumaczenie, dlaczego zrobilem tak, a nie inaczej.
Jakbys napisal co nie co, to moze by sie wyjasnilo.
Np. <ul> zamykam przed divem podLista, poniewaz gdy rozwine tego diva i nie zamkne </ul> wczesniej, to IE 7 przesuwa punktator do srodka, rozwinietej listy.
<P> faktycznie mozna pominac, ale chcialem sie przygotowac na wypadek, gdy w tym menu zamiast <li> i linkow, znalazl by sie zwykly tekst.
Podaje rozmiar czcionek w px zamiast w em, bo jakos latwiej mi to kontrolowac, ale tego akurat nie wiem, czy to blad.
odwolania typu " .menu ul a" , rozumiem ze lepiej wygladaja i tak mam na koniec zamiar zrobic (jak juz wszystko bedzie gralo), ale jak narazie to poza tym ze jest balagan, nic to nie zmienia.
Itd. itp.
Wiem, jestem cienki w te klocki, wiec prosze o wyjasnienie roznicy miedzy moja budowa a ta Twoja :0
Bede wdzieczny!

PS. Wlasnie zauwazylem atrybut "line-height", o tym zapomnialem faktycznie, byc moze samo to wystarczy
EDIT:
Wlasnie o to chodzilo, dzieki, a optymalizacje kodu css zaraz przeprowadze, zgodnie z Twoimi wskazowkami.
Tylko jakbys mogl powiedziec, w czym jest lepszy ten Twoj kod od mojego, tak lopatologicznie, co nalezy zmienic u mnie

Powiem krótko ten mój kod używa się standardowo do robienia menu na stronie każde inaczej robione tak jak w twoim przypadku robi całkiem niezły bałagan .

[CSS] pobierz, plaintext 
 
li.link {
 
}
 
[CSS] pobierz, plaintext 

używaj najlepiej do pojedynczych linków .


strukturę

[CSS] pobierz, plaintext 
 
.menu { 
 
}
 
.menu ul, ul li {
 
}
 
.menu ul {
 
}
 
.menu ul li {
 
}
 
[CSS] pobierz, plaintext 

używaj do tworzenia menu strony .

co ci jeszcze mogę doradzić dawaj każdy akapit czyli p

np

[CSS] pobierz, plaintext 
 
#jakisdiv p  {
[CSS] pobierz, plaintext 

potem html

[HTML] pobierz, plaintext 
 
<div id="jakisdiv">
<p>twój tekst</p>
</div>
[HTML] pobierz, plaintext 

tylko dla danego selektora będziesz miał zawartość dla danego akapita .

Dzieki wielkie za te rady i poswiecony czas!
Bede sie tego trzyma, skoro juz wszystko gra (tak mi sie wydaje), to pora na przerobienie CSSa wedlug twoich rad
Pozdrawiam