<ul> und <p> formatieren

[AirMax]

Hallo zusammen

Ich habe ein Problem und ich frage mich, wie das denn sein kann. Also:
Ich habe in einem übergeordnete <div> auf der linken Seite ein Menü:

  
  <ul id="menu">  
    <li class="dark">bla bla</li>  
    <li class="dark">bla bla</li>  
    <li class="dark">bla bla</li>  
  </ul>

Rechts daneben befindet sich auf gleicher Höhe ein Absatz <p>:

  
  <p id="text">  
    <span class="coloured">bla blub</span><br />  
    <span class="light">bla blub</span>  
  </p>

Obwohl im CSS steht, dass "margin" und "padding" für <ul> und <p> leich 0 sind und die Klassen "dark", "light" und "coluered" die gleichen Eigenschaften haben (bloß die Farbe des Textes ändert sich) liegen die einzelnen Zeilen nicht auf der gleichen Flucht:

  
ul {  
	margin: 0;  
	padding: 0;  
	list-style-type: none;  
}  
p {  
	margin: 0;  
	padding: 0;  
}  
.dark {  
	font-family: Arial, Helvetica, sans-serif;  
	font-size: 0.72em;  
	font-style: normal;  
	line-height: 1.64em;  
	font-weight: normal;  
	font-variant: normal;  
	text-transform: lowercase;  
	color: #666666;  
}

Woran liegt denn das? Sollte man, wenn man 2 Elemente nebeneinander haben will, die genau gleich aussehen sollen, immer das gleiche Element verwenden? z.B. links <li> und rechts auch <li>? Momentan habe ich ja links <li> und rechts <p>. Rein von der Seitenstruktur her würde ich es so lassen, wie ich es jetzt habe: links ein Menü und rechts ein Fließtext. Aber wie gesagt, irgendwie werden die CSS-Angaben nicht 100%ig identisch auf <li> und <p> angewendet. Ist das normal? Ich hoffe, Ihr versteht, was ich meine. Falls nicht, gebe ich mal den link zur Seite an.

Danke & Gruß