JürgenB: Einzeilige Liste

SELF-Forum

Einzeilige Liste

JürgenB Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo,

auf der folgenden Testseite sieht man meinen Versuch, eine Navigationleiste mit Unternavigation mittels Liste und css zu realisieren:

http://www.j-berkemeier.de/test/navtest.html

Die Navigationsleisten werden an beiden Seiten durch eine Grafik abgeschlossen.

Mit dem Firefox und dem Netscape (7) sieht es aus, wie gewünscht: Beide Navigationszeilen liegen bündig übereinander.

Der IE legt aber leider zwischen die Zeilen eine Leerzeile. Lege ich zwischen die divs "navstd" und "navte" ein  , verschwindet die Leerzeile. Leider ist das   hier nicht erlaubt (strict). Wie werde ich die Leerzeile los?

Noch schlimmer sieht es im Opera (7) aus. Die Listen werden übereinander angeordnet und der erste Listenpunkt liegt unter den Grafiken.

Hat jemand eine Idee, wo mein Fehler liegt?

Danke und Gruß, Jürgen

PS Hier der Quelltext für Kommentare:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">  
<title>NavTest</title>  


  
<style type="text/css">  
body { margin:0;padding:0;  
       background-color:#ffffff;color:#000000;  
       font-size:0.9em;font-family:Arial,sans-serif; }  
h1   { font-weight:bold;margin:30px 10px 10px 120px;padding: 0px }  
h2   { font-weight:bold;font-size:1.1em }  
#navstd { margin:0px 0px 0px  90px;padding:0;clear:both }  
#navte  { margin:0px 0px 0px 140px;padding:0;clear:both }  
#navfo  { margin:0px 0px 0px 300px;padding:0;clear:both }  
.nav    { color:#0000ff;white-space:nowrap }  
.nav ul { list-style-type:none;margin:0px;padding:0px;float:left }  
.nav li { background-color:#ff0000;padding:3px 0px 3px 0px;margin:0px;float:left }  
#navli  { background-color:#ffffff;background-image:url(navli.gif);background-repeat:no-repeat;  
          width:20px;padding:3px 0px 3px 0px;margin:0px;float:left }  
#navre, #navrete  
        { background-color:#ffffff;background-image:url(navre.gif);background-repeat:no-repeat;  
          width:200px;padding:3px 0px 3px 0px;margin:0px;float:left }  
#navlite { background-color:#ffffff;background-image:url(navteli.gif);background-repeat:no-repeat;  
           width:20px;padding:3px 0px 3px 0px;margin:0px;float:left }  
.nav a   { color:#ffffff;text-decoration:none;font-weight:bold;padding:0px;margin:3px 10px 3px 10px }  
.nav a:link    { color:#ffffff }  
.nav a:visited { color:#ffffff }  
.nav a:hover   { text-decoration:underline }  
.nav a:active  { color:#ffffff }  
#cont { width:620px;margin-left:120px;padding-top:20px;padding-bottom:20px;clear:both }  
</style>  
</head>  
  
<body>  
<h1>NavTest</h1>  
<div class="nav" id="navstd">  
 <div id="navli">&nbsp;</div>  
 <ul>  
  <li><a href="#">Link</a></li>  
  <li><a href="#">Link</a></li>  
  <li><a href="#">Link</a></li>  
  <li><a href="#">Link</a></li>  
  <li><a href="#">Link</a></li>  
  <li><a href="#">Link</a></li>  
  <li><a href="#">Link</a></li>  
  <li><a href="#">Link</a></li>  
  <li><a href="#">Link</a></li>  
 </ul>  
 <div id="navre">&nbsp;</div>  
</div>  
  
<div class="nav" id="navte">  
 <div id="navlite">&nbsp;</div>  
 <ul>  
  <li><a href="#">Link</a></li>  
  <li><a href="#">Link</a></li>  
  <li><a href="#">Link</a></li>  
 </ul>  
 <div id="navrete">&nbsp;</div>  
</div>  
<div id="cont">  
<h2>Text</h2>  
<p>Text</p>  
</div>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln