CSS RUNDE ECKEN IN INLINE-ELEMENTEN UNMÖGLICH?
Hallo zusammen,
ich kämpfe seit guten 5 Stunden mit einem Problem, ich möchte gerne auf einer meine Projekte die Partnerlinks verschönern und habe mir dafür folgendes Layout vorgestellt:
Ich konnte das fürs Erste auch mit 2 Grafiken die ich per span-Element eingebunden habe lösen, in Safari wurden die Links auch sofort so wie oben abgebildet dargestellt, allerdings fing meine Odyssee an:
1. im aktuellen Firefox ist das a-Element um 2 Pixel verschoben, die scheint am unterschiedlichen Rendering der Schrift zu liegen.
2. im Safari taucht das Problem auf wenn ich die Schriftart um 1 Pixel verkleinere, da es in a- sowie in span-Elementen keine “height” Angabe gibt, kann ich die größe des a-Elements nicht an die Grafiken anpassen die bei 21 Pixel liegt.
Ich kann das ganze jetzt auch nicht in ein Block-Element packen da dieses eine Widht-Angabe benötigt und ich diese nicht so gerne für jedes Element vergeben möchte.
Ich habe nun folgende Zeilen zusammen gebracht funktioniert im Safari & Firefox auch allerdings zeigt der IE nur eine eckige Box mit den Links.
HTML:
HTML-Code:
<span class="abox_left"> </span><span class="abox">
<a href="'.$v['url'].'" target="'.$v['target'].'" title="'.$v['title'].'">'.$v['text'].'</a>
</span><span class="abox_right"> </span>
CSS:
HTML-Code:
.abox {
background: url('../images/abox.png') repeat-x;
padding-top:3px;
padding-bottom:3px;
padding-left:3px;
padding-right:3px;
}
.abox_left {
background: url('../images/abox_left.png') no-repeat;
padding-top:3px;
padding-bottom:3px;
}
.abox_right {
background: url('../images/abox_right.png') no-repeat;
padding-top:3px;
padding-bottom:3px;
}
Ich hoffe es wird deutlich was ich gerne hätte, eventuell hat ja jmd. die Idee für mich ich wäre super dankbar.
Viele Grüße,
Tim