Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

I just uploaded Firefox 15.0 and discovered that my pages border-images stopped working. Why?

  • 10 replies
  • 8 have this problem
  • 3 views
  • Last reply by erink1234

more options

My css border-images were working until i upgraded to Firefox 15

My css border-images were working until i upgraded to Firefox 15

All Replies (10)

more options

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.

more options

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;
more options

Could you post a URL for a live page showing the problem?

more options

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

more options

you can see what it looks like in chrome...

more options

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 by jscher2000 - Support Volunteer

more options

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 by jscher2000 - Support Volunteer

more options

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; }
more options

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!

more options

Got it! Thanks cor-el. Hey, thanks to everyone for taking the time to look. I really appreciate it!