Internet Explorer not showing Media & Text Blocks Correctly

[abircham]

I am in the process of upgrading the company website, I have been using Chrome to do the upgrade and all looked fine. However when I viewed the website via Internet Explorer this morning I noticed that the Media & Text blocks have the picture above the text instead of side by side, on Chrome and FireFox these are displayed correctly.

I have cleared the IE cache but it didn’t help.

An example page is ​https://www.cherry-white.co.uk/products/optical-transport-wdm-solutions/

[knutsp]

Hello @abircham and very welcome to Trac!

The style and visual presentation of a WordPress site is controlled mostly by the theme you are using. WordPress comes with some default themes (Twenty *) and they are maintained here on this Trac along with core itself.

Looking at the example page you provided and inspecting html source, it seems you are using a theme named Sydney​https://wordpress.org/themes/sydney/.

I suggest you contact the author of the theme, or the support forums at their site​https://athemes.com/theme/sydney/ to get help.

Closing this as invalid for now. Please reopen this ticket if you find that this is a WordPress core issue. A conversation may also continue on a closed ticket here.

[abircham]

Thank you for coming back to me so quickly. This was my initial thought as well however I have tried a live preview of other themes and just tried a live preview of twenty nineteen and they all show the same issue.

[knutsp]

The version of Internet Explorer you are using would be useful. Support for IE is limited.

I have set the correct ticket component for the bundled Twenty*-themes, so they correct team may have a look at it. Please don't raise severity above normal, it has no effect.

[abircham]

Thanks again.
The version if IE is 11.379.17763.0
I have tried on other machines as well to illuminate a local issue.

[ianbelanger]

Hi @abircham,

I just checked your example page in Chrome and IE11 and I don't see much difference between the 2 browsers. See my screenshots below.

Can you provide a screenshot of the issues you are seeing? Thank you

[ianbelanger]

IE11 example page

[ianbelanger]

Chrome example page

[abircham]

Replying to ianbelanger:
Thank you for your comments. I have added additional custom CSS to the style sheet to overcome the issue. I will remove the code now so that you can see the issue and put it back in on monday.

The code I have used is:

.wp-block-media-text:after {

display: table;
content: "";
clear: both;

}
.wp-block-media-text figure {

float: left;
width: 50%;

}
.wp-block-media-text .wp-block-media-textcontent {

float: right;
width: 50%;

}
.wp-block-media-text.has-media-on-the-right figure {

float: right;

}
.wp-block-media-text.has-media-on-the-right .wp-block-media-textcontent {

float: left;

}
@supports (display: grid) {

.wp-block-media-text figure {

float: none;
width: inherit;

}
.wp-block-media-text .wp-block-media-textcontent {

float: none;
width: inherit;

}
.wp-block-media-text.has-media-on-the-right figure {

float: none;

}
.wp-block-media-text.has-media-on-the-right .wp-block-media-textcontent {

float: none;

}

}

[ianbelanger]

Hi @abircham,

Thanks for clarifying. I can now confirm the issue in IE11. I will submit a patch to fix this issue soon. I am changing the Component to General, because this is not just a Bundled Themes issue, it affects other themes as well.

[abircham]

Replying to ianbelanger:

Hi @abircham,

Thanks for clarifying. I can now confirm the issue in IE11. I will submit a patch to fix this issue soon. I am changing the Component to General, because this is not just a Bundled Themes issue, it affects other themes as well.

Thank you, I will re-insert the code for now then as a temp fix.

[ianbelanger]

After some research, I have found that there is already an ongoing issue in the Gutenberg repo on Github. ​https://github.com/WordPress/gutenberg/issues/14517 This issue will have to be fixed there and any further conversations should be continued there as well. I am closing this ticket.