[Support request] Website not displaying correctly on IE and Safari

[Sean]

My website is displaying perfectly on Chrome and Firefox, but on Internet Explorer, the nav, headings and white clouds vector in the header are not displaying correctly. And in Safari the logo shows above the nav instead of to the left.

Is there any fix for this?

Thanks

GeneratePress 2.1.4

[Tom]

For the IE issue, add this CSS:

@media (min-width: 769px) {
    .page-hero {
        height: 100vh;
    }
}

For the Safari issue, it looks like it’s getting mixed up because the navigation is floating to the right.

What if you set it to display above the header instead?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sean]

Great, the headings, nav and logo seem to have fixed for IE, but the vector clouds img i used in the header element still is not showing up for IE.

[David]

Hi there,

can you try giving the SVG a height property in your CSS, and see if it works on IE.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sean]

Seems to be displaying in IE now, however, i can’t get it to go to full size across the header, I’ve tried giving the SVG 100% width but that only seems to center it.

[David]

Try a min-height property instead, not sure if IE will handle that but worth a shot.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sean]

Doesn’t appear IE can handle it, and if i try the display messes up for the other browsers, I can see why people hate IE so much.

[David]

IE doesn’t handle scaling well for SVGs, if you’re really want to get into it this article provides some workarounds.

https://codepen.io/tomByrer/pen/qEBbzw?editors=110

If you want to add IE specific CSS then you can using his query:

https://docs.generatepress.com/article/responsive-display/#ie10-specific-styles

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sean]

Thanks David!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts