Important Notice: We're experiencing email notification issues. If you've posted a question in the community forums recently, please check your profile manually for responses while we're working to fix this.

On Monday the 3rd of March, around 5pm UTC (9am PT) users may experience a brief period of downtime while one of our underlying services is under maintenance.

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 svar
  • 8 har dette problemet
  • 1 view
  • Siste svar av 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.)

Endret av 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;

Endret av 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!