none
@media Unknown on IE11

    Question

  • The media querys aren't working for my web page aren't working in IE11. So I thought I would create a simple test HTML page. It still fails in IE11 - even though it works in Chrome and Firefox and on Android browsers.

    Here is the code:

    <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'><html>
    <head>
    <title>Foo</title>
    <style type="text/css">
    
    @media (min-width: 640px) {
      h1 {font-size:56px;color:#0f0;}
    }
    
    @media (max-width: 640px) {
      h1 {font-size:9px;color:#00f;}
    }
    </style>
    </head>
    
    <body>
    <h1>Test</h1>
    </body>
    </html>

    IE just ignores all styling and inspecting the code it has replaced the style in the inspection window with:

    <STYLE type=text/css>
    @media Unknown    
    {
    H1 {
    	FONT-SIZE: 56px; COLOR: #0f0
    }
    H1 {
    	FONT-SIZE: 9px; COLOR: #00f
    }
    
    }
    </STYLE>

    I have even tried:

    @media all and (min-width: 640px) {
      h1 {font-size:56px;color:#0f0;}
    }
    
    @media all and (max-width: 640px) {
      h1 {font-size:9px;color:#00f;}
    }

    ...and also....

    @media all (min-device-width: 640px) {
      h1 {font-size:56px;color:#0f0;}
    }
    
    @media (max-device-width: 640px) {
      h1 {font-size:9px;color:#00f;}
    }

    ...and...

    @media all (min-width: 640px) and (max-width:1920) {
      h1 {font-size:56px;color:#0f0;}
    }
    
    @media all (max-width: 640px) {
      h1 {font-size:9px;color:#00f;}
    }

    The PC I am testing the code on has two screens attached.... is this why IE can't determine the Media??

    Very annoying.  If anyone can shed some light on why the CSS won't work on IE, I would be very grateful.

    Wednesday, December 13, 2017 5:21 PM

Answers

  • Hi,

    f12>Emulation tab will tell you which IE Emulation mode (aka documentMode) your IE is using and how it was established. eg. IE7 - "Show intranet sites in compatibility view setting".

    see caniuse.com for tables of feature interoperability of CSS 3 features... I think @media is supported in IE10 (emulation) and higher.

    Your test page shows an invalid html4 doctype declaration.... If you are developing for an intranet site or targeting IE8, IE11 Emulation will use Quirks mode.(IE5 emulation)...

    To future proof your hypertext assets, use the html5 doctype.

    To manage legacy intranet websites that your want to continue to use without making code changes to modify the markup and scripting, your company can deploy Enterprise Site Mode Lists.

    If possible include links to your website with your question... If it is an internal website (intranet), mention as such in your questions.

    Regards.


    Rob^_^

    Thursday, December 14, 2017 12:49 AM

All replies

  • Hi,

    f12>Emulation tab will tell you which IE Emulation mode (aka documentMode) your IE is using and how it was established. eg. IE7 - "Show intranet sites in compatibility view setting".

    see caniuse.com for tables of feature interoperability of CSS 3 features... I think @media is supported in IE10 (emulation) and higher.

    Your test page shows an invalid html4 doctype declaration.... If you are developing for an intranet site or targeting IE8, IE11 Emulation will use Quirks mode.(IE5 emulation)...

    To future proof your hypertext assets, use the html5 doctype.

    To manage legacy intranet websites that your want to continue to use without making code changes to modify the markup and scripting, your company can deploy Enterprise Site Mode Lists.

    If possible include links to your website with your question... If it is an internal website (intranet), mention as such in your questions.

    Regards.


    Rob^_^

    Thursday, December 14, 2017 12:49 AM
  • Hi Rob, thanks for the reply.

    Utimately the code will be on a live website (not intranet).

    https://www.excelautoparts.com/testie.html

    I have changed the doctype to HTML 5.

    IE11 no longer shows 'Unknown' but the CSS still seems to be ignored.

    I read somewhere that you can't have two declarations for the same element. But that doesn't seem to make sense. ??

    (After changing the doctype the Document mode in the Emulation tab has changed from IE7 to Edge).


    Thursday, December 14, 2017 10:12 AM
  • <!doctype html>
    <html lang="en">
    <head>
    <title>Foo</title>
    <style type="text/css">
    
    @media all and (min-width: 640px) {
      h1 {font-size:56px;color:#0f0;}
    }
    
    @media all and (max-width: 640px) {
      h1 {font-size:9px;color:#00f;}
    }
    </style>
    </head>
    
    <body>
    <h1>Test</h1>
    </body>
    </html>
    Thursday, December 14, 2017 10:50 AM
  • All works now.

    You were right Rob - running the code locally was forcing IE11 in to IE7 by default - REGARDLESS of the doctype specified.

    Running it over the web with the above code, works fine.

    Thank you for your help.

    Thursday, December 14, 2017 10:52 AM