Forum Moderators: not2easy
The site is <removed> - If you view the site on a higher resolution (I'm on 1280 x 1024), in Firefox, the footer gradient won't stick to the bottom of the browser. Also, in both IE and Firefox, I can't get the footer text to stick to the bottom of the screen. The home page is the only one really affected by this issue - The other pages have enough content to push the footer down to the bottom, where it should be (on most resolutions, anyway).
If anyone can offer any advice here, I'd really appreciate it, as I honestly have no idea what's wrong here, and I feel like I've tried everything. Thanks in advance!
[edited by: tedster at 11:54 pm (utc) on June 4, 2008]
[edit reason] no personal urls, please [/edit]
Welcome, but URL's are not allowed out here. A mod will likely clean them up, so you should post some (minimal) code that shows the problem instead.
I've looked at the code you currently have (and I've no idea if you changed it (that's part f the reason URLs aren't allowed), why would the #footer stick to the bottom ?
All I can see is that it have clear:both. What's in thre to make it stick to the bottom of the viewable window ?
The CSS for #footer is:
#footer {
background-image: url(img/copyright.jpg);
background-repeat: no-repeat;
width: 80%;
font-family: "Courier New", Courier, monospace;
text-align: right;
color:#8A3672;
font-size: 11px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-bottom: 25px;
clear: both;
}
I'm really having a hard time figuring out how to get it to stick to the bottom.
html body {
margin: 0px;
padding: 0px;
height: inherit;
background-color:#000000;
background: #000 url(img/fade-bottom.jpg) repeat-x;
background-position: bottom;
}
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>page title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<div id="all">
<div id="container">
<div id="nav"><img src="image.jpg" alt="#" style="padding-right:10px;" /> <a href="#" title="Home"><img src="home.jpg" alt="Home" class="nav-img" /></a> <img src="img/nav-spacer.jpg" class="nav-img" /> <a href="#" title="#"><img src="img/nav-technology.jpg" alt="#" class="nav-img" /></a> <img src="img/nav-spacer.jpg" class="nav-img" /> <a href="#" title="Purchase"><img src="img/nav-purchase.jpg" alt="#" class="nav-img" /></a> <img src="img/nav-spacer.jpg" class="nav-img" /> <a href="#" title="Press"><img src="img/nav-press.jpg" alt="#" class="nav-img" /></a> </div>
<div id="main">favourite foo text<br />
more favourite foo<br />
<br />
We make the world's only affordable foo....<br />
<br />
<a href="technology.html"><img src="img/irons.jpg" alt="#" border="0" /></a></div >
</div>
<div id="footer">footer text</div>
</div>
</body></html>
[edited by: SuzyUK at 7:06 am (utc) on June 6, 2008]
[edit reason] examplified code [/edit]
