Home/ Questions/Q 8558589
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T15:50:49+00:00

Here’s some HTML: <iframe src=test.html style=width: 200px; height: 100px;></iframe> <iframe src=test.html style=width: 800px; height:

  • 0

Here’s some HTML:

<iframe src="test.html" style="width: 200px; height: 100px;"></iframe>
<iframe src="test.html" style="width: 800px; height: 100px;"></iframe>

The test.html page contains some CSS from an external file:

<link rel="stylesheet" type="text/css" href="style.css" />

And the stylesheet has:

@media all and (max-width: 600px) {
  body {background-color: red;}
}

The above is simplified, but enough to demonstrate the issue: Both pages are red, despite one of them clearly being wider than the other. Demonstration page

What gives?

(Note: Tested in IE and Chrome – Chrome was fine, with one frame red and the other white.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As you can read in this answer, Internet Explorer 9 supports CSS3 media queries, but not within frames when the CSS containing the media query is in an external file, so you should put your media query in the head of the test.html page. Previous IE versions don’t support media queries natively, but you could use a javascript library (see respond.js or css3-mediaqueries-js) to overcome this problem.

    • 0