Nur noch Ärger mit Firefox

Druckbare Version

26.01.2013, 11:35
pumukel

Nur noch Ärger mit Firefox

Gute Tag

Was ist eigentlich mit Firefox los? FF ab Version 17 bis 18.0.1 unsterstütz border-image nicht mehr (mit und/oder ohne moz-präfix). Dies funktionierte schon ab Version 3.6.x (habe ich soeben noch getestet!)
Beim Webdeveloper funktioniert lokales HTML validieren auch nicht mehr. Bei FF 17.0.1 ging dies noch. Ich habe FF 18.0.1 komplett deinstalliert und neu installiert, vorher noch sämtlichen Müll entfernt. Erweirtungen nur Firebug und Web Developer installiert. FF geht einem langsam aber sicher auf den Keks. Seit einiger Zeit nur noch Ärger mit diesem sog. Top Browser ob mit Erweiterungen oder auch Themes.
Gruss pumukel
26.01.2013, 13:13
lucina

border-image funktioniert bei mir (Win 7/64, Win 8/4, OSX 10.7, OSX 10.8) mit Firefox 18.01 tadellos. Es gibt auch einen Generator dazu, den man als Testseite missbrauchen kann.

In der Spezifikation habe ich allerdings den folgenden Satz gefunden, von dem ich denke, dass er für Dein Problem verantworlich sein könnte:

Zitat:

It is recommended that UAs do not apply border images to tables with collapsed borders until then.

Mozilla selbst schreibt dazu:

Zitat:

Applies to all elements, except table elements when border-collapse is collapse

Mithin verhält sich Firefox ganz im Sinne der Vorgaben.

Passt das zu Deinem Problem?

Zu Problem Nummer zwei kann ich nichts sagen, ich arbeite nicht lokal.
26.01.2013, 15:44
pumukel

Hallo Lucina
Vielen Dank für Deinen Hinweis. Die Beispiele entstammen dem Buch CSS3 Leitfaden für Webdesigner von Florence Maurice/Addison Wesley.
Gruss pumukel
26.01.2013, 15:55
plastiko

Das mit dem Web Developer ist bei mir auch so.

ff 18.0.1 mac
Web Developer 1.2.2
26.01.2013, 16:44
lucina

Zitat:

Vielen Dank für Deinen Hinweis. Die Beispiele entstammen dem Buch CSS3 Leitfaden für Webdesigner von Florence Maurice/Addison Wesley.

Wie schnell dich immer die Zeit vergeht ... das Buch ist im Juni 2011 erschienen, die letzte Überarbeitung der Spec von Juli 2012, und jetzt haben wir 2013.

Beim validieren geht's auch Chrome nicht anders, denn der W3C-Validator die Validierung mit dem file://-Protokoll (als lokal vorliegende Datei) nicht unterstützt.

Zitat:

Remember that you can always save the page to disk and Validate it using the File Upload interface.

Damit wir uns nicht falsch verstehen: ich finde auch, dass bei Mozilla nicht alles gut läuft. Aber Firefox ist Firefox, Chris Pederick ist Chris Pederick und das W3C ist das W3C.
26.01.2013, 17:39
pumukel

Hallo Lucina

Hier habe ich den erwähnten Code

Code:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>border-image</title> <style> body { font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 150%; } div { margin: 30px; float: left; } #eins { border-style:solid; /* hinzugefügt am 26.01.2013 17:18:45 */ width: 320px; -moz-border-image: url(rahmenbild.gif) 60 stretch; -webkit-border-image: url(rahmenbild.gif) 60 stretch; -o-border-image: url(rahmenbild.gif) 60 stretch; border-image: url(rahmenbild.gif) 60 stretch; border-width: 60px; } #zwei { border-style:solid; /* hinzugefügt am 26.01.2013 17:18:45 */ width: 320px; -moz-border-image: url(rahmenbild.gif) 60 round ; -webkit-border-image: url(rahmenbild.gif) 60 round ; -o-border-image: url(rahmenbild.gif) 60 round ; border-image: url(rahmenbild.gif) 60 round ; border-width: 60px; } #drei { border-style:solid; /* hinzugefügt am 26.01.2013 17:18:45 */ width: 320px; -moz-border-image: url(rahmenbild.gif) 60 repeat ; -webkit-border-image: url(rahmenbild.gif) 60 repeat ; -o-border-image: url(rahmenbild.gif) 60 repeat ; border-image: url(rahmenbild.gif) 60 repeat ; border-width: 60px; } #vier { /* Im Frühsommer 2011 noch nicht von den Browsern unterstützt */ border-style:solid; /* hinzugefügt am 26.01.2013 17:18:45 */ width: 320px; -moz-border-image: url(rahmenbild.gif) 10 10 10 10 space ; -webkit-border-image: url(rahmenbild.gif) 60 space ; -o-border-image: url(rahmenbild.gif) 60 space ; border-image: url(rahmenbild.gif) 21 21 21 21 space ; /* Diese Option find ich nirgends */ border-width: 60px; } #fuenf { border-style:solid; /* hinzugefügt am 26.01.2013 17:18:45 */ width: 320px; -moz-border-image: url(rahmenbild.gif) 60 stretch round ; -webkit-border-image: url(rahmenbild.gif) 60 stretch round; -o-border-image: url(rahmenbild.gif) 60 stretch round; border-image: url(rahmenbild.gif) 60 stretch round; border-width: 60px; } #sechs { border-style:solid; /* hinzugefügt am 26.01.2013 17:18:45 */ width: 320px; -moz-border-image: url(rahmenbild.gif) 90 80 80 90 stretch ; -webkit-border-image: url(rahmenbild.gif) 90 80 80 90 stretch; -o-border-image: url(rahmenbild.gif) 90 80 80 90 stretch; border-image: url(rahmenbild.gif) 90 80 80 90 stretch; border-width: 30px; } p { padding: 50px; } </style> </head> <body> <div id="eins"> <p>eons: individuelle Rahmen <br /> border-image: url(rahmenbild.gif) 60 stretch; </p> </div> <div id="zwei"> <p>zwei: individuelle Rahmen<br /> border-image: url(rahmenbild.gif) 60 round; </p> </div> <div id="drei"> <p>drei: individuelle Rahmen<br /> border-image: url(rahmenbild.gif) 60 repeat; </p> </div> <div id="vier"> <p>vier: individuelle Rahmen<br /> border-image: url(rahmenbild.gif) 60 space; </p> </div> <div id="fuenf"> <p>fuenf: individuelle Rahmen<br /> border-image: url(rahmenbild.gif) 60 stretch round; </p> </div> <div id="sechs"> <p>sechs: individuelle Rahmen<br /> border-image: url(rahmenbild.gif) 90 80 80 90 stretch; </p> </div> </body> </html>

Vor allem ist anscheinend ein border-style:solid; notwendig damit es hinhaut.

#vier frisst nur Googel Chrom und Safari 5.1.7 Win.

Es ist eben immer noch auch im Jahre 2013 so eine Sache mit HTML5 und CSS3, leider. Manchmal einfach zum heulen.
Gruss pumukel