|
|||
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> 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; } Danke schon einmal für eure Bemühungen. b.erry |
Sponsored Links |
|
|||
Zitat:
Schau doch mal nach, wie dein Vorbild Stu Nicholls das gelöst hat.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
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 ...
|
|
|||
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:
Du doppelst alles mögliche. Das lässt sich nicht mehr kontrollieren.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
*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! |
|
|||
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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
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.
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
Problem mit FlyOut Menu im IE7 | quarki69 | CSS | 5 | 15.03.2010 16:46 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 19:18 |