IE 8 Display Issues, Education Theme

[suecline]

We just finished up a custom site on Education Pro for http://www.gses.org/about/profile/

The site looks beautiful in just about everything *except* IE 8 which, of course, is what the school computers use.

Can anyone help me with a css adjustment on this?

Here is a screenshot of what the site looks like in IE 8 at 640 x 480 but regardless of the resolution I set, the site really only looks correct in FF or Chrome: http://www.gses.org/wp-content/uploads/2014/08/scanForSue.jpg

The front page slider appears ok, this is only happening on inside images.

Any assistance would be deeply appreciated!

Thanks -

Sue

http://www.gses.org/about/profile/

[jbergen]

Hi Sue,

Sorry you have to deal with this IE8 bug! They're no fun. I found this article, which describes your exact problem. However, they don't have a perfect solution for your case.

After experimenting with a few of my sites and reading the comments following the article I mentioned above, my best guess is that you need to add "width: auto" to your CSS rule for the img tag. In your case, the fix would look like this:

style.css, line 1209:

img {
    height: auto;
    max-width: 100%;
    width: auto;
}

And it's even better to add this new rule to a custom CSS file so that you still have it if you update your theme. Let me know if you want help with that.

Finally, I don't know if you need this, but here's a link to a website that will show you screenshots of your site in IE8 so that you can get quick feedback as you're testing: http://www.browserstack.com/screenshots.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Just a quick follow-up:
I was testing one of my sites on an old PC running IE8, and I remembered your post. So I went ahead and used the developer tools to add width: auto; to the style.css. That was indeed the solution; the image proportions went back to normal!

Jamie

---

Jamie @ Ladebug Studios

[suecline]

Jamie,

Thank you very much for the help on this! I've gone ahead and added the modification but I'll have to wait until I'm at school tomorrow to see if it fixed the problem we were having.

I'm very interested in creating a custom css file - we've already had an update wipe out changes, but I'm not good enough with css (yet) to figure it out on my own. How would I do that? I suspect it's giving it a new name and calling it from elsewhere in the template, but hmmm...

Thanks -

Sue

[jbergen]

Hi Sue,

Great! I hope things look good for you tomorrow when you check it in IE8! (I think it should.)

Also, this video gives a very helpful step-by-step tutorial on how to make that custom CSS file.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[Author]

Posts