IE White-Space BUG in List-Menu / CSS-Workaround

ulle · #1 (**permalink**) 30.10.2005, 11:10

Vertikale Listen für Menüs:

IE-BUG

Zeilenumbrüche = White-Space = Abstände

Bisher hatte ich dieses Problem mit (X)HTML-Kommentaren abgefangen.

Zitat:

[*]item 1[*]item 2[*]<a href="#nogo">item 3
2.Zeile </a>[*]item 4

Bei meinen letzten Entwicklungen bin ich zur folgenden Lösung gekommen:

CSS Workaround ohne Markup Veränderung
Inline-Elemente werden durch die Eigenschaft [line-height] in ihrer Höhe beeinflußt/definiert. Auch für Elemente im Block-Level bzw. im List-Item-Level ist diese Eigenschaft von Bedeutung sofern ein solches Element nicht leer ist.
Und hier liegt der IE-Bug, er zeigt zwar nicht den White-Space setzt aber den line-height für das li-Element. Nach diesem Verständnis habe ich nun einen Workaround gefunden.

Zitat:

#menu li {

/* Kontrollfarbe
*/
background-color: #FF0000;

line-height: 0;

}

Leider gibt es mit dem Firefox evtl. ein Rundungsproblem, deshalb ist es Sinnvoll dem Link-Element eine Mindesthöhe >= der Zeilenhöhe im Block-Element (a-Tag) zu definieren.

Zitat:

#menu li a {

min-height: 1.5em;
/* IE min-height */
height: auto !important;
height: 1.5em;
line-height: 1.5;

}

Hier das TEST-Case

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/

*         {
         margin:  0;
         padding: 0;
         
         border-collapse:collapse;
         border-spacing: 0;
         }


html,
body      {
         color:      #000000;
         background:   #DDDDDD;
         line-height: 1.45;
         }

body      {
         font-size:   100.01%;
         font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
         }




#menu         {
         width: 10em;
         
         margin: 1em auto;
         
         background-color: #00FF00;
         }
         


#menu ul   
         {
         list-style-type: none;

         margin: 0;
         padding: 0;
         }

            

#menu li    
         {
         /* Kontrollfarbe
          */
         background-color: #FF0000;

         line-height: 0;
         }
         
         

#menu li a   {
         display: block;
         
         min-height:    1.5em;
         height:       auto !important;
         height:       1.5em;
         line-height:    1.5;

         
         /* Dimension IE
          * somit voll anklickbar
          */
         position: relative;

         padding: 1px 1em 2px;
   
         background-color: #FF9922;
         }


#menu a:hover
         {
         background-color: #2299FF;
         }

         
/*]]>*/
</style>

</head><body>

<div id="menu">
   <ul>[*]item 1[*]item 2[*]<a href="#nogo">item 3
2.Zeile </a>[*]item 4[/list]</div>
      
</body></html>

Floele · #2 (**permalink**) 30.10.2005, 21:55

Zitat:

Zitat von ulle

Vertikale Listen für Menüs:

IE-BUG

Zeilenumbrüche = White-Space = Abstände

Bisher hatte ich dieses Problem mit (X)HTML-Kommentaren abgefangen.

Zitat:

[*]item 1[*]item 2[*]<a href="#nogo">item 3
2.Zeile </a>[*]item 4

Geht es nicht auch so? Habe das mal irgendwo gelesen.

Zitat:

[*]item 1</li
>[*]item 2</li
>[*]<a href="#nogo">item 3
2.Zeile </a></li
>[*]item 4

ulle · #3 (**permalink**) 31.10.2005, 08:15

Zitat:

Zitat von Floele

Geht es nicht auch so? Habe das mal irgendwo gelesen.

Zitat:

[*]item 1</li
>[*]item 2</li
>[*]<a href="#nogo">item 3
2.Zeile </a></li
>[*]item 4

Sicher geht es auch so.... und es wird auch noch mehr MARKUP Möglichkeiten geben.

Nachteile:
1. Der Validator meldet Fehler
2. Wenn Du keinen Zugriff aufs Markup hast - wirst Du es auch nicht veränder können.

