This has me stumped. While testing this page across several browsers I noticed that Opera displays excess space at the bottom of the page, as if an additional 100px-150px or so where being added after the footer. The site is not designed to be 100% height, it merely stretches with the content. This seems to only occur in in Opera (10.5x) and is there even if I remove all the content, and main navigation. So I am certain that it is something with #fut or any of its children however i can see the reason for the additional space.
html, body , #logo, ul, blockquote, h1, h2, h3, h4, h5, h6, p{margin:0; padding:0; }
.center, #brand .outer, #mainNav ul.hNav{margin:0 auto;}
.outer , #brand .inner{width:1060px;}
#fut{ background:url(footbord.jpg) center top repeat-x; padding:70px 0;font:normal 70%/1 Arial, Helvetica, sans-serif; color:tan}
#fut .center{position: relative}
#fut .nav{list-style:none; float:right; padding:0; margin:0; position: relative; z-index: 150}
#fut .nav li {float:left; padding:.125em .8em}
#fut .nav li +li {border-left:1px solid #98a8b4;}
#fut a{text-decoration:none;}
#fut a:hover {text-decoration:underline;}
#fut #siteinfo { line-height:1.3; float:left; }
#finalCont + .nav + #siteinfo, #finalCont + .nav {margin-top:20px;}
<div id="fut">
<div class="inner center" ><div id="trowel"></div>
<!--<div id="finalCont">-->
<!-- some last minute content could go here-->
<!--finalCont--><!--</div>-->
<ul class="nav">
<li><a href="#">About</a></li>
<li><a href="#">Our Work</a></li>
<li><a href="#">Bids</a> </li>
<li><a href="#">Careers</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">Office</a></li>
</ul>
<div id="siteinfo" >©2011 Nobium General Contractors<br>Site design by: <a href="http://raym31.home.comcast.net">Ray Messina</a><!--site info--></div>
</div>
<!--fut --></div>
The possibility remains that this could be an Opera 10.5 bug. I not well versed in the O-bug list, but just in case it’s something I am missing I welcome any and all suggestions.
The possibility remains that this could be an Opera 10.5 bug.
Hi Ray,
Yes, it is a positioning bug in Opera. I am seeing it present in Opera 9.64 also.
I remember running into other positoning bugs as well in Opera 10.
The problem seems to be the bottom:-15px; on your #trowel div. If you change it to top:-143px; (or whatever value you choose) then it will get Opera straightened out.
Here is the test case of your code that I was working with, with some other minor tweaks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
body {
margin:0;
padding:0;
min-width:1060px;
}
#content {
height:300px;
background: tan;
}
#fut {
padding: 70px 0;
font: normal 70%/1 Arial, Helvetica, sans-serif;
color: tan;
background: green;
}
[COLOR=Blue]#fut .inner[/COLOR] { /*was .inner .center*/
position: relative;
width:960px;
margin:0 auto;
background:#EEF;
}
[COLOR=Blue]#fut .inner:after {[COLOR=DarkGreen] /*contain floats w/out using overflow*/[/COLOR][/COLOR]
content:"";
clear:both;
display:block;
height:0;
overflow:hidden;
}
[COLOR=Blue]#trowel[/COLOR] {
position: absolute;
left: 665px;/*670px*/
[COLOR=Blue]top: -143px;[/COLOR][COLOR=Red]/*was bottom:-15px;*/[/COLOR]
width: 343px;
height: 188px;
background:red url("trowel.png") no-repeat 0 0;
}
#fut .nav {
list-style: none;
float: right;
padding: 0;
margin: 0;
position: relative;
z-index: 150;
}
#fut .nav li {
float: left;
padding: .125em .8em;
}
#fut .nav li + li {
border-left: 1px solid #98a8b4;
}
#fut a {
text-decoration: none;
}
#fut a:hover {
text-decoration: underline;
}
#fut #siteinfo {
line-height: 1.3;
float: left;
}
/*#finalCont + .nav + #siteinfo, #finalCont + .nav {
margin-top: 20px;
}*/
</style>
</head>
<body>
<div id="content">Test Content Area</div>
<div id="fut">
<div class="inner">
<div id="trowel"></div>
<!--<div id="finalCont"></div>-->
<ul class="nav">
<li><a href="#">About</a></li>
<li><a href="#">Our Work</a></li>
<li><a href="#">Bids</a> </li>
<li><a href="#">Careers</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">Office</a></li>
</ul>
<div id="siteinfo" >
©2011 Nobium General Contractors<br>
Site design by: <a href="http://raym31.home.comcast.net">Ray Messina</a>
</div>
</div>
</div>
</body>
</html>
It looks to me as though opera is calculating the viewport height by assuming top:0 (not top:auto) on the trowel div and then adding the height to it thus creating more space than needed. If you increase the height of the trowel div the space increases also.
It also seems in some respects similar to this old bug.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.test {
width:500px;
height:500px;
overflow:scroll;
border:1px solid #000;
position:relative;
}
</style>
</head>
<body>
<div class="test">
<p style="position:absolute;top:2500px">Opera produces a vertical scrollbar on the window equal to the value of top set on the absolute element</p>
</div>
</body>
</html>
Opera 11 is fine though so I wouldn’t worry too much about it as opera users upgrade every minute 
Thanks guys. Sure enough that did it. That is nice to know about old Opera, Paul, tho you are right as to it being a moot point by now.
As a general rule, it is rarely worth testing in any version of Opera apart from the most recent, and 11.5 is now out. Almost all Opera users are set up to auto-update, so the number of people using an older version is tiny. (Unfortunately, it isn’t possible to see this in the stats, as all versions now identify as 9.80)