✔ DIV lässt sich nicht im Firefox UND Internet Explorer korrekt positionieren

[Rayne]

So, natürlich gibt es erneut ein Problem...

Diesmal gehts um die Navigation.
Ich möchte eine Art vertikales Ausklappmenü erstellen mit Hilfe von Listen. Im Prinzip bin ich mit dem jetzigen Ergebnis schon recht zufrieden, aber wie immer macht der IE7 Probleme (den IE6 konnte ich jetzt nicht testen).

Im IE7 fehlt unter dem ersten Hauptmenüpunkt "News" die horizontale Linie. Verstehe ich schon nicht.
Außerdem sind die kleinen Pfeile und der dazugehörige Menüpunkt nicht auf einer Höhe, sondern versetzt. Im FF wird das korrekt dargestellt.
Des Weiteren würde ich ganz gerne den Zeilenabstand im Untermenü verringern, aber auf "line-height:..." reagiert kein Browser. Es scheint nur der Wert "line-height: 30px;" in #Navi li zählen.
Kann man auch irgendwie den automatischen Einzug von "li" beeinflussen? Mit "padding" und "margin" in #Navi-Huelle bzw.#Navi ul konnte ich nichts erreichen.

Hier mal der Code:

#Navi-Huelle {
                  position:         relative;	    
                  margin-top:       46px;      			
                  width:            170px;
	          height:           auto;	  	
	          float:            left;   
	         display:          inline;   
                 }

#Navi ul {		 
	    overflow: hidden;
	    height:   auto;		
	     }
		 
#Navi li {
	   list-style-image: url(Bilder/Liste.png);	 	 
	   font-weight:      bold;
	   line-height:      30px;
	  border-bottom:    1px solid #8CC7FF;		
	     }
	
#Navi li a {
	      line-height:     30px;
	      color:           #FFFFFF;		   
	      text-decoration: none;
	       }
		   
#Navi li a:hover {
		       color:           #8CC7FF;
		       text-decoration: none;
	              }

#Navi .aktiv a {
		    color: #8CC7FF;
	           }
	
#Navi ul li {		    
	       list-style-image: url(Bilder/Liste.png);
	       border-bottom: 0;	
	       line-height:      10px;		 
	          }

Und hier die HTML-Befehle:

<div id="Navi-Huelle"> 
     
    <ul id="Navi">
	  <li><a href="#">News</a></li>
              <ul>
                    <li><a href="#">Aktuell</a></li>
	            <li><a href="#">Archiv</a></li>
              </ul>	  
		
	  <li><a href="#">About Me</a></li>
	    <!--<ul>
	            <li><a href="#">Steckbrief</a></li>
	            <li><a href="#">Berichte</a></li>
	       </ul>-->
		
	  <li><a href="#">Skydiving</a></li>
	    <!--<ul>
	            <li><a href="#">Allgemein</a></li>
	            <li><a href="#">Ausbildung</a></li>
		   <li><a href="#">Sicherheit</a></li>
	            <li><a href="#">Wörterbuch</a></li>
		    <li><a href="#">Mythen</a></li>
	           <li><a href="#">FAQ</a></li>
	    </ul>-->
		
	  <li><a href="#">Media</a></li>
	    <!--<ul>
	        <li><a href="#">Fotos</a></li>
	        <li><a href="#">Videos</a></li>
	    </ul>-->
		
	  <li><a href="#">Gästebuch</a></li>
	  <li><a href="#">Links</a></li>
	  <li><a href="#">Kontakt</a></li> 
	  </ul>   
  </div>

Und hier wie immer das Ganze zum Verdeutlichen: http://www.sky-divezone.de/Other/Relaunch/

Wie kann ich die einzelnen Fehler/Anzeigeprobleme beheben?

Danke

 

[Maik]

Hi,

setz mal dieses Stylesheet für das Listenmenü ein:

ul#Navi, ul#Navi ul {
list-style: none;
margin: 0;
margin-left: 20px;
padding: 0;
}

ul#Navi li {
font-weight: bold;
}

