I've been having some problems with IE6 (I've only tested it in that version of IE so far) messing up my code, and this is, so far, the only one I have yet to find a solution for.
I'm using CSS to make my page centered and 80% of the available space in width, with a 200px sidebar on the left side. On the other side of the sidebar, I'm trying to put an iframe. While this displays properly in Firefox, and, at first sight, in IE, when I refresh the browser, the iframe spreads out until it reaches the page margin and therefore gets cut off. However, if you try and resize the browser window, the iframe goes back to it's normal porportions.
I've isolated this problem to the fact that I'm using percentage widths for the width of the iframe. My coding (slightly edited to remove useless information, like links), is below:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Penguin~</title>
<style type="text/css">
body{
font: 1em garamond, verdena, arial;}
a{
color:#000000;
font-weight: bold;
text-decoration:none;}
a:hover{
color:#000000;
text-transform: uppercase;}
.sidebar{
font: 1.5em garamond, verdena, arial;}
#centerme{
background: url(background.png) no-repeat;
width: 80%;
margin: 0px auto;
position: absolute;
left: 50%;
margin-left: -40%;
overflow: hidden;
border: 1px solid #000000}
#sidebar{
float: left;
width:210px;
padding-bottom: 5000px;
margin-bottom: -5000px; }
#actualpage{
padding-left: 210px;
padding-bottom: 5000px;
margin-bottom: -5000px;}
</style></head>
<body>
<div id="centerme">
<div id="sidebar">
<div class="sidebar" align=center>sidebar stuff
</div>
</div>
<div id="actualpage">
<iframe src="test.html" width="90%" height="350px"></iframe>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Penguin~</title>
<style type="text/css">
body{
font: 1em garamond, verdena, arial;}
a{
color:#000000;
font-weight: bold;
text-decoration:none;}
a:hover{
color:#000000;
text-transform: uppercase;}
.sidebar{
font: 1.5em garamond, verdena, arial;}
#centerme{
background: url(background.png) no-repeat;
width: 80%;
margin: 0px auto;
position: absolute;
left: 50%;
margin-left: -40%;
overflow: hidden;
border: 1px solid #000000}
#sidebar{
float: left;
width:210px;
padding-bottom: 5000px;
margin-bottom: -5000px; }
#actualpage{
padding-left: 210px;
padding-bottom: 5000px;
margin-bottom: -5000px;}
</style></head>
<body>
<div id="centerme">
<div id="sidebar">
<div class="sidebar" align=center>sidebar stuff
</div>
</div>
<div id="actualpage">
<iframe src="test.html" width="90%" height="350px"></iframe>
</div>
</div>
</body>
</html>
I apologize about how messy and redundant the coding is; I'm a first-time coder who really, really should go and learn how to use CSS before she attempts this process. x3 Thank you for helping; and if it's an IE bug, would there possibly be a workaround you could think of?