You probably need to use the vendor-specific versions of the flexbox properties, (ie. '-moz', '-webkit').
Yes I don't think any browsers support this without the vendor prefix.
You can always check for support at caniuse.com to see what browsers support the property and whether they need the vendor extension.
I searched for the flexbox-feature on caniuse.com
So, do the little tags mean that I need to add the browser-specific prefix? Why is this?
When do you think will the layout: box (or rather the the layout: flexbox ) -command be supported by the modern browsers without prefix?
PS: The forum rules say you shouldn't include links, but is it ok if they are not clickable like the one above?
EDIT: Removed links
[edited by: readit at 2:23 am (utc) on Sep 23, 2012]
Not normally.. no..unless the forum mod ( in this case alt131 ) or an admin says ( in advance )..you ask them via sticky , and wait to be told.. that you can..or not ..
To answer the other question: yes, the little tags mean you need to use the vendor prefixes. The reasons vary, but it's usually either the standard hasn't been finalized or the vendor's support is in transition.
|When do you think will the layout: box (or rather the the layout: flexbox ) -command be supported by the modern browsers without prefix? |
Doesn't matter, really, unless your audience is composed 100% of people who always use the latest hot-off-the-presses browser. (Considering the range of browsers used even by WebmasterWorld members, I really really doubt this.)
What you need to do is use the vendor-specific forms in addition to the bare form. Eventually most browsers will recognize the default form; but you should keep the extension several years longer for backward compatibility.
Thank you very much. It is working now. And sure I know about downward compatibility, I was just curious when asking.
I think using the browser-specific prefix of flex box properties will help you get rid of the problem.
Hi readit, and welcome to WebmasterWorld :)
Thanks for reading and respecting the forum rules, and for asking when not sure. We avoid inactive links for all the same reasons as active ones. That said, I do try to make it as easy as possible for posters to point readers to material, so as Leosghost says, feel free to contact me using the link at the top of the page to ask.
What was it that made it work - was it the vendor prefixes? Also, you've said that firebug was reporting the flexbox code as an error, but I couldn't reproduce that - can you provide more information?
Something to keep in mind is that the syntax for the flex box model has changed considerably since the first draft. One quick indicator is that the 2009 draft [w3.org] used display:box, while the 2012 Candidate Recommendation [w3.org] uses display:flex or display:inline-flex. Many of the existing tutorials/examples use the outdated syntax without noting the difference and it probably means forward compatibility issues as well as the usual backwards ones.
The CR was only made up this month so very few documents have been updated, and for fun, the "latest version" shows as either 18th or 21 September depending on how you access w3org! But MDN has two articles that highlight the difference at CSS flexible box [developer.mozilla.org] and Using CSS flexible boxes [developer.mozilla.org]. Unusually the compatibility tables don't explicitly say the vendor prefix is required, but the second article has a note about using them and -moz is still listed in the vendor extensions section (although it also refers to -ms and -o but opera doesn't have one and ie support only starts at 10).
Yes, the prefixes made it work. I am aware of the fact that the standard is not fixed yet and that the box-attribute has been replaced by (temporarily "flexbox" and now by) "flex".
You are also right that firebug doesn't report the flexbox code as an error, it simply ignores it for me. Chromium however points it out.