The effectiveness of your code implementation depends on the structure you have set up (and since no code examples were provided, it's difficult to pinpoint the exact issue). However, a potential problem could be that the media query greater than 960 doesn't trigger in IE8 if the mobile layout is defined first. For example:
body { // Default width for all browsers
width: 300px;
}
@media only screen and (min-width : 960px) { // Only for desktop support
body {
width: 960px;
}
}
(It's recommended to have a 'default' css style without a media query for browsers lacking support for them.)
One solution could be setting the 960px wide layout as default:
body { // Default width for all browsers
width: 960px;
}
@media only screen and (min-width : 1400px) { // Widescreen monitors
body {
width: 1400px;
}
}
@media only screen and (max-width : 300px) { // Mobile layout
body {
width: 300px;
}
}
Remember to define styles for more than just the body element, but this should provide an outline. If the issue persists, sharing some of your CSS code would help us analyze further.