Muguerza
05-31-2009, 05:38 AM
Hey all,
Thanks to Fang I've figured out the problem I was having with transparency. My problem in IE now, is that the IFrame does not follow the flow of the inline elements. IN FF when I resize the window the frame adjusts to within the borders of the DIV i've placed it in. In IE it floats above the DIV.
Again Here is my code:
<body>
<div id="border">
<h1><img src="Images/Muguerza-Webpage-logo-illustration.gif" alt="logo"/></h1>
<p id="iframe">
<iframe name="frameMe" src="Images/Illustration/Annabella.html" height="700px" width="900px" frameborder="0" scrolling="no"
ALLOWTRANSPARENCY="true"></iframe>
</p>
<p id="center">
<a href="Images/Illustration/Annabella.html" target="frameMe">
<img src="Images/Illustration/AnnaBellaThumbnails.gif" title="Annabella" alt="Annabella"/>
</a>
<a href="Images/Illustration/CootiesCdrelease.html" target="frameMe">
<img src="Images/Illustration/CootiesCdreleaseThumbnail.gif" title="The Cooties" alt="The Cooties"/>
</a>
</p>
</div>
</body>
And this Is the CSS I'm using for the Div that borders the Iframe and it's thumbnails:
#border {
font-size: 16px
font-family:Arial,Myriad Pro,Verdana,Helvetica, sans-serif;
border-color: white;
border-width: 1px;
border-style: solid;
padding-left: 20px;
padding-right: 20px;
padding-top: 0px;
padding-bottom: 40px;
margin: 140px;
background-image: url(images/transperancy.png)
}
#iframe {
position: relative;
border-top: 0px;
margin-top: 0px;
margin-bottom: 10px
text-align: center;
}
I'm basically trying to center position the iframe above a group of thumbnails. So that When the page is rezised the Iframe adjusts in position to the div. Again this works fine in FF but not IE.
Thanks to Fang I've figured out the problem I was having with transparency. My problem in IE now, is that the IFrame does not follow the flow of the inline elements. IN FF when I resize the window the frame adjusts to within the borders of the DIV i've placed it in. In IE it floats above the DIV.
Again Here is my code:
<body>
<div id="border">
<h1><img src="Images/Muguerza-Webpage-logo-illustration.gif" alt="logo"/></h1>
<p id="iframe">
<iframe name="frameMe" src="Images/Illustration/Annabella.html" height="700px" width="900px" frameborder="0" scrolling="no"
ALLOWTRANSPARENCY="true"></iframe>
</p>
<p id="center">
<a href="Images/Illustration/Annabella.html" target="frameMe">
<img src="Images/Illustration/AnnaBellaThumbnails.gif" title="Annabella" alt="Annabella"/>
</a>
<a href="Images/Illustration/CootiesCdrelease.html" target="frameMe">
<img src="Images/Illustration/CootiesCdreleaseThumbnail.gif" title="The Cooties" alt="The Cooties"/>
</a>
</p>
</div>
</body>
And this Is the CSS I'm using for the Div that borders the Iframe and it's thumbnails:
#border {
font-size: 16px
font-family:Arial,Myriad Pro,Verdana,Helvetica, sans-serif;
border-color: white;
border-width: 1px;
border-style: solid;
padding-left: 20px;
padding-right: 20px;
padding-top: 0px;
padding-bottom: 40px;
margin: 140px;
background-image: url(images/transperancy.png)
}
#iframe {
position: relative;
border-top: 0px;
margin-top: 0px;
margin-bottom: 10px
text-align: center;
}
I'm basically trying to center position the iframe above a group of thumbnails. So that When the page is rezised the Iframe adjusts in position to the div. Again this works fine in FF but not IE.