IFRAME not working in IE6 and IE7

donnie · 07-23-2008, 07:32 AM

i am having a problem with IFRAME not working in just IE6 and IE7, works fine on safri, firefox and ie8. ie8 is having problems with the css and not positioning the images correctly. i have found other people having the same trouble but the solution in all the forums i have checked so far has been removed... sorry i can't give a link to the page it is still under development and requires a user/password to view it at this time...here is a sample of the iframe code:

<div id="content_body"><br />
<div id="reviews_box">
<div id="reviews">
<div class="content_header"><iframe src="something.php" height="270" width="749"></iframe></div>
</div>
</div>
<div id="playnow_box">
<div id="playnow"><br />
</div>
</div>
<br />
</div>
<div id="clearthis_contentbody"> </div>

please help.... thanx

donnie · 07-23-2008, 11:59 AM

i know someone has heard of this problem and there is a fix for it...help me out here people please...
i had this question in another forum and they removed it...there seems to be something weird about talking about this problem for some reason unknown to me....hmmmm

i have a dead line to keep please help!! thanx

jnjc · 07-23-2008, 03:07 PM

You'll need to post some more information, you question is too vague. Can you put together a mock up page that demonstrates the issue ? You will have to outline exactly what the issue is to get help...

donnie · 07-23-2008, 03:55 PM

this demonstrates the problem, the iframe works in firefox but does not in ie6 and ie7, but works in ie8

(index.htm) HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="content_body"><br />
<div id="reviews_box">
<div id="reviews">
<div class="content_header"><iframe src="photo_upload/album.php" height="270" width="749"></iframe></div>
</div>
</div>
<div id="playnow_box">
<div id="playnow"><br />
</div>
</div>
<br />
</div>
<div id="clearthis_contentbody"> </div>
</div>
</body>
</html>

(style.css) CSS:

* {
margin: 0px;
padding: 0px;
}

body {
padding-top: 20px;
background-color: #000;
color: #aca9a9;
font-family: verdana, arial, sans-serif;
font-size: 10px;
text-align: center;
letter-spacing: 1px;
}

a {
color: #fff;
text-decoration: none;
}

a:hover {
color: #ea9a2e;
}

span {
display: none;
}

img {
border: none;
}

ul {
list-style-type: none;
}

li {
list-style-type: none;
}

p {
margin: 7px 0px 10px;
text-align: justify;
line-height: 12px;
}

.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
visibility: hidden;
}

#container {
margin: 0px auto;
text-align: left;
background: url('images/content_bgcolor.gif') #2f2e2e repeat-x 0px 0px;
border: #860b09 2px solid;

width:778px;
voice-family: "\"}\"";
voice-family:inherit;
width:774px;
}

#container {
padding: 0px;
}

#body_image {
margin: 0px -5px 0px 199px;
height: 428px;
width: 575px;
background: url('images/lexus.png') transparent no-repeat 100% -1px;
behavior: url(iepngfix.htc);
z-index: 1;
position: absolute;
overflow: hidden;
}

/* Page Header */

#page_header {
width: 774px;
height: 60px;
background: url('images/header_background.gif') repeat-x 0px 0px;
overflow: hidden;
}

#page_header h1 {
width: 700px;
height: 51px;
background: url('images/superb_motors.gif') no-repeat 42px 12px;
float: left;
}

/* Page Menu */

#page_menu {
margin-bottom: 20px;
width: 774px;
height: 30px;
background: url('images/menu_background.gif') repeat-x 0px 0px;
}

#page_menu ul {
height: 30px;
}

#page_menu li {
padding: 0px 18px 0px 12px;
height: 30px;
background: url('images/menu_list_bg.gif') no-repeat 12px 0px;
float: left;
}

#page_menu li a {
width: 123px;
height: 30px;
display: block;
overflow: hidden;
cursor: pointer;
z-index: 2;
position: absolute;
}

#page_menu .online a {
background: url('images/link_1.gif') no-repeat 50% 11px;
}

#page_menu .downloads a {
background: url('images/link_2.gif') no-repeat 50% 11px;
}

#page_menu .community a {
background: url('images/link_3.gif') no-repeat 50% 11px;
}

#page_menu .about a {
background: url('images/link_4.gif') no-repeat 50% 11px;
}

#page_menu li span {
width: 123px;
height: 30px;
display: block;
overflow: hidden;
}

#page_menu li a span {
display: none;
}

/* Page Forms */

#page_forms {
border-right: #860b09 2px solid;
float: left;
}

#page_forms input {
padding-top: 5px;
padding-bottom: 2px;
color: #c6c4c4;
background-color: #373837;
border: #5b5d5b 1px solid;
font-family: tahoma, arial, sans-serif;
font-size: 13px;
font-weight: bold;
}

