Problem med styles på liste
Jeg har en menu, som er opbygget af lister i en liste. Men jeg har følgende 3 problemer med at få den til at se rigtigt ud:1. Teksten alignes forkert i forhold til bullet. Teksten og bullet skal centreres vertikalt.
2. Afstanden fra bullet til tekst er for stor.
3. Når en linie wrapper er afstanden til den nye linie for stor.
Her er html koden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
ul#LeftMenu
{
list-style: none;
margin: 0px;
padding: 0px;
}
ul#LeftMenu li
{
margin-bottom: 6px;
}
ul#LeftMenu li a
{
font-family: Verdana;
font-weight: bold;
font-size: 10px;
text-decoration: none;
color: #1C78BD;
}
ul#LeftMenu li.Selected a
{
color: #696A6D;
}
ul#LeftMenu .SubMenu
{
margin-left: 0px;
padding-left: 0px;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(bullet.gif);
}
ul#LeftMenu .SubMenu li
{
margin-left: 18px;
margin-bottom: 0px;
margin-top: 6px;
}
ul#LeftMenu .SubMenu li a
{
font-family: Verdana;
font-weight: normal;
font-size: 10px;
text-decoration: none;
color: #1C78BD;
}
</style>
</HEAD>
<BODY>
<div style="border: 1px solid black; width: 170px;">
<ul id="LeftMenu">
<li class="Selected"><a href="">Niveau 1 Item 1 Selected</a>
<ul class="SubMenu">
<li><a href="">Niveau 2 Item 1</a></li>
<li><a href="">Niveau 2 Item 2</a></li>
<li><a href="">Niveau 2 Item 3</a></li>
<li><a href="">Niveau 2 Item 4</a></li>
<li><a href="">Niveau 2 Item 5</a></li>
</ul>
</li>
<li><a href="">Niveau 1 Item 2 two lines lines lines</a></li>
<li><a href="">Niveau 1 Item 3</a></li>
<li><a href="">Niveau 1 Item 4</a></li>
<li><a href="">Niveau 1 Item 5</a></li>
</ul>
</div>
</BODY>
</HTML>
