Edge is hiding floated images (Flex in IE11)

This site is currently a WIP. I had a couple of reports from clients about layout problems on some computers, but they did not know what browser the offending machines were using. Reading between the lines, before they confirm and supply screen shots as I requested, I assume both were on Edge. One said it was a “new laptop” and the other said they were on Windows 10.
I don’t have Edge, so have not tested on it until today I got access to a Win10 machine.
I’m not seeing anything like they described (a problem with the sponsors logos) but I have noticed that the images I have floated on the right of the page appear to be hidden (leaving a gap in their place).
If I click off float: right in Inspect, they reappear.
Checking again just now, it seems to relate to the parent element being display: table-cell, if I click that off, the images appear (but break the layout). Not sure why that should affect it.
Any ideas?
This is one page that should have 3 pictures on the right, ignore the plan at the bottom.
www dot win ter ton show dot co dot uk slash show

Try adding position:relative to .fl-right. I think the image is just under the background.

There is also a big issue with the ul.spons div which is making a big mess of the whole page. Looks like a flexbox bug. Unfortunately I have to go out right now so can’t help debug until tomorrow.

1 Like

That sounds like what the client mentioned, but I don’t see it. Any chance of a screen-shot? Could it be version specific?

Will try, thanks.

I can see the big mess but don’t have a way to save a screen shot on that PC. It’s a small monitor, too. Would have to reduce the screen considerably. I don’t know how to use window’s dev tools, so I’m not likely to be much help. Let me see if I can install GIMP on that box. It’s a long install, so it will take about half an hour.

My money agrees with you that it’s an Edge vs Flexbox incompatibility.

I don’t see any big messes.

That has worked, thanks again.
The “big mess” is puzzling me, as I don’t see it. Such is my familiarity with Edge (and Win10) I can’t even work out how to find out which version it is.

I can’t even remember why I’m using flexbox in the sidebar :confused:
Could be that I’m re-using the class .spons which does need flexbox on the actual sponsors page.
Maybe need to change that in the sidebar.
It’s just confusing because I don’t see the problem.

My mistake. Edge looks good, IE11 shows the big mess.

1 Like

OK, will have to check that at home. IE and flex are always a problem. :rolleyes:

Funnily enough, IE 8 and 9 don’t make a mess because they don’t even try to use flex.

Sorry, I meant in IE11. Edge was ok.

IE11 has some big issues with flex.

This screen shot is of a smaller monitor. The image is shrunk to fit. :wonky:

1 Like

I think IE11 can only be fixed by applying fixed widths to that left column. Add a width of 12em to .side ul and to .spons a.

Ie11 isn’t honouring the max-width on the images and stretches the page wide. (There’s a similar bug in ie8 with max-width on images.)

You may need to lose the display:flex in that column if you want to fix IE11 properly. There doesn’t seem a real need for flexbox in that left column.

That’s what I was thinking. I’m back at home now, so have access to IE11 to test it.

Just examining it now.
I’m actually quite staggered how IE11 is ignoring not just max-width but also the .side { width: 12em; } which should fix the width of the whole sidebar :astonished:
I think I actually prefer the old IEs that just don’t do flex at all, to those that do it half-cooked.

3 Likes

Well I think I have sorted out the sponsors on the sidebar now. But there are other pages that use flex that are messed up in IE11. But I’m out of time now so they will have to wait.

2 Likes

This is doing my head in, I can’t make much sense of what IE11 is doing with flex and not respecting the container widths/max-widths.
There are two pages on the site badly affected by this, /contact and /sponsors (a sub section of Marketing).
I have done a “card” style layout, view in Firefox or Chrome/Edge to see how it should be.
Though I have used flex for a card layout on this page (http://burtonstatherheritage.org/roll-of-honour) and it works in IE11. I will have to see what I did differently there.
So far one thing is that the main is display: table-cell adding a max-width seems to fix that to stay in the regular page width, but the logos (in sponsors) still misbehave, become too big and overlap due to the nested flexes.
Adding more max-widths stops that, but messes with the image aspect ratio. They have height: auto but disobey that, possibly using a height to go with the width IE wants it to be, rather than the width it actually is.
This is so annoying, I always found flex to be a pleasure to work with (once you get it) but IE11 is ruining that. :disappointed:
The old IEs that don’t do flex degrade gracefully to inline-blocks, while IE11 tries to do flex, but gets it wrong.

IE11 doesn’t like flex inside of a table unless you add table-layout:fixed.

It also has a stretching bug when you apply a max-width to the flex item.

If you add this fix to your contact page it should bring it back into line but you may need to tweak the content a little as it will shift it slightly in other browsers.

.middle{table-layout:fixed}
.cards > li {max-width:none;}
.cards > li > *{max-width:24em;}

The last rule would of course be better if you added an inner element to have the max-width and just target that one.

As an aside my flexbox patterns demo all work in IE11 in their normal state. It’s when you start placing them in other contexts or do more complicated things that they start to fall apart in IE11. I suppose the answer is to test in IE11 first when you use flexbox if you need to support it.:slight_smile:

2 Likes

Thanks Paul, I have been tearing my hair out with this. Removing the max-width does the trick, I guess I could live without that. I just means the cards go full width when on a line of their own. I could always add an inner wrapper to the <li>s if I need it.

It was puzzling me how it seemed so un-compliant on these pages, yet behaved well on the “Roll of honour”.

As it turned out, it was the last.
Next up, the sponsors to deal with…

1 Like

You seem to have fixed it already (unless I’m looking at the wrong page):slight_smile:

Yes, I just uploaded the amended css.
It’s not as flexible as I had it before, but acceptable I think. :slight_smile:
Strange how the images don’t keep aspect, but now that only happens at very narrow widths, too narrow to be a concern.

1 Like

Hi, Sam. I don’t see any images changing their aspect ratio at small widths on the “show” page.

Nevertheless, if there are any anywhere, may I suggest that you assign width:100%; height:auto; to the images instead of max-width. Assign the max-width to their containing element.

EDIT:

I just realized that you posted 8 hours ago. Didn’t realize I’d been OTL for so long… preoccupied. Sorry for the delay. :slight_smile: