✔ IE Problem mit ul und Inhalt

[Binio]

Hallo ich versuche gerade eine Navigation mit Listenelementen zu erstellen.

#navi {
position:absolute;
top:240px;
left:60px;
width:200px;
height:500px;
text-align:left;
background-color:#FF9900;
}

#home {
position:relative;
top:0px;
background-color:#0000FF;
}

#dienstleistungen_1 {
position:relative;
top:35px;
background-color:#0000FF;
}

#dienstleistungen_2 {
position:relative;
top:40px;
background-color:#FF0000;
}

#sonstiges {
position:relative;
top:75px;
background-color:#FF0000;
}

#navi ul{
position:relative;
margin:0px;
padding:0px;
list-style: none;
}

#navi img{
position:relative;
margin:0px;
padding:0px;
height:28px;
}

#navi li{
list-style: none;
position:relative;
margin:0px;
padding:0px;
text-align:left;
display: block;
height:28px;
}

#navi li a{
position:relative;
left:5px;
bottom:12px;
margin:0px;
padding:0px;
text-decoration:none;
color:black;
background-color:#00FF00
}

#navi li a:hover{
position:relative;
text-decoration:underline;
color:black;
}

und

<div id='navi'>
                <ul id='home'>
                    <li style='background-color:red'><img src='bilder/box.jpg' border='0' /><a style='background-color:#aa0011;' href='?bereich=startseite' onmouseover='big("bilder/big_pic/server.jpg")'>Startseite</a></li>
                    <li style='background-color:#aa33FF'><img src='bilder/box.jpg' /><a href='?bereich=wir_ueber_uns' onmouseover='big("bilder/big_pic/server.jpg")'>Wir &uuml;ber uns</a></li>
                    <li><img src='bilder/box_bottom.jpg' /><a href='?bereich=login' onmouseover='big("bilder/big_pic/server.jpg")'>Login</a></li>
                </ul>
                <ul  id='dienstleistungen_1'>
                    <li><img src='bilder/box.jpg' /><a href='?bereich=netzwerk' onmouseover='big("bilder/big_pic/netzwerk.jpg")'>Netzwerk</a></li>
                    <li><img src='bilder/box.jpg' /><a href='?bereich=server' onmouseover='big("bilder/big_pic/server.jpg")'>Server</a></li>
                    <li><img src='bilder/box.jpg' /><a href='?bereich=webdesign' onmouseover='big("bilder/big_pic/webdesign.jpg")'>Webdesign</a></li>
                    <li><img src='bilder/box.jpg' /><a href='?bereich=programmierung' onmouseover='big("bilder/big_pic/programmierung.jpg")'>Programmierung</a></li>
                    <li><img src='bilder/box.jpg' /><a href='?bereich=datenbanken' onmouseover='big("bilder/big_pic/datenbanken.jpg")'>Datenbanken</a></li>
                    <li><img src='bilder/box.jpg' /><a href='?bereich=pc_service' onmouseover='big("bilder/big_pic/pc_service.jpg")'>PC-Service</a></li>
                    <li><img src='bilder/box.jpg' /><a href='?bereich=backup' onmouseover='big("bilder/big_pic/backup.jpg")'>Backup</a></li>
                    <li><img src='bilder/box_bottom.jpg' /><a href='?bereich=schulung' onmouseover='big("bilder/big_pic/schulung.jpg")'>Schulung</a></li>
                </ul>
                <ul  id='dienstleistungen_2'>
                    <li><img src='bilder/box.jpg' /><a href='?bereich=computer_vision' onmouseover='big("bilder/big_pic/server.jpg")'>Computer Vision</a></li>
                    <li><img src='bilder/box_bottom.jpg' /><a href='?bereich=automatisierung' onmouseover='big("bilder/big_pic/server.jpg")'>Automatisierung</a></li>
                </ul>
                <ul  id='sonstiges'>
                    <li><img src='bilder/box.jpg' /><a href='?bereich=kontakt' onmouseover='big("bilder/big_pic/server.jpg")'>Kontakt</a></li>
                    <li><img src='bilder/box.jpg' /><a href='?bereich=impressum' onmouseover='big("bilder/big_pic/server.jpg")'>Impressum</a></li>
                    <li><img src='bilder/box_bottom.jpg' /><a href='?bereich=referenzen' onmouseover='big("bilder/big_pic/server.jpg")'>Referenzen</a></li>
                </ul>
            </div>

ich habe mal extra alles bunt gemacht damit man sieht wo was problem ist.
der Ie mach zwischen die LI-Einträge ein Leerraum. Es ist wichtig das die Grafiken alle hintereinander kommen. Da darf kein Leerraum sein!

Woran liegt das ? Firefox und Opera machen alles super.

Danke im vorraus...

 

[MsvP@habdichliebhasi]

Bei den li-Elementen:
Versuche mal margin und padding auf 0 zu setzen.
Wenn das nicht hilft evtl auch mal line-height und font-size auf 0 runter. Der IE 6 rechnet da leider immer eine gewisse Grundhöhe aus diesen Werten heraus.

Alternativ könntest du auch versuchen den Whitespace zwischen den <li> Elementen zu entfernen. Dh. alles hintereinander schreiben.

 

[Binio]

hat leider nicht geklappt mit den oberen sachen das mit den padding mache ich ja schon
wie meinst du das mit den Whitespace ?

 

[Binio]

ich habs hinbekommen.
war das IMG das fehlte das float:left;

@charset "utf-8";
/* CSS Document */

body {
font-family:"Times New Roman", Times, serif;
font-size:17px;
margin:0px;
padding:0px;
}

#seite {
position:relative;
margin:0 auto;
width:1024px;
height:768px;
border:0px solid black;
}

#big_pic{
position:absolute;
top:51px;
right:27px;
width:477px;
height:107px;
}

#titel{
position:absolute;
top:230px;
right:35px;
width:300px;
height:40px;
background-color:white;

font-size:35px;
text-align:right;
}

#navi {
position:absolute;
top:240px;
left:60px;
width:200px;
height:500px;
text-align:left;

}

#home {
position:relative;
top:0px;

}

#dienstleistungen_1 {
position:relative;
top:35px;

}

#dienstleistungen_2 {
position:relative;
top:40px;

}

#sonstiges {
position:relative;
top:75px;

}

#navi ul{
position:relative;
margin:0px;
padding:0px;
list-style: none;
}

#navi img{
float:left;
position:relative;
margin:0px;
padding:0px;
height:28px;
}

#navi li{
list-style: none;
position:relative;
margin:0px;
padding:0px;
text-align:left;
display: block;
height:28px;
}

#navi li a{
position:relative;
left:5px;
bottom:0px;
margin:0px;
padding:0px;
text-decoration:none;
color:black;

}

#navi li a:hover{
position:relative;
text-decoration:underline;
color:black;
}

#main {
position:absolute;
top:310px;
left:290px;
overflow:auto;
width:620px;
height:400px;
background-color:white;
}

#referenzen img{
width:200px;
border:1px solid black;
}

#referenzen{
font-size:30px;
}

#referenzen li{
font-size:16px;
}