how to make ie read media screen?

[davelf]

i stuck in my new project because of the scumbag IE browser
My new project (http://www.davejob.com/scroll)

i make media screen to resize the image:


@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.bg-size{
width:3072px;
}
}
@media screen and (min-device-width : 1240px) and (max-device-width : 1360px) {
.bg-size{
width:3780px;
}
}
@media screen and (min-device-width : 1360px) and (max-device-width : 1440px) {
.bg-size{
width:4320px;
height:2700px;
}
}



This is the html image code


<div style="position:absolute; z-index:1;"><img src="images/background-master.jpg" class="bg-size"></div>


Work in most browser except IE.

Any suggestion for my problem here, thank you so much.:(

[jscheuer1]

I doubt it's the

@media screen

that's the problem, rather the qualifying properties that aren't supported. They might be in IE 9, perhaps even IE 8, but I doubt it - Have you tested in those browsers?

If they are, you could try css expressions in a stylesheet that only gets read by IE 7 and less, because css expressions will throw an error in IE 8.

Anyways, as I said, IE did allow the use of javascript expressions in css. But that stopped with IE 8. So unless what you have in your post is supported in IE 8 and up or there is a MS specific way to do that in css, you will probably have to use plain javascript. Something like:


<!--[if IE]>
<script type="text/javascript">
(function(){
var w = screen.width, bgw = w > 767 && w < 1025? 3072 : w > 1239 && w < 1361? 3780 : w > 1359 && w < 1441? 4320 : '', s;
if(bgw){
s = '<style type="text/css" media="screen">.bg-size { width: ' + bgw + 'px;' + (bgw === 4320? 'height: 2700px;' : '') + '}<\/style>';
document.write(s);
}
})();
</script>
<![endif]-->

Put that after the link to the stylesheet that has that other stuff in it. The script can be made external.

[traq]

IE 9 is the first version of IE to support media queries at all. What version of IE are you having this problem in?