Darstellungsprobleme bei <ul> und display:inline;

[Martin]

Hallo,

Ich versuche mich an barrierefreiem Webdesign. Dafür will ich meine Menüpunkte via CSS in einen horizontale Leiste stellen.

Da es sich aber strenggenommen um eine unsorted list (<ul>) handelt, müssen alle Punkte folgendermaßen notiert werden

<ul>
  <li><a href="...">Menüpunkt</a></li>
  ...
</ul>

In eine Reihe wird das alles durch display:inline; gebracht.

NUN DAS PROBLEM:
durch die <ul></ul> Tags wird immer automatisch ein Absatz vor und hinter den Menüpunkten gemacht, der meine Leiste (die andersfarbig hinterlegt ist) unnötig dick erscheinen lässt.

Wenn ich die <ul></ul> Tags weg lasse gibt es das Problem nicht mehr. Allerdings komme ich dann durch keinen Validator mehr durch.

Wie kann ich durch CSS dieses erstellen des automatischen Absatzes verhindern?

Vielen Dank im Vorraus.

Martin

P.S.

Ich hänge mal den genauen Quellcode den ich benutze mit an (Ausschnitte)

HTML:

<div id="navigation">
 <ul>
  <li><a href="navpoint1">home</a></li>
  <li><a href="navpoint2">home</a></li>
  <li><a href="navpoint3">home</a></li>
  <li><a href="navpoint4">home</a></li>
  <li><a href="navpoint5">home</a></li>
  <li><a href="navpoint6">home</a></li>
  <li><a href="navpoint7">home</a></li>
 </ul>
</div>

CSS:

#navigation {
    position:   absolute;
    right:      10px;
    left: 10px;
    top:        84px;
    border: 1px solid black;
    background: #EE5722;
}
#navigation li {
    display:        inline;
    padding-right:  0.25em;
}