Jacked up in IE 8 & 9…

[kelleychambers]

Hey Jason,

My client who is a Winblows user “kindly” let me know that his site is NOT resolving properly in IE8 & 9; primarily the landing page. I haven’t anyway to test to see what he’s talking about as I’m a Mac user. So, I have a couple of questions.
1) Does Alyeska render as it should in those two browsers?
2) Do you have the ability to see what he’s talking about?
3) Can you tell me where the problem lies? Is it my CSS or something else with the framework?

Thank you so very much! I greatly appreciate it.

Topic

[kelleychambers]

Via BrowserShots I was able to see how awful it is. That said, I can’t see where the problem lies just that it doesn’t render as it should. Thus, I really DO need your help.

[Jason Bobich]

Hello Kelley,

The theme supports IE8+. Things should look great in IE9 and IE10. In IE8, things should look fine, but you start to lose some of the subtle things like sharper text rendering, and other things that CSS3 brings us like rounded corners, gradients, etc.

Internet Explorer 8

When I look at your site, the issues I see seem to stem from your content below the slider:

Internet Explorer 8

Internet Explorer 9

And then when I look at your source, I think that your issue comes from putting invalid markup in there by mistake. You’re opening all kinds of <h3> tags and not closing them.

For example, let’s take a look at your first couple of columns:

The tags I’ve put the red boxes around should all be closing h3 tags like </h3> so you get:

<h3>Some Title</h3>

Also, you want to avoid getting those <br /> tags in your h3 tags; this is also invalid, while not a crucial thing you need to worry about. I assume you’re not putting these in, and they are coming from WordPress automatic formatting. When you write your HTML you can avoid this by making sure the opening and closing h3 tags are on the same line. In my Layout Builder, you can also uncheck the box that says “Apply WordPress automatic formatting” next to the content box.

============

With all this many modern browsers can figure out what you were trying to do, and display accordingly. However, IE8/IE9 cannot. There are many quirks about these older IE browsers that you’re going to have learn about in order to be making websites for clients. Being a Mac user isn’t going to quite cut it, you know? Trust me, we are all mac users. 😉

You need to have a way a test in IE and a way to debug; it’s just the reality of the industry. If having actual PC’s to test on is not currently feasible, the next best thing is install a virtual desktop application like Parallels Desktop. Essentially, you can set it up where you just open it as a program on your Mac, and you have Windows running in a little application. The IE10 browser has a feature to set it to different IE versions for developer testing, but I have found this isn’t all that accurate. The program IETester is a great tool for viewing your site on Windows in different older versions of IE that’s been around forever.

[Author]

Replies