Bene: Probleme mit Navigationslisten in IE und Firefox

SELF-Forum

Probleme mit Navigationslisten in IE und Firefox

Bene
– Informationen zu den Bewertungsregeln

Hallo,

ich habe zwei Probleme mit Navigationslisten.

1.)Ich möchte das der gesamte Listeneintrag klickbar ist und nicht nur der Textlink. Mit display:block auf den Link kommt der IE aber nicht klar.
Nach langem Rumprobieren hab ich folgendes entdeckt: Wird nach der Liste ein <img> eingefügt, funktioniert es. Warum auch immer. Habt ihr eine logische Erklärung dafür.

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">  
<head>  
  
<title></title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
<style>  
div#nav-area  
{  
 width: 10em;  
}  
  
div#nav-area ul.sub-nav li  
{  
 font-size: 12px;  
 line-height: 15px;  
 background: #fff;  
 border: 2px solid blue;  
}  
  
div#nav-area ul.sub-nav li a  
{  
 color: #999;  
 display: block;  
 padding: 0 7px;  
}  
  
div#nav-area ul.sub-nav li a:hover  
{  
 color: #fff;  
 background: #e6a01c;  
}  
</style>  
</head>  
<body>  
<div>  
 <div id="nav-area">  
  <!-- Liste muss in einer Zeile stehen wg. Internet Explorer -->  
  <ul class="sub-nav"><li><a href="#">item 01</a></li><li><a href="#">item 02</a></li><li><a href="#">item 03</a></li></ul>  
  <img src="" alt="" />  
 </div>  
</div>  
</body>  
</html>

2. Das zweite Problem das ich habe, taucht nur im firefox auf. Und das abhängig vom verwendeten Doctype(Probleme macht nur strict).
Das Problem ist der Abstand zwischen Listenelementen und umgebender Liste. (blau hinterlegt). Könnt ihr mir sagen woran das liegt.

  
<!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" lang="de">  
<head>  
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
 <meta http-equiv="content-language" content="de" />  
 <meta http-equiv="content-style-type" content="text/css" />  
 <style>  
*{border:0px;margin:0px;padding:0px;}  
  
body {  
 font-family: Verdana, Arial, sans-serif;  
 background-color: #ddd;  
 font-size: 1em;  
 }  
  
  
div.nav ul  
{  
 border: solid #0f0;  
 border-width: 1px 0;  
background: blue;  
}  
  
  
div.nav li{  
 display: inline;  
 font-size: 11px;  
 background: red;  
}  
  
div.nav a {  
 margin: 0.2em 0em 0em 0.4em;  
 }  
 </style>  
  
</head>  
<body>  
<div>  
 <div class="nav"><ul><li><a href="#" title="">item01</a></li><li><a href="#" title="">item02</a></li><li><a href="#" title="">item03</a></li></ul></div>  
 </div>  
</body>  
</html>

3.) Eine Frag zu floats. Kennt ihr ein gutes Tutorial etc. um mal ein paar Hintergrundinfos zu float zu bekommen.Ich habe mit floats so meine Probleme. Wenn ich beispielsweise eine Liste, die sich in einem div befindet, floaten lasse; muss ich dann auch immer das div floaten lassen was sich ja dann bis auf die äußerste Box überträgt.

Danke und Viele Grüße
Bene

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Probleme mit Navigationslisten in IE und Firefox

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    Ich möchte das der gesamte Listeneintrag klickbar ist und nicht nur der Textlink. Mit display:block auf den Link kommt der IE aber nicht klar.

    Altbekannt - eigentlich ebenso, wie dass der IE zusätzlich eine width-Angabe für den Link möchte, idR. in solch einem Falle natürlich 100%.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln