Solved

Sliding iframe in IE7

Posted on 2013-01-05
6
560 Views
Last Modified: 2013-01-16
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:

<!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>			

Open in new window


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>

Open in new window

weird.zip
0
Comment
Question by:Newbis
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 

Author Comment

by:Newbis
ID: 38748053
PS...I should clarify that if you try it in another browser, the link is hard to see because of the colors used (they were just to make it easier to see the divs); in any case, that doesn't matter because the test case is with IE7.  (Also, I accidentally pasted the region-pre selector twice and gave it two different colors; you can take out the redundant style, as it has no bearing.)
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 500 total points
ID: 38748701
Basically IE7 is getting confused.  It assume that it should be linking to the current location on the inner page; and no longer is referencing the outer page code.

IE7 was the most defective browser that Microsoft ever delivered, and trying to make it behave is a lost cause.  I doubt there is any fix or workaround for this, and I have not seen any reference to this behavior.  Fortunately almost no one is using IE7. On my site my stats show < 1% of user are on IE7; there are more on IE6.

Cd&
0
 

Author Comment

by:Newbis
ID: 38749128
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.)
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38749389
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&
0
 

Accepted Solution

by:
Newbis earned 0 total points
ID: 38760128
I found one... http://www.browserstack.com/  ... cloud-based, and they have a free trial and lots of browsers and OSs, although performance is slow.  So, the issue happens in IE6 too.  Basically it seems to be related to using href="#" by itself.  Very strange, but as I said, putting some random text after the "#" seems to fix it.
0
 

Author Closing Comment

by:Newbis
ID: 38782011
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.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
object method as an event handler 8 77
Trying to use &NBSP to line up 3 rows 12 40
regular gmail; not g-suite. one label. 11 50
Natural height and jquery 6 41
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

710 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question