Neuigkeiten:

still alive...

Hauptmenü

Probleme mit CSS-Ausschnitt

Begonnen von alexs, 30. April 2005, 22:46:34

Vorheriges Thema - Nächstes Thema

alexs

Hallo,
habe seit kurzem folgenden CSS-Ausschnitt in meine CSS-Datei eingebaut. Sinn ist es, das das Bild pic.gif jeweils vor jedem Link mit einem Abstand von 16px zum eigentlichen Linktext angezeigt wird. Das klappt auch alles, nur habe ich mir das letztens mal im IE 5.0 angeschaut, und da ist ein Problem: Das Bild hängt praktisch über dem Linktext, d.h. die 16px Abstand sind einfach verschwunden. Bisher existiert das Problem nur im IE 5.0. Kann mir villeicht jemand helfen, dass Problem zu beheben?
Danke & Greetz JoKo
 

a {
padding-left:      16px;
padding-top: 0px;
background-image:   url(bilder/pic.gif);
background-position:   top left;
background-repeat:   no-repeat;

d-day

soweit ich weiss ist das padding nicht wirksam für den hintergrund.
probier mal, das padding weg zu lassen und stattdessen

background-position:16px 50%;

 
also 16px von links horizontal und 50%, also mittig vertikal.
Gruß,
D-Day
http://www.couro.de\" rel=\"external nofollow\">Couro do Brasil

alexs


Original von D-Day soweit ich weiss ist das padding nicht wirksam für den hintergrund.
probier mal, das padding weg zu lassen und stattdessen

background-position:16px 50%;

 
also 16px von links horizontal und 50%, also mittig vertikal.
Gruß,
D-Day
[/quote]
Mmhh, also wenn ich das padding lösche und deinen Code eingebe, wird (zumindest im IE 6.0) zwar alles um 16px verschoben, aber das Pic eben auch, sodass es trotzdem über der Linkschrift auftaucht. Genau das gleiche Problem habe ich wie gesagt im IE 5.0 (wohl nur da) auch mit dem alten Code (s. erstes Posting), nur das dort die 16px Verschiebung auch fehlen. Ich denke, der IE 5.0 erkennt den padding Befehl einfach nicht. Gibt\'s da vllt noch ne andere Alternatife oder hat jemand noch eine andere Idee?
Greetz JoKo

d-day

hmm... ich hatte auch wohl etwas falsch verstanden, was Du tun möchtest.
richtig hätte es wohl heissen müssen:


a {
padding-left:        16px;
padding-top: 0px;
background-image:    url(bilder/pic.gif);
background-position:0px 50%;
background-repeat:    no-repeat;

 
wenn das allerdings im IE5 nicht funzt, nimm einfach das UL und LI Element und tausch die Listengrafik (der Punkt davor) aus gegen ne eigene. Dann sollten die sich nicht mehr überschneiden können.
also

 
 ziel1
 ziel2
 ziel3

 
wobei Du den Style natürlich mit ner eigenen Klasse ins Stylesheet packst, um es sauberer zu halten.
genau 16px bekommst Du damit natürlich nicht hin. Dafür solltenst Du dann wieder padding UND margin nehmen.
Beides, da bei Listenelementen IE und Opera auf margin-left reagieren, während Netscape / Mozilla auf padding-left reagieren.
Gruß,
D-Day
http://www.couro.de\" rel=\"external nofollow\">Couro do Brasil

all your base are belong to us / Discord