IE8 not rendering correct responsive content

Question

The Style inspector of IE8 Developer tools shows that the @media queries have worked (respond.min.js and html5shiv) and the correct background images and div heights are taken from the css files appropriate to the @media queries

BUT ...

the Layout inspector shows a box with the wrong height. The web page itself displays the wrong background image in the wrong sized box.

The page displays properly in webkit browsers but not IE8.

It's a "Desktop first" responsive design: large.css is always loaded before small.css which is only loaded appropriate to @media query - and the background image and box IE8 chooses to display are those from large.css ...

... even though the IE8 Developer Tools' Style inspector shows the large bg image scored through and the small image url correctly chosen.

I've tried half a dozen or more CSS and JavaScript hacks to try to get IE8 to repaint the page; the DOCTYPE specifies HTML5 etc. etc. ... but still IE8 won't draw what's shown in the DOM.

[updated since original question ...]

The problem can be see at [URL edited] where, in IE8, Developer Tools you search for id="hero" when the screen size is small or medium. You'll see that:

• the Style inspector shows that the height is 200px
• the Layout inspector (and displayed page) shows height as 275px which is the size of the large screen in the CSS cascade

This suggests that the respond.js is simulating the @media queries correctly and selecting the correct css file for the screen width but that IE8 is not repainting the screen after the changes have been detected.

Answer 1

I doubt that this is going to be an answer for everyone, and I expect there's much discussion about this elsewhere, but this is my thinking and my conclusion:

• I shall alert IE8 visitors and XP visitors that the website is only viewable with more modern browsers that are available also on Windows XP but that it's probably not a wise move to continue with XP if they can, in any way, avoid it.
• Windows XP faces it's end-of-life cutoff; Microsoft will serve users with that operating system's final security update in April 2014 (this month). Is it responsible of me to encourage continued use of an OS with consequently increasing vulnerabilities?
• even though, like IE8, Windows XP remains a major presence, Google has long since dropped supporting IE8 for use with Google apps. One example to follow.
• it's taken several hours of my time to experiment this issue and it's still not clear what exactly is the cause or a workaround. That's my profit for this project severely compromised.
• it's not that hard to switch to Firefox, Chrome or Opera