Jason: Problem mit horizontelem Navigationsmenü

Hi
Ich frage mich die ganze Zeit was ich wohl falsch mache.
Der IE umrahmt nicht mein horizontales Menü (sehe Code).
Der Firefox ignoriert, dass padding:10px auch vertikal auszuführen ist.
Irgendetwas entscheidendes habe ich übersehen!

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<title>hi</title>  
  
 <style type="text/css">  
  ul {  
   list-style:none;  
   border:1px solid #ccc;  
   overflow:auto;  
  }  
  ul li {  
   float:left;  
  }  
  
  ul li a {  
   padding:10px;  
  }  
  
 </style>  
  
</head>  
  
<body>  
  
<ul>  
 <li><a href="#">Link 1</a></li>  
 <li><a href="#">Link 2</a></li>  
 <li><a href="#">Link 3</a></li>  
</ul>  
  
</body>  
</html>  

  1. Hello out there!

    Der IE umrahmt nicht mein horizontales Menü (sehe Code).

    Wegen der gefloateten 'li' hat 'ul' die Höhe 0. Verpasse 'ul' auch 'float: left' (und dem nachfolgenden Element 'clear').

    Der Firefox ignoriert, dass padding:10px auch vertikal auszuführen ist.

    Nicht bei vollständiger DOCTYPE-Angabe mit system identifier.

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
    1. Welches nachfolgende Element meinst du denn?

      Hier mein Code:

        
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
      <html>  
      <head>  
      <title>hi</title>  
        
       <style type="text/css">  
        ul {  
         list-style:none;  
         border:1px solid #ccc;  
         overflow:auto;  
         float:left;  
        }  
        ul li {  
         float:left;  
        }  
        
        ul li a {  
         clear:left;  
         padding:10px;  
        }  
        
       </style>  
        
      </head>  
        
      <body>  
        
      <ul>  
       <li><a href="#">Link 1</a></li>  
       <li><a href="#">Link 2</a></li>  
       <li><a href="#">Link 3</a></li>  
      </ul>  
        
      </body>  
      </html>  
      
      

      Allerdings, wenn ich ich ul um float:left ergänze, erstreckt sich die Listenbreite nicht mehr über den verfügbaren Platz, sondern nur noch auf eine minimale Breite.

  2. Hallo,

    Zunächst empfehle ich dir, in deiner Doctypeanagabe auch die URI zur DTD anzugeben. Nur damit kannst du davon ausgehen, dass die Browser sich nah am Standard orientieren und nicht versuchen zu erraten, was du gemeint haben könntest.

    Der IE umrahmt nicht mein horizontales Menü (sehe Code).

    Das Problem wird durch einen „guten“ Doctype gelöst.

    Der Firefox ignoriert, dass padding:10px auch vertikal auszuführen ist.

    Wäre es für dich Problematisch, padding auf die Listenpunkte anstatt die Verweise anzuwenden?

    Gruß;

    1. Hallo,

      Zunächst empfehle ich dir, in deiner Doctypeanagabe auch die URI zur DTD anzugeben. Nur damit kannst du davon ausgehen, dass die Browser sich nah am Standard orientieren und nicht versuchen zu erraten, was du gemeint haben könntest.

      Der IE umrahmt nicht mein horizontales Menü (sehe Code).

      Das Problem wird durch einen „guten“ Doctype gelöst.

      Der Firefox ignoriert, dass padding:10px auch vertikal auszuführen ist.

      Wäre es für dich Problematisch, padding auf die Listenpunkte anstatt die Verweise anzuwenden?

      Gruß;

      Danke für den Doctype-Tipp! Das hat schonmal einige Änderungen mit sich gebracht. Aber das eigentliche Problem wird damit nicht getroffen.
      Ich möchte eigentlich, dass der gesamte Listenblock ein Link ist.
      Mit dem Padding möchte ich einen einheitlichen Innenabstand erreichen, und zwar vertikal gleichermaßen wie auch horizontal.

      1. Hallo,

        Ich möchte eigentlich, dass der gesamte Listenblock ein Link ist.

        Dann gebe den Verweisen die Eigenschaft display:block;, dann wird auch das padding vollständig angewendet.

        Gruß;

        1. Ah das wars :-)
          Schönen Dank und netten Abend noch!