| Autor |
Nachricht |
_Paul_
Threadersteller
Dabei seit: 26.11.2007
Ort: Berlin
Alter: 37
Geschlecht: 
|
Verfasst Do 21.05.2009 18:29
Titel Bilder im A-Element haben trotz border:none einen border |
  |
|
Hallo :)
Folgendes Problem:
| Code: | .content a:hover, .content a:active, .content a:focus {
font-weight: normal;
color: #ff7d00;
border-bottom: 0.0833em solid #ff7d00;
} |
führt dazu, dass alle angegebenen Linkzustände einen Unterstrich haben.
Nun habe ich folgendes danach eingefügt:
| Code: | | .content a img { border: none; } |
und zur Sicherheit auch noch:
| Code: | | .content a:hover img, .content a:active img, .content a:focus img { border: none; } |
Alle Bilder im A-Element müssten nun also in den Zuständen Hover, Active und Focus _KEINEN_ Unterstrich haben.
Betonung auf "müssten". Es klappt nämlich nicht, die Bilder im A-Element haben trotzdem einen Unterstrich.
Wenn ich allerdings text-decoration: underline; an Stelle von border-bottom: 0.0833em solid #ff7d00; verwende, funktioniert es plötzlich.
Hat jemand eine Idee, warum dem so ist? Ich verwende text-decoration: underline; nur ungern, weil es mitten durch die Unterlänge bei Buchstaben schneidet.
Danke,
Paul
Zuletzt bearbeitet von _Paul_ am Do 21.05.2009 18:30, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
therapiekind
Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
|
Verfasst Do 21.05.2009 18:59
Titel
|
|
|
|
Du deklarierst den Rahmen für a und willst ihn dann für img wieder löschen. Klingelt's?
|
|
| |
 |
|
|
Anzeige
|
|
|
_Paul_
Threadersteller
Dabei seit: 26.11.2007
Ort: Berlin
Alter: 37
Geschlecht:
|
Verfasst Do 21.05.2009 19:48
Titel
|
|
|
Japp. ABER: Wieso klappts bei text-decoration? Das Prinzip ist doch dasselbe, oder irre ich mich da?
Zuletzt bearbeitet von _Paul_ am Do 21.05.2009 19:49, insgesamt 1-mal bearbeitet
|
|
| |
|
|
therapiekind
Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
|
Verfasst Do 21.05.2009 20:12
Titel
|
|
|
Kommt auf das Standard-CSS deines Browser an.
Beispiel Firefox:
Alle Bilder innerhalb eines Links haben standardmäßig einen 2-Pixel-Rahmen. Den hattest du durch dein CSS ja weggenommen (.content a img { border: none; }).
Dazu haben alle Links standardmäßig text-decoration: underline. Das hättest du ja dann auch entfernt.
Damit wären alle Rahmen bzw. Textdekorationen entfernt.
Du hast jetzt den Links aber wieder einen Rahmen gegeben und ihn nirgends entfernt. Du hast ihn zwar für die Bilder entfernt, aber nicht für den Link an sich.
Hoffe, das war einigermaßen verständlich erklärt. 
|
|
| |
|
|
_Paul_
Threadersteller
Dabei seit: 26.11.2007
Ort: Berlin
Alter: 37
Geschlecht:
|
Verfasst Do 21.05.2009 20:50
Titel
|
|
|
Das Browser-CSS ist per CSS-Reset überschrieben, außerdem habe ich zu Beginn meines CSS´ border und text-decoration per Universal-Selektor auf 0 bzw. none gesetzt.
Ich verstehe ja was du meintest und verstehe auch die Logik.
| Zitat: |
Du hast jetzt den Links aber wieder einen Rahmen gegeben und ihn nirgends entfernt. Du hast ihn zwar für die Bilder entfernt, aber nicht für den Link an sich. |
Genau, das erklärt wieso die <a><img /></a> einen Border haben. Ist ja auch richtig.
Aber: Wenn ich den Links ein text-decoration: underline gebe und danach folgendes schreibe:
| Code: | | .content a img { text-decoration: none; } |
, haben die <a><img /></a> keine text-decoration mehr. Obwohl ich die doch eigentlich nur für die Bilder und nicht für die Links entferne.
Verstehst du, worauf ich hinaus will?
Ich bin etwas verwirrt von dieser ganzen Angelegenheit.
Zuletzt bearbeitet von _Paul_ am Do 21.05.2009 20:51, insgesamt 1-mal bearbeitet
|
|
| |
|
|
therapiekind
Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
|
Verfasst Do 21.05.2009 23:37
Titel
|
|
|
Ah, hat geklingelt. 
Das liegt daran, dass text-decoration nur auf Text angewendet wird. Da ein Bild allein in einem Link keinen Text darstellt, wird text-decoration gar nicht erst angewandt.
Um mal wieder den Paragraphenreiter zu spielen, siehe hier: http://www.w3.org/TR/CSS2/text.html#decoration
| Zitat: | | Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing): margins, borders, and padding are skipped. If an element contains no text, user agents must refrain from rendering these text decorations on the element. For example, images will not be underlined. |
Grob übersetzt:
Unter-, Über und Durchstreichen werden nur auf Text angewandt (inkl. Weißraum, Buchstabenabstand und Wortabstand). Außenabstände, Rahmen und Innenabstände werden ausgelassen. Wenn ein Element keinen Text enthält, sollen User Agents diese Textdekorationen für dieses Element nicht zeichnen. Zum Beispiel wird ein Bild nicht unterstrichen.
Wie das dann jeder Browser bei Text und Bild in einem Link umsetzt, ist mal wieder unterschiedlich. Umsetzen tun es alle im Grunde korrekt, nur Firefox z.B. unterstreicht dann auch das Bild während Internet Explorer oder Opera den Text aber das Bild nicht unterstreichen.
|
|
| |
|
|
_Paul_
Threadersteller
Dabei seit: 26.11.2007
Ort: Berlin
Alter: 37
Geschlecht:
|
Verfasst Fr 22.05.2009 08:01
Titel
|
|
|
Ahhhh, alles klar. Dankeschön! Auch für die Paragraphenreiterei, beim nächsten Mal werd ich mir zuerst die W3C-Spezifikation zum Element/ zur Eigenschaft durchlesen :)
Den Border für den entsprechenden Link auszustellen geht dann nur mittels einer Link-Klasse, oder?
|
|
| |
|
|
therapiekind
Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
|
Verfasst Fr 22.05.2009 19:26
Titel
|
|
|
| _Paul_ hat geschrieben: | | Den Border für den entsprechenden Link auszustellen geht dann nur mittels einer Link-Klasse, oder? |
Genau. Gibt leider (noch) keinen CSS-Selektor, der ein Element abhängig von seinen Kindelementen auswählt.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
CSS Bildlink: ohne border - hover: mit border
img {border: 0;} oder img {border: none;}
CSS BG-IMG über Border
#CSS { border: problem; }
Border für Image
INLINE BORDER CSS
|
|
Willkommen auf dem Portal für Mediengestalter
