Answered by:

Expression Web 4 Sp2 CSS3 draft Flexbox

Question

Could someone please help regarding - for example - display:flex; is not compatible when it is supposed to work in ie10 and edge. Is there some intellisense upgrade I am missing ? All the Flex stuff does not work as advertised.

Answers

By default the Flex Items in the <p> tags should show in 1 row and a border should line around the edge of the box. What you end up with is a border above the items and the items are stacked multi-line. The spec just does not work and to paraphrase
the CaniuseSite says ie11 works partially, ie13 14 (Edge) is supported. The result does not get any better with 11 12 or 13 and it looks like Firefox and Chrome are the main adopters. I was wondering
if my software was not up to date or something like a setting, I am set to Author in CSS3 Draft.

Your "software" (EW) has nothing to do with it. Microsoft announced in July 2011 that development of the Expression Studio programs, including EW, was being brought to an end, and announced the release of the free version EW4 SP2a that you are
presumably using. That means that EW's CSS support is frozen at the level of the CSS3 draft as it existed at that time, more than five years ago. Consequently, neither its Intellisense nor its syntax/compatibility checking, nor its design view, understand
flexbox. So, it may display compatibility messages when you use that markup. No problem—simply ignore the messages; nothing will happen. There are no settings you can use to change that.

So does this stuff work or not??

Now, whether it displays properly in a particular browser, again, has nothing to do with the development tool used. That is 100% predicated upon the
browser's support for that feature. And, as usual, it appears that IE and successors are laggard in the completeness of their support. That is not the fault of EW, and there is nothing that you can do, no setting you can change, in EW to change that.

So, use EW, enter the code that should work, ignore any compatibility messages, and test in your target browsers and you'll be OK.

cheers,
scott

Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

All replies

Your post is not clear. What do you mean by "is not compatible"? Since you reference intellisense I'm wondering if you are talking about EW's compatibility reports, but you haven't said that. Then you talk about it not working
in IE10 and Edge, which has nothing to do with EW and everything to do with the browsers themselves, if they understand it, and if you have done the markup correctly. display:flex is not universally implemented the same way, prefix-free, or bug
free: http://caniuse.com/#feat=flexbox and
https://css-tricks.com/using-flexbox/

I will say that the last release of EW was many years ago, so if you
are talking about compatibility reports, don't expect it to know anything newer than that. Frankly, all that matters is what works in your actual browser tests. Just ignore anything EW complains about because it's newer than EW is.

By default the Flex Items in the <p> tags should show in 1 row and a border should line around the edge of the box. What you end up with is a border above the items and the items are stacked multi-line. The spec just does not work and to paraphrase
the CaniuseSite says ie11 works partially, ie13 14 (Edge) is supported. The result does not get any better with 11 12 or 13 and it looks like Firefox and Chrome are the main adopters. I was wondering
if my software was not up to date or something like a setting, I am set to Author in CSS3 Draft.

EW does not understand flex. As I told you, the last release was years ago. Ignore warnings that relate to new things EW doesn't know about.

As to flex working in browsers, as I said, that has nothing to do with EW and everything to do with browsers and how they expect flex to be marked up, or not, and how they support flex, or not. See my previous two links for examples of that.

I can't comment about a book you are reading without having that book. I can say that using only the markup you show, the paragraphs are side by side, with a border around the containing div, in latest versions of Chrome, Firefox, IE, Edge.
They div is fixed in total width.

If you see something different, perhaps you have other styles in the page that are changing the effect.

By default the Flex Items in the <p> tags should show in 1 row and a border should line around the edge of the box. What you end up with is a border above the items and the items are stacked multi-line. The spec just does not work and to paraphrase
the CaniuseSite says ie11 works partially, ie13 14 (Edge) is supported. The result does not get any better with 11 12 or 13 and it looks like Firefox and Chrome are the main adopters. I was wondering
if my software was not up to date or something like a setting, I am set to Author in CSS3 Draft.

Your "software" (EW) has nothing to do with it. Microsoft announced in July 2011 that development of the Expression Studio programs, including EW, was being brought to an end, and announced the release of the free version EW4 SP2a that you are
presumably using. That means that EW's CSS support is frozen at the level of the CSS3 draft as it existed at that time, more than five years ago. Consequently, neither its Intellisense nor its syntax/compatibility checking, nor its design view, understand
flexbox. So, it may display compatibility messages when you use that markup. No problem—simply ignore the messages; nothing will happen. There are no settings you can use to change that.

So does this stuff work or not??

Now, whether it displays properly in a particular browser, again, has nothing to do with the development tool used. That is 100% predicated upon the
browser's support for that feature. And, as usual, it appears that IE and successors are laggard in the completeness of their support. That is not the fault of EW, and there is nothing that you can do, no setting you can change, in EW to change that.

So, use EW, enter the code that should work, ignore any compatibility messages, and test in your target browsers and you'll be OK.

cheers,
scott

Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

EW4 complains about flex-box, but it works. You will not get attributes etc. to show in the intellisense but it does work. I even had the items show stacked in design view, but when I ran in ie11 they presented as inline.