how to make ie read media screen?

[davelf]

i stuck in my new project because of the scumbag IE browser
My new project

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?