I am using the CSS cover to make the bg go all the way across the screen, but when I look at it with a bigger screen it cuts the bottom off. I just want it to cover width. Is there a way to do this?
Here is what it looks like.
Smaller screen (looks good)
Bigger screen (bottom cut off)
I was able to get that right but now the footer is going half way up the page. I tried the sticky footer and this is what I am getting.
.footer {
width:100%;
background-image: url(../images/footer-bg.png);
background-repeat: repeat-x;
height:150px;
position:absolute;
bottom:0;
}
Hi, laflair13. Could you post a link to the page so we can see the code? The screen shots are very helpful, but we really cannot offer substantial advice from images alone.
Cheers
Sorry about that, Cant believe I forgot the code.
Heres a screen of the site
And for the code
CSS
.footer {
width:100%;
background-image: url(../images/footer-bg.png);
background-repeat: repeat-x;
height:150px;
}
.foot-nav {
float: left;
width:960px;
margin-top:20px;
text-align:center;
}
.foot-nav a {
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
text-decoration:none;
}
.foot-nav a:hover {
font-family:Verdana, sans-serif;
font-size:14px;
color:#f8f259;
text-decoration:none;
}
.wrap{
width: 980px;
margin: 0 auto;
}
HTML
<div class="footer">
<div class="wrap">
<div class="foot-nav">
(Links go here)
</div><!--end wrap-->
</div><!--end footer-->
David,
We really need to see the code for the whole page. The elements that are moving around are not doing so in a vacuum… they are interacting with the rest of the page. You mentioned sticky footer.
We need to see a working page. In other words, I should be able to copy the code that you post to a new file and open it in a browser and see the problem demonstrated.
Please click the link at the bottom of my post for more information about posting working code or setting up working examples.
URL of site -
http://myfuturesite-lumbermenonline.com/
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /><meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /><meta name="robots" content="index,follow" /><meta name="revisit-after" content="14 days" /><meta name="googlebot" content="index,follow" /><meta name="description" content=" " /><meta name="keywords" content=" " /><link rel="stylesheet" type="text/css" href="style/main.css" />
</head>
<body>
<div class="header">
<div class="wrap">
<div class="logo"><img src="images/logo.png"></div>
<div class="number">Call Us Today - 715-550-1077</div>
<div class="nav">
<ul>
<li><a href="Default_Processors.aspx"><font id="mm_default" class="menu-inactive">Home</font></a> </li>
<li><a href="processors.aspx"><font id="mm_processors" class="menu-inactive">Processors</font></a></li>
<li><a href="woodstoves.aspx"><font id="mm_woodstoves" class="menu-inactive">Wood Stoves</font></a></li>
<li><a href="Inventory.aspx?new=1"><font id="mm_inventorynew" class="menu-inactive">New In-Stock</font></a></li>
<li><a href="Inventory.aspx?used=1"><font id="mm_inventoryused" class="menu-inactive">Trade-Ins</font></a></li>
<li><a href="About.aspx"><font id="mm_about" class="menu-inactive">About</font></a></li>
<li><a href="Contact.aspx"><font id="mm_contact" class="menu-inactive">Contact</font></a></li>
</ul>
</div><!--end nav-->
</div><!--end header-wrap-->
</div><!--end header-->
<div>
<div class="containerTXT">
<div class="info"><i>BRUTE FORCE</i> offers affordably priced firewood processors that outperform and our out produce those costing much more as well as a complete line of <i>BRUTE FORCE</i> wood burning stoves.</div><!--ends info-->
</div><!--end container-->
<div class="products">
<div class="container">
<div class="left">
<p class="product">BRUTE FORCE<br>Firewood Processor</p>
<div class="tooltip-wrap">
<a href="#"><img src="images/wood-processor.png" alt="" width="372" height="245" style="margin-left:70px"></a>
<div class="tooltip-content">
<p>BRUTE FORCE offers affordably priced firewood processors that outperform and out produce those costing thousands more, as well as a complete line of BRUTE FORCE wood burning stoves.<br><br><a href="#"><span style="color:#f8fac3; font-weight:bold">Click here to view products</span></a></p>
</div> </div>
</div><!--ends left-->
<div class="right">
<p class="product">BRUTE FORCE<br>Wood Stove</p>
<div class="tooltip-wrap">
<a href="#"><img src="images/wood-stove.png" alt="" width="231" height="256" style="margin-left:125px"></a>
<div class="tooltip-content">
<p>BRUTE FORCE outdoor wood stoves keep the warm in and the mess out, by offering a complete line of quality wood burning stoves ranging in size from 150,000 to 1.5 million BTUs, in your choice of water jacket or forced air. Plus affordably priced firewood processors that outperform and out produce those costing thousands more.<br><br><a href="#"><span style="color:#f8fac3; font-weight:bold">Click here to view products</span></a></p>
</div> </div>
</div><!--ends right-->
</div><!--end container-->
</div><!--ends products-->
<div class="footer">
<div class="wrap">
<div class="foot-nav">
<ul>
<li><a href="Default.aspx"><font id="Font1" class="menu-inactive">Home</font></a> </li>
<li><a href="processors.aspx"><font id="Font2" class="menu-inactive">Processors</font></a></li>
<li><a href="woodstoves.aspx"><font id="Font3" class="menu-inactive">Wood Stoves</font></a></li>
<li><a href="Inventory.aspx?new=1"><font id="Font4" class="menu-inactive">New In-Stock</font></a></li>
<li><a href="Inventory.aspx?used=1"><font id="Font5" class="menu-inactive">Trade-Ins</font></a></li>
<li><a href="about.aspx"><font id="Font8" class="menu-inactive">About Us</font></a></li>
<li><a href="contact.aspx"><font id="Font9" class="menu-inactive">Contact Us</font></a></li>
<li><a href="News.aspx"><font id="Font11" class="menu-inactive">News</font></a></li>
<li><a href="Links.aspx"><font id="Font10" class="menu-inactive">Links & Financing</font></a></li>
</ul>
</div><!--end foot-nav-->
<div class="foot-info">S&S Manufacturing · N648 Sunset Drive · Dorchester, WI 54425 · 715-550-1077</div>
</div><!--end wrap-->
</div><!--end footer-->
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
html, body {
height: 0%;
width: 100%;
padding: 0;
margin: 0;
background-color:#c8c9ca;
}
font.menu-inactive {
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
text-decoration:none;
}
font.menu-active {
font-family:Verdana, sans-serif;
font-size:14px;
color:#f8f259;
font-weight:bold;
text-decoration:none;
}
.header {
width:100%;
background-image: url(../images/header-bg.png);
background-repeat: repeat-x;
height:150px;
}
.wrap{
width: 980px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
width: auto\\9; /* ie8 */
}
.menu {
background-image:url(../images/menu-bg.png);
height:100px;
width:100%;
}
.logo {
width:362px;
height:130px;
float:left;
margin-top:10px;
}
.number {
font-family:Verdana, sans-serif;
font-size:16px;
color:#FFFFFF;
float:right;
margin-top:10px;
}
.contact-left {
width:450px;
float:left;
}
.contact-right {
width: 450px;
float: right;
}
nav a {
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
text-decoration:none;
padding:0 4px;
height:50px;
}
nav a:hover {
font-family:Verdana, sans-serif;
font-size:14px;
color:#f8f259;
text-decoration:none;
}
.nav {
height:50px;
width:580px;
float:right;
margin-top:33px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
text-decoration:none;
}
.nav li:before {
content: " | ";
}
.nav li:first-child:before {
content: none;
}
.container{
width: 980px;
height:100%;
margin: 0 auto;
}
.containerTXT{
width: 1078px;
height:100%;
margin: 0 auto;
}
.info {
font-family:Verdana, sans-serif;
font-size:18px;
color:#000000;
text-decoration:none;
text-align:center;
padding:25px 100px;
text-shadow: 1px 1px #ffffff;
}
p.text {
font-family:Verdana, sans-serif;
font-size:16px;
color:#000000;
text-decoration:none;
text-shadow: 1px 1px #ffffff;
}
.left {
width:450px;
float:left;
}
.right {
width:450px;
float:right;
}
#stove {
background-image: url('../images/wood-stove.png');
height: 260px;
width: 267px;
margin-left:75px;
}
#stove:hover {
background-image: url('../images/wood-stove-hover.png');
height: 260px;
width: 267px;
}
p.product {
font-family:impact;
font-size:32px;
color:#b11116;
text-decoration:none;
text-align:center;
text-shadow: 1px 1px #ffffff;
}
.products {
background-image:url(../images/product-bg.png);
width:100%;
height:400px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.footer {
width:100%;
background-image: url(../images/footer-bg.png);
background-repeat: repeat-x;
height:150px;
}
.foot-nav {
float: left;
width:960px;
margin-top:20px;
text-align:center;
}
.foot-nav a {
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
text-decoration:none;
}
.foot-nav a:hover {
font-family:Verdana, sans-serif;
font-size:14px;
color:#f8f259;
text-decoration:none;
}
.foot-nav li:before {
content: " | ";
}
.foot-nav li:first-child:before {
content: none;
}
.foot-info {
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
text-decoration:none;
float: left;
width:960px;
margin-top:25px;
text-align:center;
}
.contact-left {
width:450px;
float:left;
margin-left:100px;
font-family:Verdana, sans-serif;
font-size:14px;
color:#000000;
text-decoration:none;
}
.contact-right {
width:450px;
float:right;
margin-right:50px;
font-family:Verdana, sans-serif;
font-size:14px;
color:#000000;
text-decoration:none;
}
#page-wrap {
width: 450px;
background: white;
padding: 20px 50px 20px 50px;
margin: 20px auto;
min-height: 500px;
height: auto !important;
height: 500px;
}
#contact-area {
width: 450px;
margin-top: 25px;
}
#contact-area input, #contact-area textarea {
padding: 5px;
width: 300px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}
#contact-area input.submit-button {
width: 100px;
margin-left:116px;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
}
.tooltip-wrap {
position: relative;
}
.tooltip-wrap .tooltip-content {
font-family:Verdana, sans-serif;
color:#ffffff;
display: none;
position: absolute;
bottom: 5%;
left: 5%;
right: 5%;
background-color:rgba(0, 0, 0, 0.5);
padding: .5em;
}
.tooltip-wrap:hover .tooltip-content {
display: block;
}
I just tried another page from scratch and I am totally lost. I have 2 inner divs in 1 bigger div but they arent going in it.
Heres a screen so you can see what I mean, I separated them by colors.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /><meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /><meta name="robots" content="index,follow" /><meta name="revisit-after" content="14 days" /><meta name="googlebot" content="index,follow" /><meta name="description" content=" " /><meta name="keywords" content=" " /><link rel="stylesheet" type="text/css" href="style/main.css" />
</head>
<body>
<div class="header">
<div class="wrap">
<div class="logo"><img src="images/logo.png"></div>
<div class="number">Call Us Today - 715-550-1077</div>
<div class="nav">
<ul>
<li><a href="Default_Processors.aspx"><font id="mm_default" class="menu-inactive">Home</font></a> </li>
<li><a href="processors.aspx"><font id="mm_processors" class="menu-inactive">Processors</font></a></li>
<li><a href="woodstoves.aspx"><font id="mm_woodstoves" class="menu-inactive">Wood Stoves</font></a></li>
<li><a href="Inventory.aspx?new=1"><font id="mm_inventorynew" class="menu-inactive">New In-Stock</font></a></li>
<li><a href="Inventory.aspx?used=1"><font id="mm_inventoryused" class="menu-inactive">Trade-Ins</font></a></li>
<li><a href="About.aspx"><font id="mm_about" class="menu-inactive">About</font></a></li>
<li><a href="Contact.aspx"><font id="mm_contact" class="menu-inactive">Contact</font></a></li>
</ul>
</div><!--end nav-->
</div><!--end header-wrap-->
</div><!--end header-->
<div id="content">
<p class="info"><i>BRUTE FORCE</i> offers affordably priced firewood processors that outperform and our out produce those costing much more as well as a complete line of <i>BRUTE FORCE</i> wood burning stoves.</p><!--ends info-->
<div class="left">
<p class="product">BRUTE FORCE<br>Firewood Processor</p>
<a href="#"><img src="images/wood-processor.png" alt="" width="372" height="245" style="margin-left:70px"></a>
<p>BRUTE FORCE offers affordably priced firewood processors that outperform and out produce those costing thousands more, as well as a complete line of BRUTE FORCE wood burning stoves.<br><br><a href="#"><span style="color:#f8fac3; font-weight:bold">Click here to view products</span></a></p>
</div><!--ends left-->
<div class="right">
<p class="product">BRUTE FORCE<br>Wood Stove</p>
<a href="#"><img src="images/wood-stove.png" alt="" width="231" height="256" style="margin-left:125px"></a>
<p>BRUTE FORCE outdoor wood stoves keep the warm in and the mess out, by offering a complete line of quality wood burning stoves ranging in size from 150,000 to 1.5 million BTUs, in your choice of water jacket or forced air. Plus affordably priced firewood processors that outperform and out produce those costing thousands more.<br><br><a href="#"><span style="color:#f8fac3; font-weight:bold">Click here to view products</span></a></p>
</div><!--ends right-->
</div><!--end content-->
<div class="footer">
<div class="wrap">
<div class="foot-nav">
<ul>
<li><a href="Default.aspx"><font id="Font1" class="menu-inactive">Home</font></a> </li>
<li><a href="processors.aspx"><font id="Font2" class="menu-inactive">Processors</font></a></li>
<li><a href="woodstoves.aspx"><font id="Font3" class="menu-inactive">Wood Stoves</font></a></li>
<li><a href="Inventory.aspx?new=1"><font id="Font4" class="menu-inactive">New In-Stock</font></a></li>
<li><a href="Inventory.aspx?used=1"><font id="Font5" class="menu-inactive">Trade-Ins</font></a></li>
<li><a href="about.aspx"><font id="Font8" class="menu-inactive">About Us</font></a></li>
<li><a href="contact.aspx"><font id="Font9" class="menu-inactive">Contact Us</font></a></li>
<li><a href="News.aspx"><font id="Font11" class="menu-inactive">News</font></a></li>
<li><a href="Links.aspx"><font id="Font10" class="menu-inactive">Links & Financing</font></a></li>
</ul>
</div><!--end foot-nav-->
<div class="foot-info">S&S Manufacturing · N648 Sunset Drive · Dorchester, WI 54425 · 715-550-1077</div>
</div><!--end wrap-->
</div><!--end footer-->
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
html, body {
height: 0%;
width: 100%;
padding: 0;
margin: 0;
background-color:#c8c9ca;
}
font.menu-inactive {
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
text-decoration:none;
}
font.menu-active {
font-family:Verdana, sans-serif;
font-size:14px;
color:#f8f259;
font-weight:bold;
text-decoration:none;
}
.header {
width:100%;
background-image: url(../images/header-bg.png);
background-repeat: repeat-x;
height:150px;
}
.wrap{
width: 85%;
height:100px;
margin: 0 auto;
}
.menu {
background-image:url(../images/menu-bg.png);
height:100px;
width:100%;
}
.logo {
width:25%;
float:left;
margin-top:10px;
}
.number {
font-family:Verdana, sans-serif;
width:65%;
font-size:16px;
color:#FFFFFF;
float:right;
height:43px;
text-align:right;
margin-top:15px;
}
.nav {
height:50px;
width:65%;
float:right;
text-align:right;
text-decoration:none;
}
nav a {
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
height:50px;
}
nav a:hover {
font-family:Verdana, sans-serif;
font-size:14px;
color:#f8f259;
text-decoration:none;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
text-decoration:none;
}
.nav li:before {
content: " | ";
}
.nav li:first-child:before {
content: none;
}
#content {
width:100%;
height:auto;
background-color:#F6A5FB;
}
p.info {
font-family:Verdana, sans-serif;
font-size:18px;
color:#000000;
text-decoration:none;
text-align:center;
padding:25px 100px;
text-shadow: 1px 1px #ffffff;
}
.left {
width:45%;
float:left;
background-color:#E59C9D;
margin-left:25px;
}
.right {
width:45%;
float:right;
background-color:#99EFAD;
margin-right:25px;
}
.footer {
width:100%;
background-image: url(../images/footer-bg.png);
background-repeat: repeat-x;
height:100px;
position:absolute;
bottom:0;
}
.foot-nav {
float: left;
width:100%;
margin-top:20px;
text-align:center;
}
.foot-nav a {
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
text-decoration:none;
}
.foot-nav a:hover {
font-family:Verdana, sans-serif;
font-size:14px;
color:#f8f259;
text-decoration:none;
}
.foot-nav li:before {
content: " | ";
}
.foot-nav li:first-child:before {
content: none;
}
.foot-info {
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
text-decoration:none;
float: left;
width:100%;
margin-top:25px;
text-align:center;
}
This has taken my brain for a loop today. I am usually pretty good at figuring these out but this one has me stumped.
(I have not looked at the code in your last post, yet.)
Let me ask how the page is supposed to look/behave.
The background image will scale to cover the content area. Is the scaling and position of product-bg.png OK as-is?
How should the elements on the page behave in a window? and how should they behave should the monitor be tall rather than wide? This question plays to the footer…
Is the footer indeed supposed to “sticky”, or is it supposed to be “fixed”, or should it flow with the content?
Aside: This seems to be an old page that is being given a “facelift” or “codelift” to bring it up-to-date. It needs more work than just replacing the doctype, though. Noted so far:
I am tryign to make it that no matter the screen size the footer appears on the bottom of the page. As you can see when I look at the site with a bigger monitor, the footer if half way up the page, I need it to be at the bottom.
Any help would be appreciated.
Screenshot
URL
http://myfuturesite-lumbermenonline.com/News.aspx
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /><meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /><meta name="robots" content="index,follow" /><meta name="revisit-after" content="14 days" /><meta name="googlebot" content="index,follow" /><meta name="description" content=" " /><meta name="keywords" content=" " /><link rel="stylesheet" type="text/css" href="style/main.css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i, x, a = document.MM_sr; for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) x.src = x.oSrc;
}
function MM_preloadImages() { //v3.0
var d = document; if (d.images) {
if (!d.MM_p) d.MM_p = new Array();
var i, j = d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i < a.length; i++)
if (a[i].indexOf("#") != 0) { d.MM_p[j] = new Image; d.MM_p[j++].src = a[i]; }
}
}
function MM_findObj(n, d) { //v4.01
var p, i, x; if (!d) d = document; if ((p = n.indexOf("?")) > 0 && parent.frames.length) {
d = parent.frames[n.substring(p + 1)].document; n = n.substring(0, p);
}
if (!(x = d[n]) && d.all) x = d.all[n]; for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n];
for (i = 0; !x && d.layers && i < d.layers.length; i++) x = MM_findObj(n, d.layers[i].document);
if (!x && d.getElementById) x = d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i, j = 0, x, a = MM_swapImage.arguments; document.MM_sr = new Array; for (i = 0; i < (a.length - 2) ; i += 3)
if ((x = MM_findObj(a[i])) != null) { document.MM_sr[j++] = x; if (!x.oSrc) x.oSrc = x.src; x.src = a[i + 2]; }
}
</script>
<link rel="stylesheet" type="text/css" href="style/News.css"></link>
<link rel="stylesheet" type="text/css" href="style/MfgItem.css"></link>
<script src="/js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.lightbox.js" type="text/javascript" charset="utf-8"></script>
</head>
<body onLoad="MM_preloadImages('images/wood-processor-hover.png','images/wood-stove-hover.png')">
<div class="header">
<div class="wrap">
<div class="logo"><img src="images/logo.png"></div>
<div class="number">Call Us Today - 715-550-1077</div>
<div class="nav">
<ul>
<li><a href="Default_Processors.aspx"><font id="mm_default" class="menu-inactive">Home</font></a> </li>
<li><a href="MfgItem.aspx?ItemId=229"><font id="mm_Processors" class="menu-inactive">Processors</font></a></li>
<li><a href="woodstoves.aspx"><font id="mm_woodstoves" class="menu-inactive">Wood Stoves</font></a></li>
<li><a href="Inventory.aspx?new=1"><font id="mm_inventorynew" class="menu-inactive">New In-Stock</font></a></li>
<li><a href="Inventory.aspx?used=1"><font id="mm_inventoryused" class="menu-inactive">Trade-Ins</font></a></li>
<li><a href="About.aspx"><font id="mm_about" class="menu-inactive">About</font></a></li>
<li><a href="Contact.aspx"><font id="mm_contact" class="menu-inactive">Contact</font></a></li>
</ul>
</div><!--end nav-->
</div><!--end header-wrap-->
</div><!--end header-->
<div>
<form method="post" action="News.aspx" id="ctl00">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="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" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl00'];
if (!theForm) {
theForm = document.ctl00;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZLROI7prD0UVnJS2BNnbMnelSWD2ZlVaDi18dwgcy79NlqULi80ahAu7CeJc1DGWnw2&t=635207210953880130" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=yeSNAJTOPtPimTGCAo3LlWeR5KV13WIw1uY2-QOukmWU2R2JYfue_M9Ju6U2bnCZ6En7b93PX3_IfYSwgMYzuYV1ZUs2Kp6b6H8g2Tnfu2jDtf26wLxNHcTgvLWTMBjO0&t=ffffffffda74082d" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=DT3YJR8QaqV61-teuz0hgoLrOkZckpfzyzwcT38OqnMhjoE8oRX2atXStMpeQLZ8RdxIF8zrOr4M87hKeQRGsBB2SnQ5EVp3Wnohrc8wzDZQa8Fq5PzTVsvoUt33137pPWqix-CkLWcR1GHHdewySA2&t=ffffffffda74082d" type="text/javascript"></script>
<div class="aspNetHidden">
<input type="hidden" name="__PREVIOUSPAGE" id="__PREVIOUSPAGE" value="M0ZX1KSpPDBNjhaXELZnAjN655Aey-UR8V_C8-8gV4fBRn_aFt87HPGmbuh_JBRJ_oHLUppHn5USKiWcHyZcKw2" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="6UMKlr788NJYaz/lLS7fcQ/KxTdPMwZjZDk29bY684EKApV2Lzh39COvArae6/ygG/Fzo9EfFDV4ulGCH0t83v8M0LIgwXtAIaW0fT7SOWwuvzN7NDwSeZr8z8ImzB51" />
</div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$Content$ScriptManager1', 'ctl00', ['tctl00$Content$UpdatePanel1','Content_UpdatePanel1'], [], [], 90, 'ctl00');
//]]>
</script>
<div id="Content_UpdatePanel1">
<div class="NewsMain">
<div class="NewsGrid">
<div id="Content_pnlList">
<div>
<span id="Content_lblEmpty"></span>
<table id="Content_dlListings" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td>
<div class="ArticleRow">
<div class="ArticleImage">
<input type="image" name="ctl00$Content$dlListings$ctl00$imgThumbnail" id="Content_dlListings_imgThumbnail_0" class="ArticleImage" src="http://www.lumbermenonline.com/Handlers/ShowItemImage.ashx?TYPE=NEWS&ID=72&FILE=IMG_20131017_133703.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$Content$dlListings$ctl00$imgThumbnail", "", false, "", "News.aspx?articleid=72", false, false))" />
</div>
<div class="ArticleText">
<h3><span id="Content_dlListings_lblCaption_0" class="Headline">New Brute Force 18-24HD Processor Breaks New Ground</span></h3>
<span id="Content_dlListings_lblTime_0" class="Text">6/25/2014 12:11:53 PM</span><br />
<div>
<span id="Content_dlListings_lblBriefDesc_0" class="ArticleBreifText">S & S Manufacturing, Inc of Dorchester, Wisconsin, the parent company of Brute Force Brand firewood processors and wood stoves introduced the 18-24HD firewood processor. This compact but powerful unit produces up to 3 cords per hour and incorporates many unique innovations not found on processors at any price point. Innovations such as a round log trough that allows for larger diameter wood without an increase in overall width or weight, plus the round trough design handles the nastiest crooked wood with ease. Another is the operator controlled hydraulic conveyor system that swivels 3’ side to side to increase the stack size and reduce handling. Standard features on the Brute Force 18-24HD include; torsion axle, 3-strand hydraulic log deck and 14’ hydraulic swivel conveyor, automatic oiler that uses bar oil for increased bar life and lower cost and a powerful 35HP Kohler gas engine. Add the ergonomic control center and you have a unit that is appreciated by experienced operators and simple to learn for first time processor owners. <br/>Find out more about the Brute Force Model 18-24HD processor call 715-550-1077<br/></span>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="footer">
<div class="wrap">
<div class="foot-nav">
<ul>
<li><a href="Default.aspx"><font id="Font1" class="menu-inactive">Home</font></a> </li>
<li><a href="MfgItem.aspx?ItemId=229"><font id="Font2" class="menu-inactive">Processors</font></a></li>
<li><a href="woodstoves.aspx"><font id="Font3" class="menu-inactive">Wood Stoves</font></a></li>
<li><a href="Inventory.aspx?new=1"><font id="Font4" class="menu-inactive">New In-Stock</font></a></li>
<li><a href="Inventory.aspx?used=1"><font id="Font5" class="menu-inactive">Trade-Ins</font></a></li>
<li><a href="about.aspx"><font id="Font8" class="menu-inactive">About Us</font></a></li>
<li><a href="contact.aspx"><font id="Font9" class="menu-inactive">Contact Us</font></a></li>
<li><a href="News.aspx"><font id="Font11" class="menu-inactive">News</font></a></li>
<li><a href="Links.aspx"><font id="Font10" class="menu-inactive">Links & Financing</font></a></li>
</ul>
</div><!--end foot-nav-->
<div class="foot-info">S&S Manufacturing · N648 Sunset Drive · Dorchester, WI 54425 · 715-550-1077</div>
</div><!--end wrap-->
</div><!--end footer-->
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
a {
text-decoration:none;
}
a:hover
{
color:#f8f259;
}
html, body {
height: 0%;
width: 100%;
padding: 0;
margin: 0;
background-color:#c8c9ca;
}
font.menu-inactive {
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
text-decoration:none;
}
font.menu-active {
font-family:Verdana, sans-serif;
font-size:14px;
color:#f8f259;
font-weight:bold;
text-decoration:none;
}
.header {
width:100%;
background-image: url(../images/header-bg.png);
background-repeat: repeat-x;
height:150px;
}
.wrap{
width: 85%;
height:100px;
margin: 0 auto;
}
.container{
width: 85%;
height:600px;
margin: 0 auto;
}
.menu {
background-image:url(../images/menu-bg.png);
height:100px;
width:100%;
}
.logo {
width:25%;
float:left;
margin-top:10px;
}
.number {
font-family:Verdana, sans-serif;
width:65%;
font-size:16px;
color:#FFFFFF;
float:right;
height:43px;
text-align:right;
margin-top:15px;
}
.nav {
height:50px;
width:65%;
float:right;
text-align:right;
text-decoration:none;
}
nav a {
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
height:50px;
text-decoration:none;
}
nav a:hover {
font-family:Verdana, sans-serif;
font-size:14px;
color:#f8f259;
text-decoration:none;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
text-decoration:none;
}
.nav li:before {
content: " | ";
}
.nav li:first-child:before {
content: none;
}
#content {
background-image:url(../images/product-bg.png);
width:100%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
position: relative;
height:auto;
float:left;
overflow:auto;
} /* must be same height as the footer */
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
p.info {
font-family:Verdana, sans-serif;
font-size:16px;
color: #000000;
text-decoration:none;
text-align:center;
padding:25px 100px;
text-shadow: 1px 1px #ffffff;
}
.left {
width:45%;
float:left;
margin-left:50px;
}
.right {
width:45%;
float:right;
margin-right:50px;
}
p.product {
font-family:impact;
font-size:32px;
color:#b11116;
text-decoration:none;
text-align:center;
text-shadow: 1px 1px #ffffff;
}
p.info2 {
font-family:Verdana, sans-serif;
font-size:16px;
color: #000000;
text-decoration:none;
text-align:center;
padding:25px 75px;
}
.infobox {
width:100%;
height:auto;
background-color:#FCF9F9;
opacity:0.7;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
.contact{
width:100%;
height:850px;
font-family:Verdana, sans-serif;
font-size:16px;
color: #000000;
text-decoration:none;
}
p.text {
font-family:Verdana, sans-serif;
font-size:16px;
color: #000000;
text-decoration:none;
}
.contact-left {
width:450px;
float:left;
margin-left:100px;
}
.contact-right {
width:450px;
float:right;
margin-right:100px;
}
.footer {
width:100%;
background-image: url(../images/footer-bg.png);
background-repeat: repeat-x;
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both
}
.foot-nav {
float: left;
width:100%;
margin-top:20px;
text-align:center;
}
.foot-nav a {
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
text-decoration:none;
}
.foot-nav a:hover {
font-family:Verdana, sans-serif;
font-size:14px;
color:#f8f259;
text-decoration:none;
}
.foot-nav li:before {
content: " | ";
}
.foot-nav li:first-child:before {
content: none;
}
.foot-info {
font-family:Verdana, sans-serif;
font-size:14px;
color:#FFFFFF;
text-decoration:none;
float: left;
width:100%;
margin-top:25px;
text-align:center;
}
#menu li #mm_default a{
background: url(images/home.jpg) no-repeat;
width:81px;
}
#menu li#processors a{
background: url(images/processors.jpg) no-repeat;
width:79px;
}
#menu li#stoves a{
background: url(images/stoves.jpg) no-repeat;
width:79px;
}
#menu li#stock a{
background: url(images/stock.jpg) no-repeat;
width:79px;
}
#menu li#trade a{
background: url(images/trade.jpg) no-repeat;
width:79px;
}
#menu li#about a{
background: url(images/about.jpg) no-repeat;
width:79px;
}
#menu li#contact a{
background: url(images/contact.jpg) no-repeat;
width:79px;
}
/* ITEM PAGES CSS */
.Slider {
float:left;
width:100%;
margin:20px 0 25px 10px;
}
.About{
float:left;
width: 493px;
height: 100px;
font-size:17px;
font-family:"Trebuchet MS", Helvetica, sans-serif;
text-align:justify;
color:white;
background-color:black;
border: 20px solid black;
border-radius: 10px;
margin:0 0 25px 10px;
}
.FeaturedFloater{
float:left;
width:400px;
height:415px;
background-color:black;
border:10px solid black;
border-radius:10px;
margin:0 0 0 50px;
}
.FeaturedText {
text-align: center;
color: white;
font-size: 32px;
font-weight: bold;
margin: 0 0 10px 0;
}
.FeaturedLabel{
color:white;
font-size:22px;
font-family:"Trebuchet MS",Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
}
.Floater13{
float:left;
margin: 0 20px 0 0;
}
.SizedImg{
width:400px;
}
.NoBorder {
border:0;
text-decoration:none;
}
.H1OffSet {
font-family:Verdana, sans-serif;
font-size:35px;
color: #000000;
text-decoration:none;
padding:25px 100px;
text-shadow: 1px 1px #ffffff;
width: auto;
}
.InnerText{
float: left;
color:#303030;
font-family:"Trebuchet MS",Helvetica,sans-serif;
font-size: 19px;
}
.VPBtn {
border:0;
text-decoration:none;
margin:7px 0 0 0;
}
.ItemTitle{
font-family:"Trebuchet MS",Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
font-size: 18px;
}
.ItemLabel{
margin:0 0 0 10px;
}
.ItemDescription{
display:block;
font-size:14px;
line-height:18px;
word-wrap: break-word;
-ms-word-wrap: break-word;
padding:0 10px 0 10px;
color: rgb(48,48,48);
}
.ItemDescription a:link, a:visited{
color: rgb(200,32,60);
text-decoration: none;
cursor:pointer;
}
.ItemDescription a:hover{
color: rgb(48,48,48);
}
.NoDecor{
text-decoration:none;
}
.ItemPrice{
float:left;
display:block;
padding:10px 10px 10px 15px;
font-size: 18px;
color: rgb(230,32,60);
line-height:15px;
word-wrap: break-word;
-ms-word-wrap:break-word;
}
.ItemImage{
width:300px;
padding:10px;
}
.ItemTextContainer{
width:600px;
float:left;
font-family:"Trebuchet MS",Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
font-size: 16px;
padding: 15px 0;
}
.ItemImgContainer{
width:320px;
float:left;
}
.ItemThumbnailImage{
width:300px;
padding:5px;
border-style: solid;
border-width: 2px;
border-color:#000000;
margin-top:2px;
margin-left:2px;
}
.ItemThumbnailImageContainer{
max-width:320px;
float:left;
}
.ItemContainer{
width:95%;
float:left;
margin-left:50px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #ADADAD 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #ADADAD 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #ADADAD 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #ADADAD));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #ADADAD 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #ADADAD 100%);
}
.ItemBorder{
float:left;
padding: 20px 0;
margin-left:50px;
}
.BreadCrumb{
float:left;
}
David, what do you want the footer to do when the page is taller than the browser window?
(I’m want to distinguish between a sticky footer that disappears below the bottom of the window if the page is longer than the window and a fixed footer that always stays at the bottom of the window regardless of the height of the page.)
EDIT:
This is a continuation of a previous thread: http://www.sitepoint.com/forums/showthread.php?1215465-Background-cover-cuts-off-bottom-on-larger-screens
Recommended code checks have not been performed.
Please do not start a new thread for previously reported issues. It is better for all if the flow of information is continuous.