I just uploaded Firefox 15.0 and discovered that my pages border-images stopped working. Why?
My css border-images were working until i upgraded to Firefox 15
All Replies (10)
You probably need to duplicate your old rule so it appears with and without the -moz prefix. With prefix for Fx3.5-Fx14 and without prefix for Fx15+
For example:
-moz-border-image:url("border-image.png") 25 30 10 20 repeat; border-image:url("border-image.png") 25 30 10 20 repeat;
See: border-image | Mozilla Developer Network.
(And yes, these changes are annoying!)
Also possibly of interest: Firefox 15 for developers | Mozilla Developer Network.
This is what I was using with success prior to the update:
border-width: 0px 0px 7px 0px; -moz-border-image:url(images/menu_dots.png) 0 0 7 0 repeat; -webkit-border-image:url(images/menu_dots.png) 0 0 7 0 repeat;
border-image: url(images/menu_dots.png) 0% 0% 100% 0% repeat; border-image: url(images/menu_dots.png) 0 0 7 0 repeat;
Could you post a URL for a live page showing the problem?
http://theclearing.org/test/support.shtml
all the menu (sidebar and main) list items and main page sections should have a 'rustic' dotted line between them
you can see what it looks like in chrome...
Edit: See next post for preferred solution
Firefox is reading your "border-image-width" values (0 0 7 0) in as "border-image-slice" values and defaulting to a width of 1.
The "long form" works, but I can't figure out how to get the shorthand syntax to work:
border-image-source: url(images/menu_dots.png); border-image-width: 0 0 7px 0; border-image-repeat: repeat;
(I don't have Chrome on this PC.)
Modified
Scratch that prescription. You have this now:
border-width: 0px 0px 7px 0px; /* places a dotted bottom border under menu items */ -moz-border-image:url(images/menu_dots.png) 0 0 7 0 repeat; -webkit-border-image:url(images/menu_dots.png) 0 0 7 0 repeat; border-image: url(images/menu_dots.png) 0% 0% 100% 0% repeat; border-image: url(images/menu_dots.png) 0 0 7 0 repeat;
According to a post by David Baron (David Baron's weblog: CSS border-image changes and unprefixing), the only thing you need to add is the full border style (i.e., style and color):
border-bottom: 7px solid transparent;
Modified
Looks that Firefox wants a border-style to be used if the image can't be displayed.
#dots_defined200, #sidebar_nav ul li { border-style: groove; }
I've had the same problem and after trying almost everything in an attempt to resolve the issue, cor-el has finally found the solution - and it's simple! Thanks!
Got it! Thanks cor-el. Hey, thanks to everyone for taking the time to look. I really appreciate it!