'Trennstriche' in vertikalem Menu

Status
Nicht offen für weitere Antworten.

the_codexxx

Grünschnabel
Hi zusammen

Aufgrund des IE7-Bugs habe ich nun die "aktuelle" Version dieses Menues bei mir Einsatz:

http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/P0/

Funktioniert alles super bzw. so wie vorher, nur:

Background-Color ist dunkelblau. Die Rahmen der einzelnen Menuelementen (im Beispiel der obigen URL grau) will ich "unsichtbar" haben. Also beim CSS den Border auf 0px bzw. none und/oder gleiche Farbe wie der Hintergrund. Leider immer Fehlanzeige. In einem nicht logischen Abstand erhalte ich nun unter den Menupunkten von Untermenues weisse "Trennstriche" (--> Grafik). Weiterer Punkt: Das ganze geschieht nur im FF, der IE zeigt's ausnahmsweise mal richtig an :-(

Leider find' ich den Fehler nicht.

Besten Dank für eure Hinweise/Hilfe

[Edit]
Grafik entfernt
 
Zuletzt bearbeitet:
Hi,

wenn ich in den folgenden Selektoren den Rahmen auf null setze, erscheinen bei mir u.a. im Firefox keine "Trennstriche":

Code:
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 0px solid #ccc;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 0px solid #ccc;
border-bottom: 0;
}
Ansonsten solltest du mal deinen Quellcode (HTML + CSS) posten, falls dir das nicht weiterhilft.
 
Hi

Danke für deine Antwort, aber das Ergebnis bleibt (bei mir) gleich.

Hier mal der Code

Code:
<!-- Beginn Menu -->

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckerdiv ul{
margin: 0; 
padding: 0; 
list-style-type: none;
width: 165px; /* Width of Menu Items */
border-bottom: 0px solid #ccc;

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
}
	
.suckerdiv ul li{
position: relative;
}
	
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 175px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: #fff;
text-decoration: none;
background: #003366;
padding: 5px 5px;
border: 0px solid #ccc;
border-bottom: 0px;
}

.suckerdiv ul li a:visited{
color: #fff;
}

.suckerdiv ul li a:hover{
background-color: #0A50A1;
}

.suckerdiv .subfolderstyle{
/* background: url(media/arrow-list.gif) no-repeat center right; */
}

	
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
		if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
			ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
		else //else if this is a sub level submenu (ul)
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
		for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
		ultags[t].style.visibility="visible"
		ultags[t].style.display="none"
		}
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

</script>

</head>
<body>

<div class="suckerdiv">
 <ul id="suckertree1">
  <li><a href="#">Home</a></li>
  
  <li><a href="#">Portrait</a>
   
   <!-- Untermenu -->
    <ul>
	 <li><a href="#">Gemeindeinfos</a>
	  
	  <!-- Untermenu -->
	   <ul>
	    <li><a href="#">Geschichte</a></li>
		<li><a href="#"">Wappen/Logo</a></li>
		<li><a href="#">Beschreibung</a></li>
		<li><a href="#">Heime</a></li>
		<li><a href="#">Zahlen/Fakten</a></li>
	   </ul>
	  </li>
	 
	 <li><a href="#">Lageplan</a></li>
	</ul>
   </li>
   
   <li><a href="#">Aktuelles</a>
   
    <!-- Untermenu -->
	 <ul>
	  <li><a href="#">News</a></li>
	  <li><a href="#">Mitteilungsblatt</a></li>
	  <li><a href="#">SBB-Tageskarten</a></li>
	 </ul>
	</li>
   
   <li><a href="#">Behörden</a>
   
    <!-- Untermenu -->
	 <ul>
	  <li><a href="#">Gemeinderat</a></li>
	  <li><a href="#">GPK</a></li>
	  <li><a href="#">Konstituierung</a></li>
	  <li><a href="#">Parteien</a></li>
	 </ul>
	</li>
.....

Gruss
 
So, hab die Seite eben im FF 1.5.0.7 überprüft und auch in dieser Version treten bei mir keine Darstellungsfehler auf.
 
Wenn du die Seite hier nicht veröffentlichen willst, dann schick mir halt eine PN ;)
 
Okay, nun wird bei mir auch die "Trennlinie" dargestellt, die aber tatsächlich ein Abstand zwischen den Listenpunkten ist und vom folgenden Selektor in der CSS-Datei style.css verursacht wird ;)

Code:
li  { margin-top: 0.5px }
Zudem solltest du in dem DIV .box2 die folgenden Zeilen aus dem HTML-Code entfernen:

Code:
</head>
<body>
 
Status
Nicht offen für weitere Antworten.
Zurück