Internet Explorer Problems

Here is a link to a screenshot of what the Bytesforall Montezuma theme preview looks like on Explorer for me.

montezuma screenshot

Press F12 and check if you’re running IE10 in something like IE8 or compatibility mode.

Yes I have checked using different settings with F12 and even uninstalled IE10 and checked in IE9 before reinstalling IE10 again. The results were always the same. Very confused.

See if any of these help:

https://www.techarp.com/showarticle.aspx?artno=772

https://windows.microsoft.com/en-US/internet-explorer/use-compatibility-view#ie=ie-10

https://windows.microsoft.com/en-us/internet-explorer/reset-ie-settings#ie=ie-10

Unfortunately I have tried all of those and still have the same issue. I’m sure it’s something simple but I have not been able to find the answer after much searching. I’m just concerned that others will have the same problem viewing my website that I have.

I think the most interesting point for me is that other browsers also show the same incorrect layout for a fraction of a second before correcting and displaying everything properly.

FWIW, the test site that’s displayed in your example (https://test.bytesforall.com) looks the same in my IE as well, so I don’t think it’s your browser specifically. Have you checked out the other Montezuma sites in BytesForAll’s Montezuma showcase thread? They don’t seem to exhibit the same sort of behavior in IE as the test site does. I’m wondering if the test site is running an older version of the theme.

You say you have the same sorts of problem on your own site? Do you have a URL you can point us to so we can take a look?

For some reason, it doesn’t look like IE is using the same font family as Firefox or Chrome on that test site. The font weight is definitely heavier on the menu items and the characters are definitely wider in the titles. I’ll have to install the IE Developer Toolbar to see if I can figure that one out.

There was a thread started on the BytesForAll support forum about Google fonts not loading in IE for a particular site; I’ll try to see how the original poster had resolved the issue.

Thank you for your attention to this. Just a quick answer – yes, there are many other Montezuma sites I have viewed that have the same layout issue. Others don’t and I am starting to wonder if it’s just the sites that still have the original settings that are having a problem. Google fonts? I have seen something about loading them and have considered doing that. I will need to read more about that.

I really do appreciate your help.

Seems the problem is with the Google Fonts (“Yanone Kaffeesatz”, sans-serif) as you mentioned. In the “Add Google Fonts” menu under “CSS Settings” in the “Montezuma Options” area the default entry is “Yanone+Kaffeesatz:400,200”. I deleted that entry and then checked the website in my other browsers. They all had the same problem as the IE browser. I then added the entry back in and the only browser that still had problems was IE. For some reason IE does not get that font, and even in the other browsers it takes a moment to correct to the right font.

So I am wondering what I need to add to have IE find that font and maybe even help the other browsers find it more quickly.

The below errors are what I believe is the issue with IE:

CSS3117: @font-face failed cross-origin request. Resource access is restricted. YDAoLskQQ5MOAgvHUQCcLbcQawGFB1zaa2VYh64hVv8.eot
CSS3117: @font-face failed cross-origin request. Resource access is restricted. We_iSDqttE3etzfdfhuPRWq2CVSYRrhnN0MLOqfxTW0.eot
CSS3117: @font-face failed cross-origin request. Resource access is restricted. YDAoLskQQ5MOAgvHUQCcLRTHiN2BPBirwIkMLKUspj4.woff
CSS3117: @font-face failed cross-origin request. Resource access is restricted. We_iSDqttE3etzfdfhuPRYa6iXjgqaxY3DU3RqApPOI.woff
`
One of the links is – https://themes.googleusercontent.com/static/fonts/yanonekaffeesatz/v4/YDAoLskQQ5MOAgvHUQCcLbcQawGFB1zaa2VYh64hVv8.eot

I don’t know what happened, but the BytesForAll test page is rendering OK on my IE, now. I’m getting the correct Google fonts and the menu lines up correctly.

As far as the fonts flashing or flicker, this appears to be a problem that is not just limited to Montezuma, but common to sites using Google fonts. This site talks about using the Google WebFont Loader, and when I look at the script in my /wp-content/uploads/montezuma/javascript.js?ver=3.5.2 file, I can see the code. I’ll have to take a look at other documentation to see the flickering can be reduced, if not eliminated.

So here is what happened with me. I went into the get_javascript.php file and found the WebFontConfig code.

WebFontConfig = {
	// google: { families: [ 'Yanone Kaffeesatz:400,200', 'Gruppo', 'Droid Sans:normal,bold' ] },
	google: { families: " . $google_fonts_js . " },
	fontactive: function(fontFamily, fontDescription) {
		// Avoids 'FOUC' - Flash of unstyled content in Firefox, Set 'body { opacity: 0 }' in CSS stylesheet
		jQuery('body').css('opacity', 1);
		bfa_equal_columns();
	}
};

I edited it to read:

WebFontConfig = {
	google: { families: [ 'Yanone Kaffeesatz:400,200', 'Gruppo', 'Droid Sans:normal,bold' ] },

	fontactive: function(fontFamily, fontDescription) {
		// Avoids 'FOUC' - Flash of unstyled content in Firefox, Set 'body { opacity: 0 }' in CSS stylesheet
		jQuery('body').css('opacity', 1);
		bfa_equal_columns();
	}
};

After saving I reloaded my site and it finally had the correct font, but it was not the right weight. The font displayed as a thin line instead of the bold font it should be. So then I reverted the WebFontConfig code back to the original code as shown above. I then went and reloaded my website and – shazam – the font flickered and then loaded correctly.

I then went to the Bytesforall Montezuma sample page and that also loaded correctly for the first time. So somehow after changing the code and getting the font to load (albeit not the right weight) it was then loading ok, but still with the flicker issue.

I then managed to get to a friends place and use their computer. They have Windows 8 running and had never used the IE before. I went to my website and the font was again not loading and looked the same as before. I then tried the Bytesforall Montezuma sample page and it flickered for a long while and then loaded correctly. I then reloaded my website and it also loaded correctly after a long flicker.

So this whole thing has me baffled. I am not experienced enough to understand what is going on with this and I have no idea about using jscript or any of that stuff. What I do see is an obvious issue with this font loading correctly. In any browser there seems to be a bothersome flicker and in IE it has real problems.

I really like the looks of this theme, but the font issue really gives me second thoughts about continuing with it. I didn’t have a problem with this until I just recently updated to the latest version of Montezuma. So perhaps I need to try and find the previous version and see what changed to cause this problem.

Also, I would be asking for help on the Bytesforall site, but I am currently in a country where they have blocked access to the support section. Any help is much appreciated.

OK, I’ve done some experimenting, and I think I found a solution. Can you give this a try?

What I did was go back to Google Fonts and looked for the font I was using on my site. In this case, I searched for Yanone Kaffeesatz because that’s the default in Montezuma.

When I found it, I checked the 200 and 400 weights because, again, that is the default font weights used by Montezuma.

I clicked the Use button, then verified the font weights in section 1. I then copied this line in section 3:

<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200' rel='stylesheet' type='text/css'>

Then I went to Montezuma Options > Head > Insert Code and pasted the above link tag into the Top field. I clicked Save changes, and that seemed to eliminate the flashing of the fonts in IE. Just as a test, I then removed the line, and the flashing came back.

CrouchingBruin, thanks for the code in your prior post. That helped eliminate flicker for me as well even in Chrome and Firefox. Good catch!