IE 8 Display Issues, Education Theme

Community Forums Forums Design Tips and Tricks IE 8 Display Issues, Education Theme

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  jbergen 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #121367

    suecline
    Member
    Post count: 13

    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/
    #121509

    jbergen
    Member
    Post count: 113

    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

    #121887

    jbergen
    Member
    Post count: 113

    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

    #122289

    suecline
    Member
    Post count: 13

    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

    #122334

    jbergen
    Member
    Post count: 113

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.