#page_forms input.button {
padding: 0px;
border: none;
cursor: pointer;
}

/* User Login */

#userlogin_header {
border-width: 2px 0px;
border-color: #860b09 #000 #860b09;
border-style: solid;
}

#userlogin_header h2 {
width: 196px;
height: 29px;
background: url('images/userlogin_header.gif') no-repeat 50% 0%;
}

#userlogin {
height: 235px;
width: 196px;
overflow: hidden;
}

#userlogin form {
margin: 12px 0px 10px;
width: 196px;
text-align: center;
}

#userlogin form strong {
display: block;
width: 70px;
height: 24px;
margin-bottom: 3px;
float: left;
clear: left;
}

#field_username, #field_password {
display: block;
clear: both;
}

#button_enter {
margin: 0px auto;
width: 40px;
float: none;
clear: both;
display: block;
}

#field_username strong {
background: url('images/userlogin_login.gif') no-repeat 50% 6px;
}

#field_password strong {
background: url('images/userlogin_password.gif') no-repeat 50% 6px;
}

#userlogin input {
margin-right: 2px;
margin-bottom: 12px;
width: 122px;
float: right;
clear: right;
}

#userlogin input.button {
margin: 7px 0px;
width: 40px;
height: 18px;
float: none;
clear: both;
}

#userlogin_links {
padding: 10px 12px 0px;
border-top: #860b09 2px solid;
}

#userlogin_links a#register {
background: url('images/userlogin_register.gif') no-repeat 0px 0px;
display: block;
}

#userlogin_links a#notregister {
background: url('images/userlogin_notregister.gif') no-repeat 0px 0px;
display: block;
}

#userlogin_links a strong {
width: 170px;
height: 20px;
display: block;
cursor: pointer;
}

/* Site Search */

#sitesearch_header {
border-top: #860b09 2px solid;
}

#sitesearch_header h2 {
width: 196px;
height: 25px;
/*background: url('images/sitesearch_header.gif') no-repeat 50% 100%;*/
}

#sitesearch {
width: 196px;
border-bottom: #860b09 2px solid;
}

#sitesearch form {
margin: 12px 5px 20px;
width: 186px;
height: 25px;
clear: both;
overflow: hidden;
}

#sitesearch input {
padding: 2px 0px;
width: 154px;
float: left;
font-size: 12px;
}

#sitesearch input.button {
width: 24px;
height: 20px;
float: right;
}

/* Content Body */

#content_body {
clear: left;
float: left;
width: 774px;
}

#clearthis_contentbody {
width: 774px;
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
}

.content_entry {
padding: 23px 0px 0px;
}

.content_entry .thumbnail {
margin: 5px 0px 15px;
float: left;
border: #a09e9e 1px solid;
}

.content_entry .thumbnail img {
float: left;
}

.content_entry .entry_text {
padding-right: 15px;
width: 210px;
float: right;
text-align: justify;
}

.content_entry .entry_text h3 a{
padding-bottom: 5px;
color: #c71212;
font-size: 10px;
font-weight: normal;
}

/* Recent Reviews */

#reviews_box {
padding: 15px 10px;
float: left;
}

#reviews {
width: 378px;
}

#reviews .content_entry {
width: 378px;
}

/* Play Now */

#playnow_box {
padding: 15px 12px;
float: right;
}

#playnow {
width: 351px;
}

#playnow .content_entry {
width: 351px;
}

#playnow .content_entry .thumbnail {
margin-left: 3px;
}

#playnow .content_entry .entry_text {
padding-right: 10px;
width: 200px;
}

/* Page Footer */

#page_footer {
padding: 15px 10px;
color: #e5e0e0;
font-size: 12px;
text-align: center;
letter-spacing: 0px;
}

#page_footer a {
color: #e5e0e0;
text-decoration: underline;
}

#page_footer a:hover {
color: #bb1414;
}

AE7 · 07-23-2008, 11:07 PM

I am pretty aware of IE bugs, I know this one exists and I have seen it in action. Unfortunately, I have no fix for it, sorry..

EDIT: I am gonna keep checking around to find a fix...

AE7 · 07-23-2008, 11:40 PM

AHA!

I messed with it for about 20min...lol

Code:

body {
padding-top: 20px;
background-color: #000;
color: #aca9a9;
font-family: verdana, arial, sans-serif;
font-size: 10px;
text-align: center;
letter-spacing: 1px; <--Remove that
}

donnie · 07-24-2008, 01:59 AM

yes removing that bit of code does the trick, thanks!