ul#Navi li a, ul#Navi li ul li a {
display: block;
color: #FFFFFF;
text-decoration: none;
background: url(Bilder/Liste.png) no-repeat left center;
padding-left: 15px;
}

ul#Navi li a:hover {
color: #8CC7FF;
}

ul#Navi li a {
line-height: 30px;
border-bottom: 1px solid #8CC7FF;
}

ul#Navi ul li a {
line-height: 10px;
border-bottom: none;
}

ul#Navi .aktiv a {
color: #8CC7FF;
}

ruf nach dem "normalen" Stylesheet folgenden "Conditional Comment" auf:

<link rel="stylesheet" type="text/css" href="styles.css">
<!--[if lte IE 7]>
<style type="text/css">
ul#Navi li a, ul#Navi li ul li a {
width:100%;
}
</style>
<![endif]-->

wobei das Stylesheet selbstverständlich auch in eine CSS-Datei ausgelagert werden kann:

<link rel="stylesheet" type="text/css" href="styles.css">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="styles_ie.css">
<![endif]-->

und strukturiere das verschachtelte Listenmenü nach diesem Schema:

<ul id="Navi">
    <li><a href="#">News</a>
           <ul>
               <li><a href="#">Aktuell</a></li>
               <li><a href="#">Archiv</a></li>
           </ul>
    </li>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Skydiving</a></li>
    <li><a href="#">Media</a></li>
    <li><a href="#">Gästebuch</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>

 

[Rayne]

Toll, im FF und IE7 siehts jetzt so aus, wie es sein soll, danke!
Aber im IE6 werden weder die Trennlinien, noch die kleinen Pfeile angezeigt. Wenn ich schnell hintereinander auf Reload klicke, werden einige der Linien und manchmal auch zwei oder drei Pfeile für einen Bruchteil einer Sekunde angezeigt. Sehr merkwürdig.

 

[Maik]

Hi,

in der styles_ie.css wird kein "Conditional Comment" und ebensowenig das style-Element notiert:

<!--[if lte IE 7]>
<style type="text/css">
ul#Navi li a, ul#Navi li ul li a {
width:100%;
}
</style>
<![endif]-->

Stattdessen wird der "CC" im HTML-Dokument angegeben - vergleiche hierzu bitte nochmal meinen gezeigten Quellcode.

 

[Rayne]

Da muss ich wohl etwas zu großzügig kopiert haben. Ich muss mich dann sowieso erstmal in die ganze Angelegenheit reindenken.

Im IE6 gehts jetzt auch, BIS auf die Pfeile, die werden durch Quadrate ersetzt. Muss ich in der "styles_ie.css" auch noch "background:..." definieren?

Ach und eine Kleinigkeit, wirklich nur eine Kleinigkeit, dessen Ursache mich aber interessiert: Ich habe versucht, dass die erste waagerechte Linie unter "News" mit der waagerechten Linie rechts im Inhaltsbereich bündig abschließt (mittels Rumprobieren mit "margin-top"). Im FF befinden sich nun beide Linien nahezu auf einer Höhe, im IE6 + 7 ist die Linie im Menü aber höher, als die rechts daneben. Sind das jetzt einfach typische browserabhängige Unterschiede, die nunmal auftauchen und sich kaum umgehen lassen, oder kann man das doch lösen?

 

[Maik]

Dass die halbtransparenten PNG-Pfeile im IE6 als "Quadrate" dargestellt werden, dürfte wohl daran liegen, dass hier der "iepng.fix"-Hack nicht greift, was vermutlich am gewählten #Navi-Selektor liegt.

Theoretisch müsste es funktionieren, wenn die behavior-Eigenschaft auf die Navi-Links angewendet wird.

Praktisch wirst du aber dadurch auf das nächste Problem stoßen, da sich durch den "iepng.fix"-Hack im IE6 Hintergrundbilder nicht positionieren lassen, wie wir es mit left center vorgenommen hatten, und die Pfeile dann im IE6 links oben sitzen werden.

