XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Vertikale Navigation: IE6 - Whitespace-Bug? (http://xhtmlforum.de/showthread.php?t=55781)

b.erry 12.02.2009 14:54

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 :D

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 :D
Danke schon einmal für eure Bemühungen.

b.erry

fricca 12.02.2009 15:05

Zitat:

Zitat von b.erry (Beitrag 422146)
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.

b.erry 12.02.2009 15:27

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 ... :D

fricca 12.02.2009 15:37

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.

b.erry 12.02.2009 15:45

*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!

fricca 12.02.2009 15:50

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.

b.erry 12.02.2009 17:46

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.


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

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023