zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Vertikale Navigation: IE6 - Whitespace-Bug?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.02.2009, 13:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.11.2008
Beiträge: 5
b.erry befindet sich auf einem aufstrebenden Ast
Standard Vertikale Navigation: IE6 - Whitespace-Bug?

Hallo zusammen,

nun lese ich schon seit einer geraumen Zeit immer fleißig mit und nun hat es mich auch mal erwischt mit einem Problem.

Also, ich habe eine Liste als vertikalte Navigation erstellt, bei der es dann auch Untermenüs geben soll. Funktioniert bei mir auch in allen Browsern perfekt ... bis auf den IE6. Dort erscheint zum einen unter jedem Menüpunkt, der ein Untermenü beinhaltet so ein kleines Quadrat und zum anderen scheint sich dadurch das <li>-Feld etwas nach unten zu verschieben.

Habe die Navigation mal separiert und als Testcase hochgeladen:
Link zur Navigation

Den Code habe ich auch auf das wesentliche zusammengestaucht, auch wenn es nach diversem rumprobieren für mich doch etwas nach Kraut und Rüben ausschaut

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>
  
  <title>Titel der Webseite</title>  
  
  <link type="text/css" rel="stylesheet" href="css/screen.css" media="screen" />
  <link type="text/css" rel="stylesheet" href="css/print.css" media="print" />
  

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

</head>

<body>


			<div class="menu">
		
				<ul id="menue">
				  <li><a href="index.html">Startseite</a></li>
				  
				  <li class="hide"><a href="punkt1.html">Punkt 1</a>
				  
					<!--[if lte IE 6]>
					<li><a href="punkt1.html">Punkt 1
					<table><tr><td>
					<![endif]-->
				    <ul>
					  <li><a href="punkt1a.html">Punkt 1a</a></li>
					  <li><a href="punkt1b.html">Punkt 1b</a></li>
					  <li class="lastnavi"><a href="punkt1c.html">Punkt 1c</a></li>
					</ul>
					<!--[if lte IE 6]>
					</td></tr></table>
					</a></li>
					<![endif]-->					
				  </li>
				  <li class="hide"><a href="punkt2.html">Punkt 2</a>
				  	<!--[if lte IE 6]>
					<li><a href="punkt2.html">Punkt 2
					<table><tr><td>
					<![endif]-->
					<ul>
					  <li><a href="punkt2a.html">Punkt 2a</a></li>
					  <li><a href="punkt2b.html">Punkt 2b</a></li>
					  <li class="lastnavi"><a href="punkt2c.html">Punkt 2c</a></li>
					</ul>
					<!--[if lte IE 6]>
					</td></tr></table>
					</a></li>
					<![endif]-->						
				  </li>
				  <li><a href="punkt3.html">Punkt 3</a></li>
				  <li><a href="punkt4.html">Punkt 4</a></li>
				  <li><a href="punkt5.html">Punkt 5</a></li>
				  <li><a href="punkt6.html">Punkt 6</a></li>
				  <li class="lastnavi"><a href="punkt7.html">Punkt 7</a></li>
				</ul>
				
			</div>

				
</body>
</html>
Und natürlich meine CSS-Daten:

Code:
*  {
	padding:0;
	margin:0;
}

body  {
      color:#000;
      background: #ccc;
      text-align: left;
      font:100.01% tahoma, verdana,arial,sans-serif;
	  height: 100%;
	  margin: 0;
	  padding: 0;
}

p, li, dt, dd, input, textarea  {
     font-size: 1em;
	 text-align: left;
	 padding: 0 1.3em 1em 1.3em;
}

a  {
	text-decoration: underline;
	color: #ac4652;
}
a:hover {
	text-decoration: none;
	background: #ac4652;
	color: #fff;
}

