Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Location
    Seattle area
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Site won't load in IE

    I'm currently developing a website and having trouble getting it to load in older versions of IE. I can't determine if it's a coding issue on my part or something on the back-end in server settings. I realize the site is built in HTML5, so older browsers would tend to be "confused" but my IE9 browser at work won't even load the page. Browser shots shows it appears to work in IE10 and IE9, but not 8 or 7. I haven't had any troubles with it loading in Chrome, Firefox, or Safari.

    The site (still under development) is located here:
    http://www.seattlehumane.org/walk/index.html

    Any ideas on what could be causing this and suggested remedies?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Interesting one.

    Your site displays fine for me in IE9. It displays only the pale blue background in IE8 and IE7 (although in fact it's OK setting the browser mode in IE9 to IE8).

    However, the html has loaded correctly, it's just that all the elements have display:none set. Amending this in developer tools results in elements displaying as expected.

    This leads me to your css. The problem I think is how you've used media queries. Reading your walkstyles.css, you're setting the base styles for your mobile layout, and then applying different styles for larger devices moving down the page. This works fine in IE9, but not in IE8 or less which do not support media queries at all - so they're not parsing the subsequent css at all, and no elements are displayed. This doesn't quite explain the issue, because in that case I'd expect the 'mobile' version of the site to be displayed, and it isn't (although if I copy your page to create a test version, it is...). It's almost as if a few elements of your media query styles are being parsed.

    Anyway, the solution I think is to rework your css so that the 'desktop' styles are the default ones (and hence IE7 and 8 will parse them correctly) rather than the mobile styles, and apply the mobile style using media queries.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •