When a web page is loaded within a frame, not all of its styles are applied. The specific stylesheet used for the div elements is as follows:
div.super{
position:absolute;
font-family: Helvetica;
font-size: 0.75em;
padding:4px;
overflow:auto;
width:280px;
min-height:110px;
background:rgb(219, 142, 83);
box-shadow: 10px 10px 5px rgb(150, 142, 155);
border:2px solid rgb(219, 142, 83);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
This stylesheet is linked using the following code:
<link href="/Styles/hart_divs.css" type="text/css" rel="stylesheet" />
Despite my target browser being IE 9 (as per corporate policy standard), it fails to apply certain styles like box-shadow and border-radius when viewed within a frame. Strangely, all styles are applied properly if the same page is opened in a new window. However, Firefox seems to apply all styles even within a frame.
Is there a way to enforce IE9 to apply shadow and rounded corners within a frame?
Additionally, the doctype of my document is:
<!DOCTYPE html>
UPDATE: It appears that something in the frameset is causing IE9 to default to 'Quircks (Page Default)' Document mode. Switching into IE9 mode resolves the issue and applies the stylesheet correctly.
The main frameset document was lacking a doctype declaration, which I have now added. Despite including the meta tag
<meta http-equiv="X-UA-Compatible" content="IE=9" />After investigating further, the real question becomes how to force IE9 out of IE7 mode?
Unfortunately, the information available at this link did not provide a solution.