Xibit: Liste im Div element ganz nach links verschieben

Beitrag lesen

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