SELFHTML Forum
SELFHTML Forumsarchiv
2006
April
 |
SELFHTML Forumsarchiv |
 |
|
 |
|
Die folgende Nachricht zum Thema stammt von: Jon, 30. 04. 2006, 00:38
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
Die folgende Nachricht zum Thema stammt von: Gernot Back, 30. 04. 2006, 09:37
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
Die folgende Nachricht zum Thema stammt von: Jon, 30. 04. 2006, 13:56
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.
Die folgende Nachricht zum Thema stammt von: Gernot Back, 30. 04. 2006, 14:28
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
Die folgende Nachricht zum Thema stammt von: Jon, 30. 04. 2006, 15:10
»» 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
Die folgende Nachricht zum Thema stammt von: schwarze Piste, 30. 04. 2006, 10:25
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
Die folgende Nachricht zum Thema stammt von: Jon, 30. 04. 2006, 13:59
»» Hilft * html ul#MenuList li { height: 1%; }?
Nein, leider, gleiches Verhalten wie vorher :-(
Die folgende Nachricht zum Thema stammt von: Jon, 30. 04. 2006, 14:15
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.
© 1998-2006 
Impressum, Software: Classic Forum
(CSS)