#navigation {
	 float: left;
}
* html #menue a {
	 height: 1px;
}
#menue{
	 margin-left: 2em;
	 border: 1px solid #ac4652;
}
#menue li {
	 background: #fff;
	 border-bottom: 1px dashed #ac4652;
	 padding: 0;
	 width: 12em;
}
#menue a {
	 text-decoration: none;
	 color: #ac4652;
	 font-weight: bold;
	 font-size: 0.8em;
	 text-align: left;
	 min-height: 0;
	 margin: 0;
}
#menue li:hover {
	 position: relative;
	 background: #ac4652;
	 text-indent: 0;
}
#menue a:hover {
	 color: #fff;
	 text-decoration: none;
	 background: #ac4652;
}
#menue a:hover ul{
	 float: left;
	 left: 15.1em;
	 top: -1px;
	 border-top: 1px solid #ac4652;
	 border-right: 1px solid #ac4652;
	 border-bottom: 1px solid #ac4652;	 
}
#menue a:hover ul li {
	 background: #fff;
}
#menue a:hover ul li a {
	 color: #ac4652;
	 text-decoration: underline;
}
#menue a:hover ul li a:hover {
	 color: #fff;
	 text-decoration: none;
	 background: #ac4652;
}
#menue li:hover a {
	 color: #fff;
	 text-decoration: underline;	 
}
#menue ul {
	 position: absolute;
	 left: -9999px;
}
#menue li:hover ul {
	 left: 8em;
	 top: 1em;
	 border: 1px solid #ac4652;
}
#menue li:hover li {
	 width: 12em;
	 background: #fff;
}
#menue li:hover li a {
	 color: #ac4652;
}
#menue li li:hover {
	 background: #ac4652;
}
#menue li li:hover a {
	 color: #fff;
	 text-decoration: underline;
}
#menue li li a:hover {
	color: #fff;
	text-decoration: none;
}
#menue .lastnavi{
	 border: 0;
}

.menu ul li a {
	 display:block;
	 width:14em;
	 text-align:left;
	 background:#fff;
	 padding-top: 10px;
	 padding-right: -2px;	 
	 padding-bottom: 8px;
	 padding-left: 15px;
	 margin: -1px;
}
.menu ul {
	 padding:0;
	 margin:0;
	 list-style: none;
}
.menu ul li {
	 position:relative;
}
.hide {
	 display:none;
}
Hoffe mir kann jemand helfen bzw. den virtuellen Zaunpfahl herausholen um mich in die richtige Richtung zu drehen
Danke schon einmal für eure Bemühungen.

b.erry
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.02.2009, 14:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von b.erry Beitrag anzeigen
bis auf den IE6. Dort erscheint zum einen unter jedem Menüpunkt, der ein Untermenü beinhaltet so ein kleines Quadrat
Das ist die Tabelle.
Schau doch mal nach, wie dein Vorbild Stu Nicholls das gelöst hat.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.02.2009, 14:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.11.2008
Beiträge: 5
b.erry befindet sich auf einem aufstrebenden Ast
Standard

Dank Dir schon mal für den Tipp fricca. Dachte mir schon irgendwie, dass es an Tabelle liegen könnte. Habe zwar schon länger in den Quelltext von SN geschaut, aber vielleicht trifft mich ja noch der Blitz der Weisheit ...
Mit Zitat antworten
  #4 (permalink)  
Alt 12.02.2009, 14:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Du wirst irgendwann einen Eintrag sehen, der dafür sorgt, dass von den Tabellen nichts zu sehen ist.

Du hingegen sorgst dafür, dass von Tabellen möglichst viel zu sehen ist.
Zitat:
table, tr, td {
border: 1px solid #ac4652;
}
Nochwas Grundsätzliches: In ein IE-Stylesheet gehört nur das rein, was der IE an Besonderheiten braucht.
Du doppelst alles mögliche. Das lässt sich nicht mehr kontrollieren.
Mit Zitat antworten
  #5 (permalink)  
Alt 12.02.2009, 14:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.11.2008
Beiträge: 5
b.erry befindet sich auf einem aufstrebenden Ast
Standard

*seufz* Ich weiß, anfangs funktioniert das bei mir auch immer ganz gut mit der Ordnung. Spätestens ab dem dritten Problem mit diversen Änderungen und Versuchen habe ich dann einiges doppelt da stehen.

Danke Dir für den Hinweis auf meine andere css-Datei. Den Eintrag hatte ich total vergessen.

edit: Ach ja, die Quadrate sind nun schon mal weg!
Mit Zitat antworten
  #6 (permalink)  
Alt 12.02.2009, 14:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Schön.
Dann schau dir jetzt nochmal genau an, was Stu Nicholls mit der Klasse hide macht -- und v.a. wo er sie vergibt.
Ich bezweifle, dass er es wie du macht.
Mit Zitat antworten
  #7 (permalink)  
Alt 12.02.2009, 16:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.11.2008
Beiträge: 5
b.erry befindet sich auf einem aufstrebenden Ast
Standard

Irgendwie habe ich es noch nicht auf die Reihe bekommen. Danke Dir aber schon mal für die Tipps. Gleich ist erst einmal Schicht und ich setz mich dann morgen wieder eingehend damit auseinander ... Der Wald ist vor lauter Bäumen gerade auch zu dicht.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Navigation safari CSS 12 20.04.2011 11:11
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Problem mit FlyOut Menu im IE7 quarki69 CSS 5 15.03.2010 15:46
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 18:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:09 Uhr.