-moz and -webkit border-image problems

▲
0
▼

I have a problem with my blog: in oder to make a cool border I used some css commands from the moz-webkit and it used to work rather well. (at least in firefox & chrome, not IE)

These are the lines of code that I used to create the border are:

    -moz-border-image:url("file.png") 15 round round;
    -webkit-border-image:url("file.png") 15 round round;
    border-image:url("file.png") 15 round round;

This does not seem to work anymore and I have no idea why... The Errormessages I'm getting don't really help:

( NS_ERROR_INVALID_POINTER: Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMLocation.href] )

oops, forgot the link to my blog: http://life.wisniewski.org/

Does anyone know what happened or have an alternative to the moz-webkit CSS commands?

css
webkit
border
css3
asked on Stack Overflow Sep 6, 2012 by j00ls • edited Sep 6, 2012 by Marijn

4 Answers

▲
3
▼

Here's code you can use right away:

border: 15px solid transparent;
-webkit-border-image: url(fotoframe.png) 15 round;
   -moz-border-image: url(fotoframe.png) 15 round;
     -o-border-image: url(fotoframe.png) 15 round;
        border-image: url(fotoframe.png) 15 round;

What have been done:

  1. Fixed link to the image in border-image property (you had "fotoframe.png.png").
  2. Added shorthand border property, as specifying just border-width wasn't enough for -moz-border-image to be displayed correctly. transparent is a fallback for IE, you may want to change this for some color.
  3. Added Opera-prefixed version.
  4. Changed image url to be relative.
  5. Remove redundant second round value.
answered on Stack Overflow Sep 6, 2012 by Pavlo • edited Aug 4, 2013 by Pavlo
▲
1
▼

I used some css commands from the moz-webkit and it used to work rather well

Did it only stop working when you upgraded to Firefox15?

If so, this might help: David Baron's weblog: CSS border-image changes and unprefixing

Edit/Update:

In order to fix my site and ensure compatibility, I changed this:

 -moz-border-image: url("../_images/tributton.png") 0 4 0 4;

To this:

 -moz-border-image: url("../_images/tributton.png") 0 4 0 4;
 border-image: url("../_images/tributton.png") fill 0 4 0 4;
 border-style: solid;
answered on Stack Overflow Sep 6, 2012 by Rich • edited Sep 6, 2012 by Rich
▲
-1
▼

Well border image is css3 property.To solve your problem try like this 

#example-one {
    border-width:25px 30px 10px 20px;
    -moz-border-image:url("border-image.png") 25 30 10 20 repeat stretch;
    -webkit-border-image:url("border-image.png") 25 30 10 20 repeat stretch;
    border-image:url("border-image.png") 25 30 10 20 repeat stretch;
}

For more reference you can check this site. http://css-tricks.com/understanding-border-image/

Update By searching your error code over Google I got this answer. Have a look on this it might help you out

What is the NS_ERROR_INVALID_POINTER error in Firefox?

answered on Stack Overflow Sep 6, 2012 by NewUser • edited May 23, 2017 by Community
▲
-1
▼

Instead of giving round u can specify the values as given below

-moz-border-image:url("border-image.png") 25 30 10 20 repeat;
-webkit-border-image:url("border-image.png") 25 30 10 20 repeat;
border-image:url("border-image.png") 25 30 10 20 repeat;

Please check the same.

answered on Stack Overflow Sep 6, 2012 by Shah

User contributions licensed under CC BY-SA 3.0