mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 08.12.2019 06:24 Benutzername: Passwort: Auto-Login

Thema: Bilder im A-Element haben trotz border:none einen border vom 21.05.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Bilder im A-Element haben trotz border:none einen border
Autor Nachricht
_Paul_
Threadersteller

Dabei seit: 26.11.2007
Ort: Berlin
Alter: 32
Geschlecht: Männlich
Verfasst Do 21.05.2009 17:29
Titel

Bilder im A-Element haben trotz border:none einen border

Antworten mit Zitat Zum Seitenanfang

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 17:30, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
therapiekind

Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
Verfasst Do 21.05.2009 17:59
Titel

Antworten mit Zitat Zum Seitenanfang

Du deklarierst den Rahmen für a und willst ihn dann für img wieder löschen. Klingelt's?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
_Paul_
Threadersteller

Dabei seit: 26.11.2007
Ort: Berlin
Alter: 32
Geschlecht: Männlich
Verfasst Do 21.05.2009 18:48
Titel

Antworten mit Zitat Zum Seitenanfang

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 18:49, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
therapiekind

Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
Verfasst Do 21.05.2009 19:12
Titel

Antworten mit Zitat Zum Seitenanfang

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. * Keine Ahnung... *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
_Paul_
Threadersteller

Dabei seit: 26.11.2007
Ort: Berlin
Alter: 32
Geschlecht: Männlich
Verfasst Do 21.05.2009 19:50
Titel

Antworten mit Zitat Zum Seitenanfang

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 19:51, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
therapiekind

Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
Verfasst Do 21.05.2009 22:37
Titel

Antworten mit Zitat Zum Seitenanfang

Ah, hat geklingelt. *bäh*

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
_Paul_
Threadersteller

Dabei seit: 26.11.2007
Ort: Berlin
Alter: 32
Geschlecht: Männlich
Verfasst Fr 22.05.2009 07:01
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
therapiekind

Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
Verfasst Fr 22.05.2009 18:26
Titel

Antworten mit Zitat Zum Seitenanfang

_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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen img {border: 0;} oder img {border: none;}
CSS Bildlink: ohne border - hover: mit border
Border für Image
Anordung der border falsch
#CSS { border: problem; }
INLINE BORDER CSS
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.