I have a web page that has a lot of CSS in it. I use an iframe to load it. It is working perfectly on almost each browser, but on IE version 7 no CSS is applied at all. When I open the page in a separate tab under IE7 it works, but it iframe even a line of CSS is not applied?
Can anyone give me some tips from where to start the searching?
Any helpwill be appreciated.
EDIT: The main web page has the following doc-type:
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
I am not sure if it is true, but I have read that the strict doc-type could cause problems with iframe on older browsers. Could this broke the css of the frame?
Try
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
I solved using this.
CSS information does not cascade into iframe. You need to add CSS references onto the page that is put into the iframe. Some of the ways to get CSS into a page include:
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
With iframes, you would have to copy this over and over again. (Not recommended)
Ref: http://www.w3schools.com/tags/tag_style.asp
<link rel="stylesheet" type="text/css" href="theme.css">
With iframes you would have to copy just link part into your <head>
area of the page
Ref: http://www.w3schools.com/tags/tag_link.asp
This is not a IE7 thing. This is for all browsers that support CSS
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With