Geek Answers Handbook

Why a webpage loaded in iFrame does not use css in Internet Explorer 7

I have a webpage with lots of CSS. I use iframe to load it. It works fine in almost every browser, but in IE version 7 no CSS is applied at all. When I open the page in a separate tab in IE7, it works, but iframe does not even use the CSS line?

Can someone give me some tips on where to start the search?

Any help would be appreciated.

EDIT: The main web page has the following document type:

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"

I'm not sure if this is true, but I read that a strict doc type can cause iframe problems in older browsers. Could this break the css framework?

+7
source share
3 answers

Try

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

I decided to use this.

+3
source

CSS information is not cascaded in an iframe. You need to add CSS links to the page placed in the iframe. Some of the ways to get CSS on a page are:

With style tag

 <style type="text/css"> h1 {color:red;} p {color:blue;} </style>

In an iframe, you have to copy this over and over again. (Not recommended)

Link: http://www.w3schools.com/tags/tag_style.asp

With reference to the stylesheet

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

In an iframe, you will only need to copy the link to the <head> on the page

Link: http://www.w3schools.com/tags/tag_link.asp

This is not IE7. This is for all browsers that support CSS.

+3
source

1) I hope that iframe tags are closed correctly

 <IFRAME SRC='gnagna.htm' STYLE='width:100%;'></IFRAME>

set width using css or

 <iframe src="somepage.htm" frameborder=0 scrolling="auto" width="800" height="600"> This browser can not use IFRAME. </iframe>

2) you can try using these

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

or

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

3)

You can get Ie7 compatibility by adding this to the chapter section.

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

or

a faster way is to add the following line to .htaccess

 Header set X-UA-Compatible IE=EmulateIE7

4)

or you can apply CSS style for html for ie7 / ie6

 .somediv { height:30px; *height:30px; //hack for ie7 _height:30px; //hack for ie6 }

hope this helps

+2
source

More articles:


All Articles