content: url für Firefox und Internet Explorer

Donaldi · #1 (**permalink**) 21.08.2015, 12:37

Ich habe folgenden CSS, der in Chrome, Opera, Vivaldi funktioniert. Nur Firefox und der Internet-Explorer scheren sich nicht darum. Es passiert nichts, beide behalten den Ursprünglichen Inhalt des Bildes.

Ich stecke fest und komme nicht mehr weiter. Vielleicht kann mir jemand da bitte auf die Sprünge helfen, wo vielleicht das Problem liegt?

Vorweg: DOC-Type ist angegeben.

Code:

/* Logo auf 1200px setzten */
.logo::before {
    width:1200px;
    height:109px;
    content: url(img/mobile_tablet_und_pc_1200x109px.png);
}
.logo {
    width:1200px;
    height:109px;
    content: url(img/mobile_tablet_und_pc_1200x109px.png);
}
.logo::after {
    width:1200px;
    height:109px;
    content: url(img/mobile_tablet_und_pc_1200x109px.png);
}

MrMurphy · #2 (**permalink**) 21.08.2015, 12:46

Hallo

ist hier

Code:

.logo {
    width:1200px;
    height:109px;
    content: url(img/mobile_tablet_und_pc_1200x109px.png);
}

content überhaupt zulässig? Hast du es mal mit background-image probiert?

Zudem ist die Angabe

Zitat:

der in Chrome, Opera, Vivaldi funktioniert. Nur Firefox und der Internet-Explorer scheren sich nicht darum

nichtssagend. Was willst du denn überhaupt erreichen? Vielleicht gehst du dein Problem ganz falsch an.

Gruss

MrMurphy

Donaldi · #3 (**permalink**) 21.08.2015, 14:55

Der von Dir erwähnte Code-Schnipsel funktioniert schon und ist (vermutlich) daher auch zulässig. Jedenfalls habe ich ohne die beiden Zusätze ::before und ::after in Chrome, Opera, Vivaldi und Safari kein Problem. Wenn ich diesen einen Code-Schnipsel weglasse, passiert auch in den besagten vier nichts mehr.

Background hilft mir, soweit ich es weiß, an dieser Stelle nicht weiter, da das Logo auch mit einem Link hinterlegt ist und schon so im Template vorgegeben wird (ein erworbenes Template von PrestaShop). Es handelt sich bei dem Bild um ein Banner, das über die ganze Seite geht und je nach Bildschirmgröße über CSS verändert wird. Es gibt also u.a. ein Banner mit 1200 x 109px, mit 728 x 109px, mit 440 x 109px usw.. Das ist natürlich notwendig, damit es keine Verzerrungen bei den Darstellungen auf einem PC / Tablet / Handy gibt.

Diese werden über z.B. "@media only screen and (min-width: 1200px)" entsprechend abgefragt und dort sind dann auch die entsprechenden Positionen der einzelnen Blöcke hinterlegt. Dies allles funktioniert auch prima in allen Browsern, eben bis auf den Austausch des content: url im IE und FF.

Selbst wenn ich nun den CSS validiere, kommt an diesen Postionen keine Fehler- und keine Warnmeldung. Es gibt 81 Fehlermeldungen, die aber - wie gesagt - nichts damit zu tun haben und 830 Warnungen. Letztere sind ausschließlich "Die Eigenschaft -moz-... ist eine unbekannte Erweiterung des Herstellers."

Lt. Dokumentation soll es doch aber eben mit ::before / ::after grundsätzlich funktionieren, doch das tut es, aus welchem Grund auch immer, leider nicht mal bei einem einfachen "Hello World"-Test.

Also vermute ich, dass der Syntax, so wie ich ihn aus der Dokumentation verstanden habe, eben nicht so aufgebaut wird.

andir · #4 (**permalink**) 21.08.2015, 23:34

Um mal das einfachste auszuschließen: Die url/uri ist im Original schon geändert? Das ergibt sich aus deinem Beispiel nicht.

content sollte nicht ohne pseudo-Elemente funktionieren wie MrMurphy schon sagte. Wenn es doch funktioniert, dann ist es möglicherweise ein Rest einer uralten Draft-Interpretation aus grauen Vorzeiten.

CSS-Validation hilft hier nicht weiter, das prüft nur die Syntax und nicht Sinnzusammenhänge. Du bekommst auch

Code:

a {
margin-left: 5px;
}

validiert obwohl a kein Blockelement ist (von Haus aus) und derartige margin-Angaben ohne display: block sinnlos sind.

Ohne konkreteren Code wird es freilich schwierig. Könntest Du noch genauer erklären wie das template tauscht?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Validator verbietet Attribut bei Link - Hilfe! ;)	bastkrug	(X)HTML	7	20.02.2014 12:28
Unterschiedliche Darstellung in Firefox / IE	memphis2k	CSS	16	30.08.2011 17:40
Seite links ausrichten	like.no.other	CSS	10	26.01.2011 01:10
Darstellungsprobleme im IE	lea11011989	CSS	17	05.11.2010 09:44
Firefox macht alles falscher als der Internet Explorer	Arnold	CSS	2	24.08.2004 12:54