Xibit: Liste im Div element ganz nach links verschieben

SELF-Forum

Liste im Div element ganz nach links verschieben

Xibit
– Informationen zu den Bewertungsregeln

Hallo ich habe da ein Problem und zwar möchte ich 5 listen nebeneinander in einem Absolut positionierten Div Element nach links verschieben.

Doch leider möchte der IE es nicht so wie ich. Im Firefox macht er es so wie ich es auch in der css geschrieben habe doch im IE möchte er die erste liste nicht ganz nach links an den border verschieben. Die Listen habe ich absolut positioniert, da der IE das Div Element nach unten hin vergrößert hat wenn ich die listen relativ positioniert habe obwohl ich eine height von 125px angegeben habe. Hier mal das CSS und Das HTML:

<html>  
<head>  
 <link  
  href="css/template.css"  
  rel="stylesheet" type="text/css"/>  
  
</head>  
<body>  
 <div id="modul2">  
  <div class="erstes_menu">  
    <div class="moduletable">  
     <ul class="menu"><li class="item8"><a href="/joomla/index.php/antiquitaeten-a-kunst"><span>Antiquitäten &amp; Kunst</span></a></li><li class="item9"><a href="/joomla/index.php/audio-a-hi-fi"><span>Audio &amp; Hi-Fi</span></a></li><li class="item10"><a href="/joomla/index.php/auto-a-motorradteile"><span>Auto- &amp; Motorradteile</span></a></li><li class="item11"><a href="/joomla/index.php/baby"><span>Baby</span></a></li><li class="item12"><a href="/joomla/index.php/beauty-a-gesundheit"><span>Beauty &amp; Gesundheit</span></a></li><li class="item13"><a href="/joomla/index.php/briefmarken"><span>Briefmarken</span></a></li><li class="item14"><a href="/joomla/index.php/beauty-a-gesundheit"><span>Beauty &amp; Gesundheit</span></a></li></ul>  </div>  
  
  
  </div>  
  <div class="zweites_menu">  
    <div class="moduletable">  
     <ul class="menu" />  </div>  
  
  </div>  
  <div class="drittes_menu">  
    <div class="moduletable">  
     <ul class="menu" />  </div>  
  
  
  </div>  
  <div class="viertes_menu">  
    <div class="moduletable">  
     <ul class="menu" />  </div>  
  
  </div>  
  <div class="fuenftes_menu">  
    <div class="moduletable">  
     <ul class="menu" />  </div>  
  
  
  </div>  
  
 </div>  
  
  
</body>  
</html>

Und das CSS:

*  {  
 margin: 0px;  
 padding: 0px;  
}  
  
#modul2 {  
 position: absolute;  
 left: 307px;  
 top: 0px;  
 height: 125px;  
 width: 568px;  
 font-size: 11px;  
 border:3px solid;  
 margin: 0px;  
 padding: 0px;  
}  
  
span {  
 margin: 0px;  
 padding: 0px;  
 border: 1px solid red;  
}  
  
.erstes_menu  {  
 position: absolute;  
 top: 5px;  
 left: 0px;  
 margin: 0px;  
 padding: 0px;  
}  
#modul2 .erstes_menu ul {  
 list-style-type: disc;  
 list-style-position: inside;  
 margin: 0px;  
 padding: 0px;  
 float: left;  
 width: 11em;  
}  
  
#modul2 .zweites_menu ul {  
 list-style-type: disc;  
 list-style-position: inside;  
 margin: 0px;  
 padding: 0px;  
 float: left;  
}  
  
#modul2 .drittes_menu ul{  
 list-style-type: disc;  
 list-style-position: inside;  
 margin: 0px;  
 padding: 0px;  
 float: left;  
  
}  
  
#modul2 .viertes_menu ul{  
 list-style-type: disc;  
 list-style-position: inside;  
 margin: 0px;  
 padding: 0px;  
 float: left;  
}  
  
#modul2 .fuenftes_menu ul{  
 list-style-type: disc;  
 list-style-position: inside;  
 margin: 0px;  
 padding: 0px;  
 float: left;  
}  
  
#modul2 li  {  
 margin: 0px;  
 padding: 0px;  
 list-style: none;  
 text-align: left;  
}

Freue mich auf hilfe!

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Liste im Div element ganz nach links verschieben

    Daniel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    [...] doch im IE möchte er die erste liste nicht ganz nach links an den border verschieben.

    Warum es zu den Unterschieden kommt, kann ich dir nicht genau sagen. Eine Stelle finde ich aber seltsam:

    #modul2 .erstes_menu ul {
     list-style-type: disc;
     list-style-position: inside;
     [...]
    }

    [...]

    #modul2 li  {
     [...]
     list-style: none;
     [...]
    }

    Du notierst für die list-items, bzw. für die Listen widersprüchliche Angaben zu list-style. Wenn du der <ul> "list-style:none" zuweist, macht auch der IE keine Probleme (Darstellung wäre dann wie im Firefox). Wenn du die Punkte dageben angezeigt bekommen willst, hilft es vielleicht die list-style-Angaben der <li>s zu entfernen.

    Die Listen habe ich absolut positioniert, da der IE das Div Element nach unten hin vergrößert hat wenn ich die listen relativ positioniert habe

    position:relative dient nur zum Verschieben von Elementen. Der Anker bleibt jedoch erhalten. Von daher wäre relative hier vermutlich ohnehin fehl am Platz.

    obwohl ich eine height von 125px angegeben habe.

    Ja, das ist ein bekannter Bug. Der IE vergrößert Elemente, die overflow:visible sind.

    Hier mal das CSS und Das HTML:

    Wieso steht hier eigentlich kein Doctype?

    <html>  
...

    Mit freundlichen Grüßen

    Daniel Richter

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln