Kleines schönheits Problem bei Popup Menü

Status
Nicht offen für weitere Antworten.
Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
Hallo,
hab mir hier das popup Menü von Splatterfish nachgebaut. Nun habe ich das kleine Problem das bei dem Menüpunkt Portfolio 2 im Untermenü links eine weiße Linie habe und diese ist nun links unten am rand sichtbar.
Hatt vielleicht jemand eine Idee wie ich das doofe pröblem lösen kann?

Code: 
<body class="body">
<ul id="nav">
    <li><a href="#">Arbeiten</a>
    	<ul>
         <li><a href="#">Print</a></li>
         <li><a href="#">Nonprint</a></li>
         </ul>
    </li>
    	<li><a href="#">Portfolio</a>
         <ul>
         <li><a href="#">Portfolio1</a></li>
         <li><a href="#">Portfolio2</a></li>
    	    <ul>
             <li><a href="#">Portfolio2.1</a></li>
             <li><a href="#">Portfolio2.1</a></li>
             </ul>
         <li><a href="#">Portfolio3</a></li>
         </ul>
    </li>
    	</ul>
</body>
</html>
Code: 
#nav  { 
	font-family: verdana, helvetica, arial, sans-serif;
         color:#000000;
	font-size: 9pt;
         text-decoration:none;
       	text-align:center;
	background:#ffffff;
	border-bottom:2px solid #cccccc;
	position: absolute;
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 20px;
         z-index:2;
}

#nav ul{	padding: 0px;
	margin: 0px;
	list-style: none;
	line-height: 20px;
         }

#nav a { color:#000000;
         text-decoration:none;
	display: block;
	width: 150px;
}


#nav li { 
	float: left;
	width: 0px; /* width needed or else Opera goes nuts */
}

#nav li ul { 
	position: absolute;
	background: #ffffff;
	border:2px solid #cccccc;
         border-top;2px solid #ffffff;
	width: 150px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul ul { 
         border:2px solid #cccccc;
         border-left:2px solid #ffffff;
	position: absolute;
         padding:0px;
	margin: -22px 0px 0 150px;
	line-height: 20px;
         z-index:3;

}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
         left: auto;
}}
 
Du hast das schliessende </li> für Portfolio2 falsch (zu früh) gesetzt.

Vielleicht ist das der Grund für die weiße Linie am linken Rand :confused:

Korrigierter HTML-Source:
Code: 
<ul id="nav">
    <li><a href="#">Arbeiten</a>
    	<ul>
         <li><a href="#">Print</a></li>
         <li><a href="#">Nonprint</a></li>
         </ul>
    </li>
    	<li><a href="#">Portfolio</a>
         <ul>
         <li><a href="#">Portfolio1</a></li>
         <li><a href="#">Portfolio2</a>
    	    <ul>
               <li><a href="#">Portfolio2.1</a></li>
               <li><a href="#">Portfolio2.1</a></li>
            </ul>
        </li>
         <li><a href="#">Portfolio3</a></li>
         </ul>
    </li>
 </ul>
 
Okay, dann korrigiere mal folgende Syntax-Fehler im CSS-Code:

Code: 
#nav li ul { 
	position: absolute;
	background: #ffffff;
	border:2px solid #cccccc;
         border-top;2px solid #ffffff;
	width: 150px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
         left: auto;
}}
 
Das hatt auch nichts gebracht. Ich habe mir das ganze mal im Browsere vergrößert angeschaut und so wie das ausssieht kann man das garnicht korrigieren da hier die Linien im 45 Grad Winkel auf der Ecke liegen.
Oder täusche ich mich da?
 

Anhänge

  • Clipboard02.jpg
    Clipboard02.jpg
    24 KB · Aufrufe: 51
Hallo Jan,

in der Vorschaugrafik sind nun vier 45°-Ecken zu erkennen. Stellt sich mir die Frage, welche von denen beabsichtigt sind, und welche nicht :confused:
 
Ja eigentlich keine. Also ich möchte das die grauen Ränder in sich übergehen. Nur habe ich doch keinen Einfluss darauf. Ich möchte ja das die grauen Ränder in einander übrgehen.
 
Das wird ja immer rätselhafter ... :confused:

  1. Tritt das Phänomen in allen Browsers auf, oder nur in einem Bestimmten?
  2. Kannst du die Seite mal online stellen?
 
DirtyWorld hat gesagt.:
Hi,
also im Firefox funktioniert eigentlich noch garnichts :( . Ich hab das ganze jetzt erstmal für IE zudammen gemurkst.
Zum Vergrößern anklicken....
Stimmt, im FireFox (1.0.7), Mozilla (1.6), Netscape (7.0) und Opera (8.50) funktioniert das Menü überhaupt nicht bzw. werden die CSS-Formatierungen nicht übernommen / korrekt dargestellt (!)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück