Jump to content

Probleme mit CSS-Ausschnitt


Recommended Posts

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;

Link to post
Share on other sites

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

Link to post
Share on other sites
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



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

Link to post
Share on other sites

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...