Vertikale Abstände im IE 5.5

[Martys]

Hallo,

ich habe ein Problem mit einem Menü im IE 5.5. Das Menü basiert auf Listen, welche mit CSS formatiert sind. Es funktioniert auch in den gängigen Browsern, nur der IE 5.5 stellt es fehlerhaft dar. Zwischen den einzelnen Punkten macht der IE 5.5 vertikal Leerräume und ich habe keine Ahnung, wie ich diese vermeiden kann. Horizontal konnte ich mittels Boxmodell-Hack die Darstellung korrigieren, gibt es sowas auch für die Vertikale?

Hier mal der Ausschnitt aus der CSS-Datei:

#navcontainer ul, #navcontainer li
{
margin: 0px;
padding: 0px;
list-style-type: none;
font-family: Verdana, Helvetica, Arial;
font-size: 12px;
}

#navcontainer a
{
/* Angabe für den IE 5.x */
display: block;
padding: 2px 2px 2px 8px;
width: 124px;
background-color: #fbfbf9;
margin: 0px;
voice-family: "\"}\"";
voice-family: inherit;
/*Angabe für die anderen Browser */
display: block;
padding: 2px 2px 2px 8px;
width: 113px;
background-color: #fbfbf9;
margin: 0px;
}

#navcontainer a:link, #navlist a:visited, #navcontainer a:active
{
border-bottom: 1px solid #d7cfbf;
border-right: 1px solid #d7cfbf;
color: #999999;
text-decoration: none;
background-color: #fbfbf9;
margin: 0px;
}

#navcontainer a:hover
{
border-bottom: 1px solid #d7cfbf;
border-right: 1px solid #d7cfbf;
background-color: #ebe7df;
color: #000000;
margin: 0px;
}

#active a:link, #active a:visited
{
border-bottom: 1px solid #d7cfbf;
border-right: 1px solid #d7cfbf;
background-color: #ebe7df;
color: #000000;
margin: 0px;
}

#active a:hover
{
border-bottom: 1px solid #d7cfbf;
border-right: 1px solid #d7cfbf;
background-color: #ebe7df;
color: #000000;
margin: 0px;
}

#navcontainer a.sub
{
/* Angabe für den IE 5.x */
display: block;
padding: 2px 2px 2px 16px;
width: 124px;
background-color: #fefefe;
margin: 0px;
voice-family: "\"}\"";
voice-family: inherit;
/*Angabe für die anderen Browser */
display: block;
padding: 2px 2px 2px 16px;
width: 105px;
background-color: #fefefe;
margin: 0px;
}

#navcontainer a.sub:link, #navlist a.sub:visited
{
border-bottom: 1px solid #e7e3d9;
border-right: 1px solid #e7e3d9;
color: #666666;
text-decoration: none;
background-color: #fefefe;
margin: 0px;
}

#navcontainer a.sub:hover
{
border-bottom: 1px solid #e7e3d9;
border-right: 1px solid #e7e3d9;
background-color: #ebe7df;
color: #000000;
margin: 0px;
}

Und hier der Ausschnitt des Menüs:

<div id="navcontainer"> 
  <ul id="navlist">
    <li><a href="#" id="current">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Spielbetrieb</a></li>
    <li><a href="#">Verein</a></li>
    <li id="active"><a href="#">Mannschaften</a></li>
    <li><a href="#" class="sub">Bundesliga</a></li>
    <li><a href="#" class="sub">Verbandsliga</a></li>
    <li><a href="#" class="sub">Bezirksliga</a></li>
    <li><a href="#" class="sub">Historie</a></li>
    <li><a href="#">Galerie</a></li>
    <li><a href="#">Sponsoren</a></li>
    <li><a href="#">G&auml;stebuch</a></li>
  </ul>
</div>
<img src="pics/bg_navi_unten.gif" alt="" width="118" height="35" border="0" />

Im Anhang noch ein Screenshot der unterschiedlichen Darstellungen.

Danke schonmal,

Martys

 

[Gumbo]

Probier mal folgendes CSS:

* {
	margin:			0;
	padding:		0;
	border-style:		none;
}
body {
	font-family:		Verdana, Helvetica, Arial;
	font-size:		12px;
}
#navcontainer {
	width:			124px;
}
#navcontainer ul {
	list-style:		none;
}

#navcontainer a {
	display:		block;
	width:			100%;
	padding:		2px 2px 2px 8px;
	background-color:	#fbfbf9;
}
html>body #navcontainer a {
	width:			auto;
}

#navcontainer a:link,
#navlist a:visited,
#navcontainer a:active {
	text-decoration:	none;
	color:			#999;
	background-color:	#fbfbf9;
	border-bottom:		1px solid #d7cfbf;
	border-right:		1px solid #d7cfbf;
}

#navcontainer a:hover {
	color:			#000;
	background-color:	#ebe7df;
	border-bottom:		1px solid #d7cfbf;
	border-right:		1px solid #d7cfbf;
}

#active a:link,
#active a:visited {
	color:			#000000;
	background-color:	#ebe7df;
	border-bottom:		1px solid #d7cfbf;
	border-right:		1px solid #d7cfbf;
}

#active a:hover {
	color:			#000;
	background-color:	#ebe7df;
	border-bottom:		1px solid #d7cfbf;
	border-right:		1px solid #d7cfbf;
}

#navcontainer a.sub {
	display:		block;
	padding:		2px 2px 2px 16px;
	background-color:	#fefefe;
}

#navcontainer a.sub:link,
#navlist a.sub:visited {
	text-decoration:	none;
	color:			#666;
	background-color:	#fefefe;
	border-bottom:		1px solid #e7e3d9;
	border-right:		1px solid #e7e3d9;
}

#navcontainer a.sub:hover {
	color:			#000;
	background-color:	#ebe7df;
	border-bottom:		1px solid #e7e3d9;
	border-right:		1px solid #e7e3d9;
}

 

[Martys]

Danke für Deine Antwort, leider sind die vertikalen Abstände noch vorhanden.

Allerdings werden jetzt überall die Rahmen angezeigt, d.h. beim Hover im IE 5.5 "flattert" das Menü nicht mehr.

Was hat es mit

* {
	margin:			0;
	padding:		0;
	border-style:		none;
}

auf sich? Was wird mit * angesprochen?

 

[Gumbo]

Ich hab leider nicht den Internet Explorer 5.5 sondern nur den Nachfolger der Version 6; daher kann ich das tatsächliche Ergebnis leider nicht begutachten. Im Internet Explorer 6 war das Problem jedoch beseitigt.

Der Universal-Selektor * trifft auf alle Elemente des Dokumentenbaums.

 

[Martys]

Ok, danke. Falls es Dich interessiert, hier und hier kann man sich Standalone-Versionen des IE runterladen, so kann man in mehreren Versionen testen.

 

[Quaese]

Hi,

versuch mal folgendes in deine CSS-Definitionen aufzunehmen.

#navcontainer li{ display: inline;}

Ausserdem funktioniert es bei mir im IE 5.5, aber nicht im IE 5.0.

Die gleichen Anzeigeprobleme treten übrigens beim Opera 6.x auf, sind jedoch mit einer
inline-Definition nicht zu beseitigen.

Ciao
Quaese

 

[Martys]

Es funktioniert (außer im Opera 6, aber was soll`s), vielen Dank.
Kann es sein, das man bei Block-Elementen immer diplay: inline; definieren muss um keinen vertikalen Abstand zu erhalten?