nicht angemeldet
IE5.0 ignoriert padding-left
Hallo,
Ich möchte eine Liste für die Navigation mit Hintergrundbildern als Listzeichen machen, siehe http://css.maxdesign.com.au/listamatic/vertical14.htm.
#navcontainer1 ul li a
{
background: transparent url(list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
text-decoration: none;
color: #202020;
}
Laut Browser-Kompatibilitätsliste http://css.maxdesign.com.au/listamatic/browser-support.htm sollte das auch für IE5.0 funktionieren. Leider ignoriert der das padding-left und das Bild liegt unter dem Linktext.
Gibt es hierfür eine Lösung?
Unter http://www.swolfgang.de/test/ gibts meine Umsetzung zu sehen, bei der noch ein anderer Effekt auftritt: bei Opera und Mozilla wird unter der Fußzeile des Mittelteils ein weißer Bereich angezeigt. IE zeigt ihn erst, wenn man über den untersten Link (Kurzinfo...) fährt. Weiß dazu jemand näheres? Trit das auch bei anderen IE-Versionen als 5.0 auf?
Grüße
Marcus
-
Hallo Marcus,
Ich möchte eine Liste für die Navigation mit Hintergrundbildern als Listzeichen machen, siehe http://css.maxdesign.com.au/listamatic/vertical14.htm.
das ist gerade im IE ein, wie ich finde, sehr 'nerviger' Effekt, da der IE die entsprechenden Grafiken ständig neu lädt (anstatt sie aus dem Cache zu holen).
Alternativ kann man das Ganze auch 'eleganter' lösen, nämlich mit einer Hintergrundgrafik, die ihre Position (bei hover und/ oder activ) ändert.
Beispiel: http://www.alistapart.com/articles/slidingdoors2/
Unter http://www.swolfgang.de/test/ gibts meine Umsetzung zu sehen, bei der noch ein anderer Effekt auftritt: bei Opera und Mozilla wird unter der Fußzeile des Mittelteils ein weißer Bereich angezeigt. IE zeigt ihn erst, wenn man über den untersten Link (Kurzinfo...) fährt. Weiß dazu jemand näheres? Trit das auch bei anderen IE-Versionen als 5.0 auf?
In meinem IE 6 sieht soweit alles ganz OK aus, ausser das zweite Listbullet unter Aktuell (sieht aus wie ein tiefgestelltes '=').
Sorry, dass ich dir ansonsten nicht weiterhelfen kann.
Grüße
MarcusGruß zurück
Gunther-
Hallo,
das ist gerade im IE ein, wie ich finde, sehr 'nerviger' Effekt, da der IE die entsprechenden Grafiken ständig neu lädt (anstatt sie aus dem Cache zu holen).
Jetzt wo du es sagst fällt es mir auch auf. Im Gegensatz zur Darstellung in einem richtigen Browser erscheint beim IE jedesmal kurz eine Sanduhr wenn man von Link zu Link wechselt.
Alternativ kann man das Ganze auch 'eleganter' lösen, nämlich mit einer Hintergrundgrafik, die ihre Position (bei hover und/ oder activ) ändert.
Beispiel: http://www.alistapart.com/articles/slidingdoors2/Was aber das Problem mit padding-left nicht löst.
Sorry, dass ich dir ansonsten nicht weiterhelfen kann.
Nun ja, wenn ich weiß, dass es keine Lösung gibt kann ich ja auch nach einem anderen Design der Links suchen. Ich habe ja keinerlei Vorgaben.
Grüße
Marcus
-
-
Ich möchte eine Liste für die Navigation mit Hintergrundbildern als Listzeichen machen, siehe http://css.maxdesign.com.au/listamatic/vertical14.htm.
#navcontainer1 ul li a {padding-left: 15px;}
Leider ignoriert der das padding-left und das Bild liegt unter dem Linktext.MSIE 5.x ignoriert padding bei Inline-Elementen. Es wird so also nicht funktionieren. Eine Umformatierung der Links zu display:block brächte wieder andere Schwierigkeiten (width:99%; löst da bspw. ein gängiges Problem im MSIE 5.x, siehe auch die anderen Listamatic-Listen, die wirklich im MSIE 5.x funktionieren, z.B. Ingo Turskis sowei ich mich erinnere).
Unter http://www.swolfgang.de/test/ gibts meine Umsetzung zu sehen, bei der noch ein anderer Effekt auftritt: bei Opera und Mozilla wird unter der Fußzeile des Mittelteils ein weißer Bereich angezeigt. IE zeigt ihn erst, wenn man über den untersten Link (Kurzinfo...) fährt. Weiß dazu jemand näheres? Trit das auch bei anderen IE-Versionen als 5.0 auf?
Der weiße Bereich liegt an margin: 0 0 10px 0; für .navcontainer4 ul li a. Im MSIE 6 ist er immer zu sehen. Mit margin:0; verschwindet er.
-
Hallo,
MSIE 5.x ignoriert padding bei Inline-Elementen. Es wird so also nicht funktionieren. Eine Umformatierung der Links zu display:block brächte wieder andere Schwierigkeiten (width:99%; löst da bspw. ein gängiges Problem im MSIE 5.x, siehe auch die anderen Listamatic-Listen, die wirklich im MSIE 5.x funktionieren, z.B. Ingo Turskis sowei ich mich erinnere).
Das hilft schon mal weiter. Die Navigationslinks rechts und links kann ich mit display:block und width:99% machen ohne dass sich in den anderen Browsern was ändert.
Die Links im mittleren Teil erhalten für den erklärenden Text ein <span>, da bei display:block für #navcontainer3 ul li a der Text in die nächste Zeile wandert.Jetzt muss ich nur noch den Abschluß der Seite ändern, da IE keinen negativen Einzug (margin: 25px 15px 0 -11px;) mag und ich deswegen dem Hintergrundbild links keinen Schatten zuordnen kann.
Grüße
Marcus-
Hallo,
MSIE 5.x ignoriert padding bei Inline-Elementen.
Das hilft schon mal weiter. Die Navigationslinks rechts und links kann ich mit display:block und width:99%
Es würde aber auch reichen, wenn du height für diese Elemente vergibst.
IE 5.x 5.x ignoriert padding bei Inline-Elementen nur dann nicht, wenn diese Angaben zu width und/oder height haben.Grüße
Thomas-
Hallo,
Es würde aber auch reichen, wenn du height für diese Elemente vergibst.
IE 5.x 5.x ignoriert padding bei Inline-Elementen nur dann nicht, wenn diese Angaben zu width und/oder height haben.Danke für den Tipp, aber dann gibt es vielleicht Probleme, wenn der Link etwas länger ist und einen Zeilenumbruch enthält
Grüße
Marcus-
Hallo,
Danke für den Tipp, aber dann gibt es vielleicht Probleme, wenn der Link etwas länger ist und einen Zeilenumbruch enthält
Mag sein, aber deshalb gibt es eben einen Unterschied zwischen inline- und blocklevel Elementen und deshalb sollte man sich wirklich gut überlegen, wenn man ein inline Element mit dispaly:block; ausstattet. ;-)
Grüße
Thomas
-
-
-
-