Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

"seamless" Iframe or regular frames 1

Status
Not open for further replies.

endoflux

Technical User
Joined
Aug 6, 2001
Messages
227
Location
US
All I'm trying to load different content in the bottom half of my page based on a menu click in the top half of my page...but I want them to appear as 1 seamless page, and the background images need to line up perfectly. All options I've tried for frames have left me with a noticeable space between frames or an 'indented' box where the iframe is-- any idea how I can accomplish this?

Thanks!
 
This is pretty seamless.
Code:
<html>
<head>

<style type="text/css">
<!--
iframe  {
	border: 0px;
	margin: 0px;
	padding:  0px;
}

#frame1 {
	display:block;
	width:  100%;
}

#frame2 {
	display:block;
	width:  100%;
}
-->
</style>

</head>
<body>
<iframe id="frame1" src="[URL unfurl="true"]http://google.com"></iframe>[/URL]
<iframe id="frame2" src="[URL unfurl="true"]http://google.com"></iframe>[/URL]
</body>
</html>

M. Brooks
 
That's a damned good start...but i still have a line between the two frames. The link below works in Firefox, but not in IE; I'll have to figure out why later...but if you can get it to show up, note the backgound-colored line-- ideas?


...and the code I stole and modified:

<html>
<head>
<style type="text/css">
<!--
iframe {
border: 0px;
margin: 0px;
padding: 0px;
}
#frame1 {
display:block;
width: 1024;
height: 212;
}
#frame2 {
display:block;
width: 1024;
height: 556
}
-->
</style>
</head>
<body bgcolor=5C5D60>
<center>
<iframe id="frame1" src="top.html" scrolling="no" marginwidth="0" marginheight="0"></iframe>
<iframe id="frame2" src="fhome.html" scrolling="no" marginwidth="0" marginheight="0"></iframe>
</center>
</body>
</html>
 
Here you go!
Code:
<html>
<head>

<style type="text/css">
<!--
iframe  {
    border: 0px;
    margin: 0px;
    padding:  0px;
}

#frame1 {
    display:block;
    width:  100%;
}

#frame2 {
    display:block;
    width:  100%;
}
-->
</style>

</head>
<body bgcolor="#5C5D60">
<iframe id="frame1" src="[URL unfurl="true"]http://google.com"[/URL] frameborder="0" marginheight="0"></iframe>
<iframe id="frame2" src="[URL unfurl="true"]http://google.com"[/URL] frameborder="0" marginheight="0"></iframe>
</body>
</html>

M. Brooks
 
I'm confused...how is that different from what I had? For whatever reason, even when I copy your code directly and just change the page references to my html files, I still get that space

I really do appreciate your help, by the way...
 
This is the major difference. And in IE or Firefox I don't see the bar.
Code:
<iframe id="frame2" src="[URL unfurl="true"]http://google.com"[/URL] [b]frameborder="0"[/b] marginheight="0"></iframe>

M. Brooks
 
Got it!

My mistake-- I had placed each of my src background images in tables to explicitely control their size and location...by haveing a </table> and then a <table>, they couldn't be 'seamless'. Worked like a charm after that...thanks again!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top