nicht angemeldet
Menü mit UL und images: horizontaler Abstand passt im IE nicht
0 
Gernot Back
0
0 0
Menü mit UL und images: horizontaler Abstand passt im IE nicht
Hallo,
ich wollte ein kleines Menü mit CSS realisieren. Sieht etwa so aus:
<ul id="MenuList">
<li>
<a href="default.aspx?cid=1">
<img src="images/menue/1.jpg" alt="Menu"/>
</a>
</li>
[...]
</ul>
Und von diesen Li-Elementen noch andere 15 mehr. Das CSS dazu sieht folgend aus:
ul#MenuList
{
float:left;
padding-left:300px;
padding-top:49px;
padding-right:0;
padding-bottom:0;
margin:0 0 0 0;
list-style:none;
}
ul#MenuList li
{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:none;
}
ul#MenuList a
{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:none;
}
ul#MenuList img
{
border:none;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
Das Problem: im IE (und im Firefox, aber nicht im Opera) entsteht hier ein Abstand von einigen Pixeln unter jedem Menüpunkt. Es sollte aber überhaupt kein Abstand dazwischen sein.
Für Firefox bringt es Abhilfe, wenn ich im CSS für img noch:
display:block;
hinzufüge. Im Opera passt es dann weiterhin. Im IE jedoch entsteht dann ein Abstand von 50 Pixeln zwischen den Elementen :-O ...
Das sieht natürlich katastrophal aus.
Was mache ich hier falsch? Bzw. handelt es sich um einen IE-Bug? Und wenn ja, welchen?
Danke & lg
Jon
-
Hallo Jon,
Für Firefox bringt es Abhilfe, wenn ich im CSS für img noch:
display:block;
hinzufüge. Im Opera passt es dann weiterhin. Im IE jedoch entsteht dann ein Abstand von 50 Pixeln zwischen den Elementen :-O ...
Was ist, wenn du den Bildern und/oder ihren Mutter-A-Elementen float:left verpasst?
Gruß Gernot
-
Hallo Gernot,
Was ist, wenn du den Bildern und/oder ihren Mutter-A-Elementen float:left verpasst?
das führt dann leider zum endgültigen Chaos, der IE verteilt dann die Menüpunkte horizontal und da auch wieder mit 50 px Abstand fröhlich über die ganze Seite :-(
lg
b.-
Hallo Jon,
das führt dann leider zum endgültigen Chaos, der IE verteilt dann die Menüpunkte horizontal und da auch wieder mit 50 px Abstand fröhlich über die ganze Seite :-(
Dann hast du bestimmt nur vergessen, hie und da auch mal ein clear zu verwenden oder deiner Liste und ihren LI-Elementen eine passende Weite zu verpassen, sodass nur jeweils ein List-Item von der Breite her in die Liste passt.
Gruß Gernot
-
Dann hast du bestimmt nur vergessen, hie und da auch mal ein clear zu verwenden oder deiner Liste und ihren LI-Elementen eine passende Weite zu verpassen, sodass nur jeweils ein List-Item von der Breite her in die Liste passt.
Hallo Gernot!
Weite habe ich für die Liste keine definiert, das stimmt. Könnte ich auch noch versuchen.
Ich habs jetzt vorerst mal so gelöst:
* html ul#MenuList img
{
border:none;
padding:0 0 0 0;
margin:0 0 -4px 0;
}Also speziell für den IE -4px beim bottom-padding definiert. So siehts nun auch im IE aus wie es soll (im FF + Opera auch).
Danke in jedem Fall & lg
Jon
-
-
-
-
Tachchen!
Hilft * html ul#MenuList li { height: 1%; }?
Gruß
Die schwarze Piste
--
ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
Smartbytes Webdesign in Oberhausen-
Hilft * html ul#MenuList li { height: 1%; }?
Nein, leider, gleiches Verhalten wie vorher :-(
-
-
Hm, folgender Workaround hat jetzt geholfen:
* html ul#MenuList img
{
border:none;
border-spacing:0px;
padding:0 0 0 0;
margin:0 0 -4px 0;
}Ich habe also den Margin für das img-Tag nur für den IE um -4px verringert, dann passt das Layout auch im IE.
Etwas seltsam ...
danke & lg
j.