zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden IE White-Space BUG in List-Menu / CSS-Workaround

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.10.2005, 12:10
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard IE White-Space BUG in List-Menu / CSS-Workaround

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>
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.10.2005, 22:55
Benutzerbild von Floele
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.03.2005
Beiträge: 355
Floele befindet sich auf einem aufstrebenden Ast
Standard Re: IE White-Space BUG in List-Menu / CSS-Workaround

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.10.2005, 09:15
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard Re: IE White-Space BUG in List-Menu / CSS-Workaround

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
__________________
</ulle>
Mit Zitat antworten
  #4 (permalink)  
Alt 31.10.2005, 21:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

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;}
__________________
Grüße,
Terry

... die immer noch sporadisch mitliest, auch wenn sie sich wenig zu Wort meldet ...
Mit Zitat antworten
  #5 (permalink)  
Alt 07.11.2005, 03:02
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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>
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #6 (permalink)  
Alt 07.11.2005, 08:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
Grüße,
Terry

... die immer noch sporadisch mitliest, auch wenn sie sich wenig zu Wort meldet ...
Mit Zitat antworten
  #7 (permalink)  
Alt 07.11.2005, 10:48
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #8 (permalink)  
Alt 12.11.2005, 19:26
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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!)
__________________
</ulle>
Mit Zitat antworten
  #9 (permalink)  
Alt 13.11.2005, 12:43
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Ich kenn genug Programmierer, die mit Leerzeichen einrücken, weil "die Tabgröße bei jedem anders eingestellt ist". Was mir persönlich egal ist
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:06 Uhr.