Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why web page loaded in iFrame has no css applied in Internet Explorer 7

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?

like image 871
gotqn Avatar asked Dec 06 '12 13:12

gotqn


2 Answers

Try

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 

I solved using this.

like image 147
Jigar Pandya Avatar answered Sep 29 '22 13:09

Jigar Pandya


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:

With a style tag

<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

With a reference to a style sheet

<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

like image 41
James A Mohler Avatar answered Sep 29 '22 13:09

James A Mohler