Ich versuche immer Möglichkeiten zu finden die mich vom Eingriff ins Markup schützen

terrikay · #4 (**permalink**) 31.10.2005, 20:30

Wenn man ins Markup eingreifen kann/will, dann hilft es auch, einfach eine Lücke an der richtigen Stelle einzusetzen:

Code:

[*]item 1 [*]item 2 [*]<a href="#nogo">item 3
2.Zeile  </a>[*]item 4

Also vor dem schließenden </a> einfach ein Leerzeichen einzetzen. Ist wesentlich übersichtlicher als die oben genannten Varianten.

Per CSS und ohne Eingriff ins Markup:
Für Listen display:inline definieren, für die Links dann wieder display:block, damit die Links schön untereinanderstehen - also:

Code:

li {display:inline;}
li a {display: block;}

Boris · #5 (**permalink**) 07.11.2005, 02:02

Da ich dieses Problem noch nie hatte, hab ich ulles Code mal getestet. Das einzige, was ich verändert hab, ist anstelle von mehreren Leerzeichen zur Einrückung echte Tabs zu benutzen.

Das line-height: 0; hab ich entfernt, und dennoch bleibt es auch im IE6 "sauber":

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/

*
{
	margin: 0;
	padding: 0;

	border-collapse: collapse;
	border-spacing: 0;
}


html,
body
{
	color: #000000;
	background: #DDDDDD;
	line-height: 1.45;
}

body
{
	font-size: 100.01%;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#menu
{
	width: 10em;
	margin: 1em auto;
	background-color: #00FF00;
}

#menu ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#menu li
{
	/* Kontrollfarbe */
	background-color: #FF0000;
}

#menu li a
{
	display: block;

	min-height: 1.5em;
	height: auto !important;
	height: 1.5em;
	line-height: 1.5;

	position: relative;
	padding: 1px 1em 2px;
	background-color: #FF9922;
}


#menu a:hover
{
	background-color: #2299FF;
}
/*]]>*/
</style>

</head>
	<body>

		<div id="menu">
			<ul>
				[*]item 1
				[*]item 2
				[*]<a href="#nogo">item 3
2.Zeile </a>
				[*]item 4
			[/list]		</div>

	</body>
</html>

terrikay · #6 (**permalink**) 07.11.2005, 07:18

Dass es im IE 6 sauber bleibt, liegt an der Höhe, die du vergeben hast. Ohne height hast du auch die Lücken.
Im IE 5 hast du aber ohnehin Lücken - Abhilfe s. oben.

Boris · #7 (**permalink**) 07.11.2005, 09:48

Zitat:

Zitat von terrikay

Dass es im IE 6 sauber bleibt, liegt an der Höhe, die du vergeben hast. Ohne height hast du auch die Lücken.
Im IE 5 hast du aber ohnehin Lücken - Abhilfe s. oben.

Das ist ulles Code, nicht meiner

ulle · #8 (**permalink**) 12.11.2005, 18:26

Zitat:

Zitat von Boris

Das einzige, was ich verändert hab, ist anstelle von mehreren Leerzeichen zur Einrückung echte Tabs zu benutzen.

@Boris - Glaubst Du wirklich ich arbeite mit Leerzeichen

Jeder der hier CODE postet wird wohl mit TABs arbeiten, die Leerzeichen kommen schlicht vom posten. (textarea!)

Boris · #9 (**permalink**) 13.11.2005, 11:43

Ich kenn genug Programmierer, die mit Leerzeichen einrücken, weil "die Tabgröße bei jedem anders eingestellt ist". Was mir persönlich egal ist

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit PullDown Menu auf ipad/iphone	smisonline2	CSS	1	13.05.2013 17:13
CSS Problem mit Menu	Alomaman	CSS	2	19.06.2010 14:58
Kindelement eines ausgeblendeten Elternelementes ansprechen	wandler	CSS	7	19.06.2010 01:32
CSS Flyout Menu z-index Problem?	Deluxestyler	CSS	6	18.05.2010 12:05
Vertikale CSS Navigation mit Bildern und Text	macmensa	CSS	2	25.07.2009 16:23