Results 1 to 3 of 3

Thread: how to make ie read media screen?

  1. #1
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default how to make ie read media screen?

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

    i make media screen to resize the image:
    Code:
    @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
    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.
    _____________________

    David Demetrius // davejob
    _____________________

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!--[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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

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

Bookmarks

Posting Permissions

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