CODEWITHSUNDEEP
webkitbordercss
j00ls
j00ls

Reputation: 105

-moz and -webkit border-image problems

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?

Upvotes: 0

Views: 4945

Answers (4)

Pavlo
Pavlo

Reputation: 44889

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.

Upvotes: 3

Rich
Rich

Reputation: 375

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;

Upvotes: 1

NewUser
NewUser

Reputation: 13333

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?

Upvotes: -1

Shah
Shah

Reputation: 79

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.

Upvotes: -1

Related Questions