Forum Moderators: open
I have a problem where an iframe scroll bar is not sitting flush with the right edge in IE 6, works fine in Firefox.
Iv tried to change the width dimensions of the wrapping div within the iframe file (form.php) but it doesn't effect the scrollbar's X position
<div id="page_content_wrapper"> <!-- 700px -->
<div id="page_content"> <!-- 691px -->
<IFRAME src="quoteform/form.php" style="width:690px; height:100%; overflow-x: hidden; overflow-y: scroll;" frameborder="0" scrolling="auto" title="contact form"></IFRAME>
</div>
</div>
Any help would be greatly appreciated
The following is the CSS for the main doc that loads the iframe, The loaded iframe contains just a PHP form, iv tried putting a wrapping div on the form to adjust but it has no effect.
Let me know if you require anymore information to troubleshoot.
So just to confirm; the iframe when loading in the div, has a 1cm space between the right div edge and the iframe vertical scroll bar. The area is white and not effected by the iframes bg colours.
Thanks for any help.
Nebula.
background-color:#CCCCCC;
}#page_wrapper {
width:908px;
margin-left:auto;
margin-right:auto;
}
#sidebar {
height:577px;
background-color:#1C1C1C;
float:left;
position:relative;
width:208px;
}#rightcol {
width:700px;
height:580px;
float:left;
}#bannerwrapper {
width:700px;
height:200px;
}#banner {
width:690px;
height:190px;
border:1px solid #2a2a2a;
margin-left:7px;
}#hotbox_top_wrapper {
width:700px;
height:170px;
}#hotbox_bottom_wrapper {
width:700px;
height:170px;
}#footer_wrapper {
width:700px;
height:40px;
}
#hotbox_1 {
width:340px;
height:160px;
float:left;
border:1px solid #2a2a2a;
margin-left:7px;
}.hotbox_header {
width:340px;
height:20px;
border-bottom:1px solid #2a2a2a;
background-image:url(../images/bg-hotboxheader.jpg);
}#hotbox_2 {
width:340px;
height:160px;
float:right;
border:1px solid #2a2a2a;
overflow:hidden;
}#hotbox_3 {
width:340px;
height:160px;
float:left;
border:1px solid #2a2a2a;
margin-left:7px;
}
#hotbox_4 {
width:340px;
height:160px;
float:right;
border:1px solid #2a2a2a;
}
#footer {
width:691px;
height:35px;
border:1px solid #2a2a2a;
margin-left: 7px;
}.hotbox_3_thumbs {
margin-top:10px;
margin-left:10px;
border:1px solid #2a2a2a;
}#page_content_wrapper {
width:700px;
height:340px;
}
#page_content {
width:691px;
height:330px;
border:1px solid #2a2a2a;
margin-left:7px;
overflow:hidden;
}
#showcase_links {
height:30px;
width:691px;
border-bottom:1px solid #2a2a2a;
line-height:30px;
font-weight:bolder;
margin:auto;
}img {
border-style:none;
}
.clear {
clear:both;
overflow:hidden;
height:0px;
display:block;
}
.thumb_border {
border:5px solid #2a2a2a;
}
.borderthin {
border:1px solid #2a2a2a;
}
and the html is:
<!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><title></title>
<link href="css/layout1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page_wrapper">
<div id="sidebar">
</div> <!-- end sidebar --><div id="rightcol">
<div id="bannerwrapper">
<div id="banner">
</div>
</div>
<div id="page_content_wrapper">
<div id="page_content">
<IFRAME src="quoteform/form.php" style="width:690px;height:100%; overflow-x: hidden; overflow-y: scroll;" frameborder="0" scrolling="yes" title="contact form"></IFRAME>
</div>
</div>
<div id="footer_wrapper" style="clear:both;">
<div id="footer">
</div>
</div>
</div>
</div></body>
</html>
[edited by: tedster at 4:15 am (utc) on Feb. 12, 2009]
[edit reason] added boxes for clarity [/edit]
<!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>
<title></title>
<style type="text/css">
#page_wrapper {
width:908px;
margin-left:auto;
margin-right:auto;
}
#sidebar {
height:577px;
background-color:#1C1C1C;
float:left;
position:relative;
width:208px;
}
#rightcol {
width:700px;
height:580px;
float:left;
}
#bannerwrapper {
width:700px;
height:200px;
}
#banner {
width:690px;
height:190px;
border:1px solid #2a2a2a;
margin-left:7px;
}
#footer_wrapper {
width:700px;
height:40px;
}
#footer {
width:691px;
height:35px;
border:1px solid #2a2a2a;
margin-left: 7px;
}
#page_content_wrapper {
width:700px;
height:340px;
}
#page_content {
width:691px;
height:330px;
border:1px solid #2a2a2a;
margin-left:7px;
overflow:hidden;
}</style>
</head>
<body>
<div id="page_wrapper">
<div id="sidebar">
</div> <!-- end sidebar -->
<div id="rightcol">
<div id="bannerwrapper">
<div id="banner">
</div>
</div>
<div id="page_content_wrapper">
<div id="page_content">
<iframe src="quoteform/form.php" style="width:690px;height:100%; overflow-x: hidden;" frameborder="0" scrolling="yes" title="contact form"></iframe>
</div>
</div>
<div id="footer_wrapper" style="clear:both;">
<div id="footer">
</div>
</div>
</div>
</div>
</body>
</html>
The significant difference is that I've removed the inline rule
[b]overflow-y: scroll;[/b]iframescrolling="yes"The trouble with the new code is that now you get a horizontal scrollbar in Konqueror (and by extension, probably Safari too)!
Good job.
