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>