Um den Rahmen des Menüpunktes "News" in allen Browsern auf eine Höhe mit dem Rahmen aus dem Inhaltsbereich zu setzen, müsstest du entweder für das DIV #Navi-Huelle oder für das Listenelement #Navi den entsprechenden oberen Außenabstand bestimmen, und für die IEs den diskrepanten margin-top-Wert in der styles_ie.css aufnehmen.

 

[Rayne]

Dass die halbtransparenten PNG-Pfeile im IE6 als "Quadrate" dargestellt werden, dürfte wohl daran liegen, dass hier der "iepng.fix"-Hack nicht greift, was vermutlich am gewählten #Navi-Selektor liegt.

Theoretisch müsste es funktionieren, wenn die behavior-Eigenschaft auf die Navi-Links angewendet wird.

Praktisch wirst du aber dadurch auf das nächste Problem stoßen, da sich durch den "iepng.fix"-Hack im IE6 Hintergrundbilder nicht positionieren lassen, wie wir es mit left center vorgenommen hatten, und die Pfeile dann im IE6 links oben sitzen werden.

Ich habe den iepng-fix auch auf #Navi-Huelle angewandt, aber das alleine bringt nix:

img, #Header, #Navi { behavior: url(iepngfix.htc) }

Aber wenn du sagst, dass eine mögliche Lösung neue Probleme nach sich zieht, ist es wohl besser, damit zu leben, dass im IE6 Quadrate angezeigt werden? Hätte ich jetzt keine PNGs angegeben, würde es auch im IE6 funktionieren, nicht wahr? Im Prinzip müsste man ja keine PNGs benutzen, man könnte auch einfach die Hintergrundfarbe angeben, nur ist im oberen Bereich des Menüs noch ein leichter Verlauf erkennbar und da kann man keine feste Hintergrundfarbe angeben. So schlecht sehen die Quadrate ja nun auch nicht aus...

Um den Rahmen des Menüpunktes "News" auf eine Höhe mit dem Rahmen aus dem Inhaltsbereich zu setzen, müsstest du entweder für das DIV #Navi-Huelle oder für das Listenelement #Navi den entsprechenden oberen Außenabstand bestimmen.

Das habe ich mit "margin-top:..." in #Navi-Huelle versucht, aber wenn es im FF richtig ist, macht der IE trotzdem noch, was er will.

 

[Maik]

Sorry, hatte eben den entscheidenden Tipp vergessen und nachgereicht :-(

Um den Rahmen des Menüpunktes "News" in allen Browsern auf eine Höhe mit dem Rahmen aus dem Inhaltsbereich zu setzen, müsstest du entweder für das DIV #Navi-Huelle oder für das Listenelement #Navi den entsprechenden oberen Außenabstand bestimmen, und für die IEs den diskrepanten margin-top-Wert in der styles_ie.css aufnehmen.

Schau dir mal das hier im IE6 an:

img, #Header, ul#Navi li a, ul#Navi li ul li a { behavior: url(iepngfix.htc) }

 

[Rayne]

Cool, mit dem "margin-top:..." in der styles_ie.css funktioniert das einwandfrei! Die Möglichkeit kannte ich vorher noch gar nicht, dass man separat Stylesheets für bestimmte Browser angeben kann. Wieder etwas gelernt

Die andere Lösung von dir funktioniert insofern, dass im IE6 tatsächlich Pfeile angezeigt werden, aber nach oben hin versetzt, wie du es ja vorher schon angesprochen hast. Dann lass ich es bei den Quadraten oder nehme generell Quadrate, dann fällts nicht auf *g*

Ich danke dir bis hierhin für deine Mühen und Ausdauer, mit der du mir geholfen hast. Woher nimmst du eigentlich dein ganzes Wissen? Bist du beruflich grob in diesem Segment tätig, oder ist das alles selbst anerlerntes Wissen?

Bis zum nächsten Problem...lach

 

[Maik]

Beruflich bin ich in einem ganz anderem Segment tätig ;-)

1. Bau - und Möbelschreiner (bis 1995)
2. gesundheitsbedingt berufl. Rehabilitation zum Bauzeichner / Hochbau (1996 -1998)
3. seit 2000 angestellt in einem Ing.-Büro für Bauwesen