ich steh grad vor einem HTML/CSS Problem und komme nicht weiter. Entweder ist das ein mieser Bug oder 3 Wochen Urlaub waren doch zulange.
Bestimmte Links werden in meinem Projekt mit einem Pfeil-Icon dargestellt. Soweit stellt dies kein Problem dar. Das Anchor-Tag wurde mit einem Backgroundimage und einem Padding versorgt und alles ist hübsch. Nun kommen aber meine Freunde, die Internet Explorer und ignorieren dieses Padding wenn vorher ein Bild kommt.
Der HTML Teil sieht so aus:
- Code: Alles auswählen
<img width="530" height="173" alt="dialog" src="x.jpg" class="fleft fsPreview_default ">
<p>
<a class="fileinfo" alt="JPG, 2,2" href="x.JPG">
<acronym title="Joint Photographic Experts Group" xml:lang="en">JPG</acronym>, 2,2 <acronym title="Megabyte" xml:lang="en">MB</acronym>
</a>
</p>
Das zugehörige CSS so:
- Code: Alles auswählen
a.fileinfo, a.fileinfo:link { background: url($CMS_REF(media:"icons_sprites")$) no-repeat scroll 2px -4996px transparent; display: inline; padding-left: 10px; _height: 1%; }
.service a.fileinfo, .service a.fileinfo:link { background-position: 2px -4997px; }
Das Ergebnis könnt ihr im Anhang bewundern.
Ich denke das es irgendwie mit dem "display:inline" zusammenhängt. Wenn ich ein "display:inline-block" benutze sieht es okay aus. Allerdings kann das der IE6&7 nicht verarbeiten.
Wenn ich mir die Styles im IE Developer ansehe wird alles korrekt rausgeschrieben.
Hat von euch jemand nen heißen Tipp?
gruß|wusa