w3schools.com examples recommend "transparent" border as fallback (was: border-image not working at all)

NEW
Unassigned

Status

Tech Evangelism
Desktop
P5
normal
6 years ago
a year ago

People

(Reporter: ricky, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [country-us] [sitewait] [doc], URL)

(Reporter)

Description

6 years ago
User Agent: Mozilla/5.0 (X11; Linux i686) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.57 Safari/536.11

Steps to reproduce:

Create a DIV with border-width in CSS


Actual results:

No border, nor image


Expected results:

A border around DIV with image.

Example:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image
(Reporter)

Updated

6 years ago
(Reporter)

Updated

6 years ago
OS: Linux → All
Hardware: x86 → All

Comment 1

6 years ago
border-width:15px;

You need to specify a border-style (according to final CSS spec.), e.g.

border: solid 15px;

Please report this error to w3schools.com, thanks

Comment 2

6 years ago
See also bug 497995 and bug 713643
Assignee: nobody → english-us
Blocks: 497995, 713643
Component: Untriaged → English US
Product: Firefox → Tech Evangelism
Summary: border-image not working at all → border-image not working at all in w3schools.com examples
Version: 15 Branch → unspecified

Updated

6 years ago
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: regression

Comment 3

6 years ago
> Please report this error to w3schools.com, thanks
I you do this, please point them to this bug (and let us know)
(Reporter)

Comment 4

6 years ago
Reported to w3schools.com.

Did cause production impact due to previous versions supporting without style. Any chance old behavior could be retained.

Comment 5

6 years ago
> Reported to w3schools.com.
Thanks! Please comment here or close this bug when they changed their examples.
 
> Any chance old behavior could be retained.
No way, read the depending bugs.
This is a decision of the W3C CSS Working Group, supported by all major browser vendors (Opera, Microsoft, Google, Apple, Mozilla). 
They all will ship "border-image" without prefix soon.

Comment 6

6 years ago
> Did cause production impact due to previous versions supporting without style.

Well, using experimental features may result in experimental experience ...
w3schools should really warn seriously about using vendor-prefixed properties.
(Reporter)

Comment 7

6 years ago
Reported to w3schools and I've fixed internally.
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → WORKSFORME

Comment 8

6 years ago
This is a "Tech Evangelism" bug and should not be closed before the affected page (w3schools.com) is fixed.
Status: RESOLVED → REOPENED
Resolution: WORKSFORME → ---

Updated

6 years ago
Duplicate of this bug: 786610

Updated

6 years ago
Duplicate of this bug: 805765
Using Firefox 20.0.1 the borders are displayed correctly on the example page. So this looks like it's fixed.

Sebastian

Comment 12

5 years ago
hmm, they fixed it in a wrong way by adding

 border:15px solid transparent;

The solid border should be a fallback for browser with no border-image support.
The right thing in this examples would be something like

 border: 15px solid orange; 
or
 border: 15px dashed orange;
or
 border: 15px dotted orange;

sigh ... (changing summary)
Status: REOPENED → NEW
Keywords: regression
Summary: border-image not working at all in w3schools.com examples → w3schools.com examples recommend "transparent" border as fallback (was: border-image not working at all)
Contacted through their form.
Assignee: english-us → nobody
Component: English US → Desktop
Whiteboard: [country-us] [sitewait] [doc]

Comment 14

4 years ago
(In reply to j.j. (mostly inactive) from comment #12)
> hmm, they fixed it in a wrong way by adding
>  border:15px solid transparent;

> The solid (or dashed, dotted, double) border should be a
> fallback for browsers with no border-image support.

... or fallback in cases where the image has not loaded for whatever reasons
IMHO,  border:15px solid transparent; is not ideal, but it's valid CSS.
Priority: -- → P5
You need to log in before you can comment on or make changes to this bug.