CSS changes doesn’t work in Firefox 17.0.1 using WordPress CMS

I’m using the Simple Retail Plugin and added this CSS class to it’s css(display.css):

.round
{
border-width: 28px;
-moz-border-image: url("../images/frame2.png") 28 28 round; /*Mozilla version*/
-webkit-border-image: url("../images/frame2.png") 28 28 round; /*Webkit version*/
-o-border-image: url("../images/frame2.png") 28 28 round; /*Opera version*/
-ms-border-image: url("../images/frame2.png") 28 28 round; /*IE syntax when it does support this prop*/
border-image: url("../images/frame2.png") 28 28 round; /*Standard version*/
}

Just a simple border that uses an image. I’ve tried to add it to the WordPress’s own stylesheet but the same problem persists.

Read More

It does work in Safari and Chrome but not in Firefox. I know that border-image CSS works in Firefox because I’ve tested it outside of WordPress (v3.4.2).

I’ve used firebug and it shows that it does in fact use that class but for some reason doesn’t show it in firefox. I even tried to change the themes.

I’ve googled, searched and tested for the last two days but found nothing.

Thanks for your help

Edit: I’m using MAMP.

Related posts

Leave a Reply

2 comments

  1. I have been having the same issue with one of my sites just last night.

    The only thing I found that worked was to update the stylesheet and save it in wordpress editor, go into your database, edit the site url in the wp-options table, rename the folder the site is in to what you changed it to in the database and it will have updated.

  2. Alright. It seems after Firefox updated to 15.01 they made some changes how it reads the css. You need to add:

    border-style;solid;
    

    after border-image css tag. It should look like this:

    .round
    {
    border-width: 28px;
    -moz-border-image: url("../images/frame2.png") 28 28 round; /*Mozilla version*/
    -webkit-border-image: url("../images/frame2.png") 28 28 round; /*Webkit version*/
    -o-border-image: url("../images/frame2.png") 28 28 round; /*Opera version*/
    -ms-border-image: url("../images/frame2.png") 28 28 round; /*IE syntax when it does support this prop*/
    border-image: url("../images/frame2.png") 28 28 round; /*Standard version*/
    
    border-style;solid
    
    }