07-23-2008, 07:32 AM	#1
donnie New Member Join Date: Jul 2008 Posts: 10	IFRAME not working in IE6 and IE7 i am having a problem with IFRAME not working in just IE6 and IE7, works fine on safri, firefox and ie8. ie8 is having problems with the css and not positioning the images correctly. i have found other people having the same trouble but the solution in all the forums i have checked so far has been removed... sorry i can't give a link to the page it is still under development and requires a user/password to view it at this time...here is a sample of the iframe code: <div id="content_body"><br /> <div id="reviews_box"> <div id="reviews"> <div class="content_header"><iframe src="something.php" height="270" width="749"></iframe></div> </div> </div> <div id="playnow_box"> <div id="playnow"><br /> </div> </div> <br /> </div> <div id="clearthis_contentbody"> </div> please help.... thanx Last edited by donnie; 07-23-2008 at 07:47 AM. Reason: additional code added

07-23-2008, 03:55 PM	#4
donnie New Member Join Date: Jul 2008 Posts: 10	CSS and HTML sample code that works in firefox and does not work in ie6 and ie7 this demonstrates the problem, the iframe works in firefox but does not in ie6 and ie7, but works in ie8 (index.htm) HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="content_body"><br /> <div id="reviews_box"> <div id="reviews"> <div class="content_header"><iframe src="photo_upload/album.php" height="270" width="749"></iframe></div> </div> </div> <div id="playnow_box"> <div id="playnow"><br /> </div> </div> <br /> </div> <div id="clearthis_contentbody"> </div> </div> </body> </html> (style.css) CSS: * { margin: 0px; padding: 0px; } body { padding-top: 20px; background-color: #000; color: #aca9a9; font-family: verdana, arial, sans-serif; font-size: 10px; text-align: center; letter-spacing: 1px; } a { color: #fff; text-decoration: none; } a:hover { color: #ea9a2e; } span { display: none; } img { border: none; } ul { list-style-type: none; } li { list-style-type: none; } p { margin: 7px 0px 10px; text-align: justify; line-height: 12px; } .clearthis { margin : 0px; height : 1px; clear : both; float : none; font-size : 1px; line-height : 0px; overflow : hidden; visibility: hidden; } #container { margin: 0px auto; text-align: left; background: url('images/content_bgcolor.gif') #2f2e2e repeat-x 0px 0px; border: #860b09 2px solid; width:778px; voice-family: "\"}\""; voice-family:inherit; width:774px; } #container { padding: 0px; } #body_image { margin: 0px -5px 0px 199px; height: 428px; width: 575px; background: url('images/lexus.png') transparent no-repeat 100% -1px; behavior: url(iepngfix.htc); z-index: 1; position: absolute; overflow: hidden; } /* Page Header / #page_header { width: 774px; height: 60px; background: url('images/header_background.gif') repeat-x 0px 0px; overflow: hidden; } #page_header h1 { width: 700px; height: 51px; background: url('images/superb_motors.gif') no-repeat 42px 12px; float: left; } / Page Menu / #page_menu { margin-bottom: 20px; width: 774px; height: 30px; background: url('images/menu_background.gif') repeat-x 0px 0px; } #page_menu ul { height: 30px; } #page_menu li { padding: 0px 18px 0px 12px; height: 30px; background: url('images/menu_list_bg.gif') no-repeat 12px 0px; float: left; } #page_menu li a { width: 123px; height: 30px; display: block; overflow: hidden; cursor: pointer; z-index: 2; position: absolute; } #page_menu .online a { background: url('images/link_1.gif') no-repeat 50% 11px; } #page_menu .downloads a { background: url('images/link_2.gif') no-repeat 50% 11px; } #page_menu .community a { background: url('images/link_3.gif') no-repeat 50% 11px; } #page_menu .about a { background: url('images/link_4.gif') no-repeat 50% 11px; } #page_menu li span { width: 123px; height: 30px; display: block; overflow: hidden; } #page_menu li a span { display: none; } / Page Forms / #page_forms { border-right: #860b09 2px solid; float: left; } #page_forms input { padding-top: 5px; padding-bottom: 2px; color: #c6c4c4; background-color: #373837; border: #5b5d5b 1px solid; font-family: tahoma, arial, sans-serif; font-size: 13px; font-weight: bold; } #page_forms input.button { padding: 0px; border: none; cursor: pointer; } / User Login / #userlogin_header { border-width: 2px 0px; border-color: #860b09 #000 #860b09; border-style: solid; } #userlogin_header h2 { width: 196px; height: 29px; background: url('images/userlogin_header.gif') no-repeat 50% 0%; } #userlogin { height: 235px; width: 196px; overflow: hidden; } #userlogin form { margin: 12px 0px 10px; width: 196px; text-align: center; } #userlogin form strong { display: block; width: 70px; height: 24px; margin-bottom: 3px; float: left; clear: left; } #field_username, #field_password { display: block; clear: both; } #button_enter { margin: 0px auto; width: 40px; float: none; clear: both; display: block; } #field_username strong { background: url('images/userlogin_login.gif') no-repeat 50% 6px; } #field_password strong { background: url('images/userlogin_password.gif') no-repeat 50% 6px; } #userlogin input { margin-right: 2px; margin-bottom: 12px; width: 122px; float: right; clear: right; } #userlogin input.button { margin: 7px 0px; width: 40px; height: 18px; float: none; clear: both; } #userlogin_links { padding: 10px 12px 0px; border-top: #860b09 2px solid; } #userlogin_links a#register { background: url('images/userlogin_register.gif') no-repeat 0px 0px; display: block; } #userlogin_links a#notregister { background: url('images/userlogin_notregister.gif') no-repeat 0px 0px; display: block; } #userlogin_links a strong { width: 170px; height: 20px; display: block; cursor: pointer; } / Site Search / #sitesearch_header { border-top: #860b09 2px solid; } #sitesearch_header h2 { width: 196px; height: 25px; /background: url('images/sitesearch_header.gif') no-repeat 50% 100%;/ } #sitesearch { width: 196px; border-bottom: #860b09 2px solid; } #sitesearch form { margin: 12px 5px 20px; width: 186px; height: 25px; clear: both; overflow: hidden; } #sitesearch input { padding: 2px 0px; width: 154px; float: left; font-size: 12px; } #sitesearch input.button { width: 24px; height: 20px; float: right; } / Content Body / #content_body { clear: left; float: left; width: 774px; } #clearthis_contentbody { width: 774px; margin : 0px; height : 1px; clear : both; float : none; font-size : 1px; line-height : 0px; overflow : hidden; } .content_entry { padding: 23px 0px 0px; } .content_entry .thumbnail { margin: 5px 0px 15px; float: left; border: #a09e9e 1px solid; } .content_entry .thumbnail img { float: left; } .content_entry .entry_text { padding-right: 15px; width: 210px; float: right; text-align: justify; } .content_entry .entry_text h3 a{ padding-bottom: 5px; color: #c71212; font-size: 10px; font-weight: normal; } / Recent Reviews / #reviews_box { padding: 15px 10px; float: left; } #reviews { width: 378px; } #reviews .content_entry { width: 378px; } / Play Now / #playnow_box { padding: 15px 12px; float: right; } #playnow { width: 351px; } #playnow .content_entry { width: 351px; } #playnow .content_entry .thumbnail { margin-left: 3px; } #playnow .content_entry .entry_text { padding-right: 10px; width: 200px; } / Page Footer */ #page_footer { padding: 15px 10px; color: #e5e0e0; font-size: 12px; text-align: center; letter-spacing: 0px; } #page_footer a { color: #e5e0e0; text-decoration: underline; } #page_footer a:hover { color: #bb1414; }

07-23-2008, 11:40 PM	#6
AE7 Bronze Member Join Date: Jul 2008 Posts: 53	AHA! I messed with it for about 20min...lol Code: body { padding-top: 20px; background-color: #000; color: #aca9a9; font-family: verdana, arial, sans-serif; font-size: 10px; text-align: center; letter-spacing: 1px; <--Remove that }

07-24-2008, 01:59 AM	#7
donnie New Member Join Date: Jul 2008 Posts: 10	yes that works thank you yes removing that bit of code does the trick, thanks!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

07-23-2008, 11:59 AM	#2
donnie New Member Join Date: Jul 2008 Posts: 10	i know someone has heard of this problem and there is a fix for it...help me out here people please... i had this question in another forum and they removed it...there seems to be something weird about talking about this problem for some reason unknown to me....hmmmm i have a dead line to keep please help!! thanx

07-23-2008, 03:07 PM	#3
jnjc Super Moderator Join Date: Jun 2008 Posts: 493	You'll need to post some more information, you question is too vague. Can you put together a mock up page that demonstrates the issue ? You will have to outline exactly what the issue is to get help... __________________ www.solasit.com.au Free Online Competitions

07-23-2008, 11:07 PM	#5
AE7 Bronze Member Join Date: Jul 2008 Posts: 53	I am pretty aware of IE bugs, I know this one exists and I have seen it in action. Unfortunately, I have no fix for it, sorry.. EDIT: I am gonna keep checking around to find a fix... Last edited by AE7; 07-23-2008 at 11:33 PM.