Where did you install Firefox from? Help Mozilla uncover 3rd party websites that offer problematic Firefox installation by taking part in our campaign. There will be swag, and you'll be featured in our blog if you manage to report at least 10 valid reports!

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

CSS border-image support seems to have been removed in 4RC

  • 5 vastust
  • 49 on selline probleem
  • 1 view
  • Viimati vastas cor-el

more options

I installed the 4 RC and now the CSS border-image styles I'm using don't seem to be supported. The borders look just like they do in IE9 and who whats that!? Before I upgraded my beta versoin border-image behaved like it does in Chrome

I installed the 4 RC and now the CSS border-image styles I'm using don't seem to be supported. The borders look just like they do in IE9 and who whats that!? Before I upgraded my beta versoin border-image behaved like it does in Chrome

All Replies (5)

more options
more options

@Topic: Stupidness of this move is just mind blowing...

@UP: Hay, its an old CSS reference (FF3.6 times). Its useless with FF4.

Example: Link: CSS3.info

Browsing with FF4 we see first two borders like orange double styled solid lines. Snapping with Firebug, we can't see ANY 'border-image' phrase. Next, and last, two borders are images showing how its going to be displayed.

Q: But there might be nothing about border-image in this demo! It might be fake, so FF4 is correct. A: Go ahead to the raw CSS file (link) and search for the '#border-image-1'. And what? We have 6 (six!) variants of implementing border-images and FF4 still gives a f*ck...

Muudetud proxyy poolt

more options

On the http://www.css3.info/preview/border-image/ it seems to be caused by the order of the CSS rules.
If I move the border: double orange 1em; rules to above the xxx-border-image rules then it works.
So apparently placing using border rule at the end disables all border rules (including the -moz-border-image that gets changed to none) that are placed above them. This might be expected and you should use specific rules (border -color, border-style, border-width etc.) in such an situation.

#left_column #border-image-1 {
margin: 0 30px;
width: 270px;
padding: 14px;
border: double orange 1em;
-o-border-image: url('/wp-content/uploads/2007/09/border.png') 27 round round;
-icab-border-image: url('/wp-content/uploads/2007/09/border.png') 27 round round;
-khtml-border-image: url('/wp-content/uploads/2007/09/border.png') 27 round round;
-moz-border-image: url('/wp-content/uploads/2007/09/border.png') 27 round round;
-webkit-border-image: url('/wp-content/uploads/2007/09/border.png') 27 round round;
border-image: url('/wp-content/uploads/2007/09/border.png') 27 round round;
}

#left_column #border-image-2 {
margin: 0 30px;
width: 270px;
padding: 14px;
border: double orange 1em;
-o-border-image: url('/wp-content/uploads/2007/09/border.png') 27 stretch stretch;
-icab-border-image: url('/wp-content/uploads/2007/09/border.png') 27 stretch stretch;
-khtml-border-image: url('/wp-content/uploads/2007/09/border.png') 27 stretch stretch;
-moz-border-image: url('/wp-content/uploads/2007/09/border.png') 27 stretch stretch;
-webkit-border-image: url('/wp-content/uploads/2007/09/border.png') 27 stretch stretch;
border-image: url('/wp-content/uploads/2007/09/border.png') 27 stretch stretch;
}
more options

Yay! One point for you cor-el. I didn't noticed that move by myself.

So, my last words about it are: WHY for god sake is that difference?! Why FF4 wants to mess up borders. Where's FF 3,6 border & border-image independence...

more options

The HMTL parser in Firefox 4 is much stricter than in previous Firefox 3 versions, so CSS that worked before might need attention and correction. Some older code is no longer supported and like in this situation there may be dependencies that were previously not present.