[Resolved] Internet explorer mess things up

[Mårten]

Hi, I have a website that works fine in Chrome, Firefox and phones. In Internet Explorer on the other hand, I got problems. The first thing is that the font doesn’t work. I use my own. The second thing is I got a horizontal scroll and the page gets big, instead of responsive.

The site: http://skaraborgsfilmfestival.se/

Do you know what the problem may be?

Thanks!
Mathilda

[Tom]

This custom CSS is likely causing that issue:

.site-logo {
    float: left!important;
    margin-right: 7px;
}

[Mårten]

I removed the css and it still look the same! What about the font-problem?

[Tom]

What happens when you remove the logo?

How are you adding your own font? Is it working in other browsers?

[Mårten]

I tried to delete the logo, it went better, but in the others browsers, the logo adapts to the screensize, it’s like the page loses it’s responsivity in explorer!

I’m using “Font Organizer” It works in the other browsers, it’s just explorer that make no sense!

Here’s explorer: http://sv.tinypic.com/r/2vdi642/9
Here’s chrome: http://sv.tinypic.com/r/snibdu/9

[Tom]

Maybe try removing the display:flex code from your header/site logo/header widget for now – it might be messing IE up.

Otherwise you can just resize the image to fit inside your container, which would be better for site speed anyways.

[Mårten]

I changed the image to fit the container and it looks good on my big screen. But if I resize the browser, the horizontal scroll comes back. I think we can live with that. I just under 1200px, and how many people uses a computer with size of the screen and explorer…

But the font-problem, do you know have any idea why it’s different in explorer?

[Tom]

I wonder if it’s the display: flex CSS you have applied to the site-logo and header-widget. Might be worth removing that CSS just to test. I can’t see any other reason.

Perhaps this will help with the font issue: https://stackoverflow.com/questions/30174622/font-face-not-working-with-specific-version-of-internet-explorer-11

[Mårten]

I have not applied any flex CSS, but I can see that it’s there. The thing is, there is no layoutplugin installed, so where does the flex comes from?!

Thanks, I try that!

[Tom]

Have you checked in your CSS file? Or in Customize > Additional CSS?

[Mårten]

Yes, sorry. you where right. I used it to put the headerwidget under the “logo”. Is there any other way I can put the text right under the logo without flex?

I found out that I needed woff-format for the font, btw! So now it works fine in every browser.

[Tom]

What if you just added the text in the “After Header Content” hook in “Appearance > GP Hooks”?

Let me know 🙂

[Mårten]

Thank you, that was perfect!

Thanks for all the help, have a great day!

[Tom]

Thanks! You too! 🙂

[Author]

Posts