Probleme mit Navigations-Liste im IE

Status
Nicht offen für weitere Antworten.

MM2410

Grünschnabel
Hallo,

ich mache mich gerade daran, ein tabellenloses Layout für meine Site mittels CSS zu erstellen. Ich bin neu auf dem Gebiet.

Am linken Rand meiner Homepage soll ein Navigations-Menü mit Hilfe einer Liste erstellt werden.

Dies habe ich mit folgendem Code bisher realisiert.

Hier die Einbindung in die index.php (der div-Container "left" stellt den linke Spalte des Layouts dar):
Code:
<div id="left">
    	<h1>News</h1>
    	<ul>
    	<li><a href="#">Aktuell</a></li>
    	<li><a href="#">Archiv</a></li>
    	<li><a href="#">Rumours Box</a></li>
    	</ul>
    </div>

Und hier mein Code aus der CSS-Datei:
Code:
#left ul{
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	border: 0px;
    	border-left: 1px solid #D8D5CA;
    	border-bottom: 1px solid #D8D5CA;
    	border-right: 1px solid #D8D5CA;
    	border-top: 1px solid #D8D5CA;
    }
      
    #left li {
    	display: block;
    }
    
    #left a:link, #left a:visited {
    	margin: 0; padding: 0;
    	background-image: url(../../images/left_bg.png);
    	background-repeat: repeat-y;
    	font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #303848; text-decoration: none;
    	display: block;
    	height: 21px;
    }

Folgendes Probelm tritt nun auf:

Der IE setzt zwischen jedes der einzelnen <li>-Elemente einen kleinen 1px-breiten Rand. Ich weiß nicht wie ich ihn wegbekommen soll.

Außerdem ist im FF und im IE über der Liste ein Abstand. Wie bekomme ich den weg?

Zur besseren Veranschaulichung anbei ein Bild.

Vielen Dank schonmal!
 

Anhänge

  • prob.jpg
    prob.jpg
    10,2 KB · Aufrufe: 42
Status
Nicht offen für weitere Antworten.
Zurück