CSS border-image support seems to have been removed in 4RC
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)
@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...
Ti ṣàtúnṣe
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; }
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...
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.