Newbis
asked on
Sliding iframe in IE7
In testing a page in IE7 (using F12 key in IE9), I'm getting this tremendously weird effect where clicking on a link on a page embedded inside an iframe is causing the layout of the parent page to change. Intuitively, this shouldn't happen, when no JavaScript is involved.
To demonstrate, there are two pages. I have pasted the code for those pages below and also attached the files. The test case is this: Place the two files in a directory and use IE to open the main page (e.g., the one containing the iframe). Make sure that IE is in "IE7" mode. Then click the link that says "Click test." This has an href of "#" which should essentially do nothing (or at most, affect the content inside of the iframe). But instead, it causes the iframe to shift to the left and text outside the iframe ("Testing 1 2 3") to disappear.
I'm wondering if anyone can explain why this happens and offer a simple solution, preferrably CSS-based, that would prevent this from happening without affecting IE8+, Firefox, Chrome, or other recent browser.
The page that loads inside the iframe (which must be called "simple.html") is as follows:
The outer page is as follows:
To demonstrate, there are two pages. I have pasted the code for those pages below and also attached the files. The test case is this: Place the two files in a directory and use IE to open the main page (e.g., the one containing the iframe). Make sure that IE is in "IE7" mode. Then click the link that says "Click test." This has an href of "#" which should essentially do nothing (or at most, affect the content inside of the iframe). But instead, it causes the iframe to shift to the left and text outside the iframe ("Testing 1 2 3") to disappear.
I'm wondering if anyone can explain why this happens and offer a simple solution, preferrably CSS-based, that would prevent this from happening without affecting IE8+, Firefox, Chrome, or other recent browser.
The page that loads inside the iframe (which must be called "simple.html") is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<a href="#">Click test</a>
</body>
</html>
The outer page is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Frame Weirdness</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#region-main-box {
background: rgb(25, 255, 237); left: 220px; width: 200%; float: left; position: relative;
}
#region-post-box {
background: rgb(254, 25, 237); left: 50%; width: 100%; margin-left: -440px; float: left; position: relative;
}
#region-main-wrap {
background: rgb(254, 255, 23);
width: 50%; right: 100%; float: right; position: relative;
}
#region-pre {
background: rgb(25, 25, 230);
left: 220px; width: 220px; overflow: hidden; margin-left: -50%; float: left; position: relative;
}
#region-main-pad {
background: rgb(25, 95, 255);
margin: 0px 10px 0px 450px; overflow: hidden;
}
#region-pre {
background: rgb(255, 200, 190);
left: 220px; width: 220px; overflow: hidden; margin-left: -50%; float: left; position: relative;
}
#region-pre .block-region {
margin: 0px; padding: 0px; width: 220px; float: left;
}
</style>
</head>
<body>
<div id="region-main-box">
<div id="region-post-box">
<div id="region-main-wrap">
<div id="region-main-pad">
<div class="region-content">
<div class="resourcecontent resourcegeneral">
<iframe id="resourceobject" src="simple.html"></iframe>
</div>
</div>
</div>
</div>
<div id="region-pre" class="block-region">
<div class="region-content">
<div style="background-color: #e1e1e8" id="specialtoc">Testing 1 2 3. Testing 1 2 3.<br /><br /></div>
</div>
</div>
</div>
</div>
</body>
</html>
Last Comment
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Well fortunately, I did find a potential fix for it... I can replace # with something that I know isn't in the page such as #nogo. (There are a number of links that go to "#" and have some JavaScript with the onClick method.) But I have to do that for every single place and page where it may occur; that's why I was hoping to find some simple CSS hack that I could just put in one place.
By the way, IE7 is the furthest back I can go by pressing F12 in IE9. The F12 thing is very handy and makes it easy to test a few different options on just one machine. Is there some simple way to test IE6 other than booting up an old machine with it installed?
(I'm thinking of using spoon.net/browsers, but there's a download, and www.virustotal.com says that software contains Trojan/Refroso.adhx. Too bad, since that looked like a good option.)
By the way, IE7 is the furthest back I can go by pressing F12 in IE9. The F12 thing is very handy and makes it easy to test a few different options on just one machine. Is there some simple way to test IE6 other than booting up an old machine with it installed?
(I'm thinking of using spoon.net/browsers, but there's a download, and www.virustotal.com says that software contains Trojan/Refroso.adhx. Too bad, since that looked like a good option.)
I don't know of any IE6 emulation, and testing for obsolete browsers is not something I do. I consider it a waste of time trying to make old junk work in a modern world.
Cd&
Cd&
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Never got a response that really explains what's causing it, but I found the solution myself, which I've mentioned above. It affects at least IE6 as well as IE7, and the solution ended up being pretty simple, so I figured it's worth fixing.
Web Development
Web development includes all aspects of presenting content on intranets and the Internet, including delivery development, protocols, languages and standards, server software, browser clients, databases and multimedia generation.
77K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
ASKER