Forum Moderators: not2easy
I want to be able to dynamically load images into an Iframe on my page.
I set up the frame inside the div I want like this :
<Iframe name="imageload" src="picture1.jpg" align="center" width="450" height="450" frameborder="0" scrolling="auto"></iframe>
And I'm calling the frame from another div like this :
<a href="picture2.jpg" target="imageload">Pic1</a>
It works great in Firefox... the images resize automatically and the background color is transparent(shows the div background).
However...in IE it's a total mess! For one...the images don't resize, and I get horrible scrollbars! And also.. the iFrame background of white comes thru.
Is there a better way to do this?
Thanks so much. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div id="top_header">
<h1>TOP HEADER</h1>
</div>
<div id="sub_header">
<h1>SUB HEADER</h1>
</div>
<div id="container">
<div class="basic_row">
<!--example using differnt classes each column-->
<div class="two_col_left">
LEFT COLUMN USING DIFFERENT CLASS
<Iframe name="imageload" src="picture1.jpg" align="center" width="450" height="450" frameborder="0" scrolling="auto"></iframe>
</div>
<div class="two_col_right">
RIGHT COLUMN USING DIFFERENT CLASS
<br>
<a href="picture1.jpg" target="imageload">Pic1</a>
<br>
<a href="picture2.jpg" target="imageload">Pic2</a>
</div>
<div class="clear_float"></div>
</div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>
And here's the CSS:
===================
* {
margin: 0px;
padding: 0px;
}
body {
font: 10px Arial, Helvetica, sans-serif;
background: #ffffff;
color:#ffffff;
}
#top_header {
height:100px;
width:750px;
margin-left:auto;
margin-right:auto;
color:white;
background-color:#808080;
clear:both;
}
#top_header h1 {
font-size:24px;
}
#sub_header {
height:50px;
width:750px;
margin-left:auto;
margin-right:auto;
color:white;
background-color:#808080;
clear:both;
}
#sub_header h1{
font-size:24px;
}
#container {
width: 750px;
margin-left: auto;
margin-right: auto;
background:#2D3F80;
}
.basic_row {
clear: both;
}
.two_col_left
{
float: left;
background:#4F41AE;
width:500px;
height:500px;
text-align:center;
}
.two_col_right
{
float: left;
background:#008000;
width:250px;
height:500px;
}
.clear_float {
font-size: 0px;
line-height: 0px;
clear: both;
}
#footer {
color:white;
clear:both;
background:#808080;
height: 75px;
width: 750px;
margin-right: auto;
margin-left: auto;
}
Any help would be greatly appreciated! :)
I've tried the allowtransparency="true" in the iframe tag... and then set my body background-color to be transparent...
But no luck for me. IE shows the jpg's...but with that awful white background.
:(
It might be far more easy to control it all if you used javascript to do the dynamic part or otherwise dynamically generate the page server side (and then reload it all)
