...

View Full Version : Tearing my hair out - My footer won't stay at the bottom of the page in FF



gjindancer
09-20-2007, 04:02 PM
I am trying to build a css only site that is fully expandable/contractable I have already ripped the site apart and started again following a few ideas from the web. Initially I created a header, columnleft, columnright a "push" component to make sure the footer stuck to the bottom of the page. I coloured everything and the basic divs worked fine in IE and Firefox.

After adding the required contents though, the footer div seems to want to "float" to the right in Firefox, although there is no css asking it to do so.

Inside columleft, I have a div with a form and then text beside it - in IE this works fine, but in FF the text just sits below the form instead of alongside it - almost exactly what I need the footer to do and the text to stop doing.

I've checked the WC3 validator and got rid of any errors which don't relate to the javascript, but there are some errors I don't understand concerning </div> tags and one for the </body> tag.


Here is the CSS:



html, body {height: 100%}
body {font-family:arial,sans-serif}
form { margin: 0 auto }
.footer, .push {
height: 4em; /* .push must be the same height as .footer */
}
.columnleft { width:80%; height:auto; float:left }
.columnright { width:20%; height:400; float:right }
.blueline { background:#e5ecf9; border-top:1px solid #36c; font-size:15px ;font-weight:bold; width:100%; height:20px; padding-left:6px }
.topad {background-color: #fff9dd }
.sl { color: #999999; font-size:12px }
.sl2 { color: #999999; font-size:12px }
.wrap { width:100%; height:auto; }
.header { width:100%; height:50px; padding-left:6px; margin-top: 10px; }
.formwrap { margin-top: 10px; height:auto; width:100% }
.sidead { border-left: solid 1px #c9d7f1; height: 300px; margin-left:10px; padding-left: 8px; padding-top:6px }
.topad { background:#fff9dd;border:1px none #e5ecf9; margin-right:10px; margin-bottom: 10px; padding-left:6px }
#inputbox { background: url(images/box.gif) no-repeat; position:relative; padding:6px; padding-top:10px; padding-left:10px; width: 360px; height: 260px;
display:block; float:left; }
#adtitle { font-family:Arial; color:#0000CC; font-size:12pt; text-decoration:underline; font-weight:bold;}
#adtitle2 { font-family:Arial; color:#0000CC; font-size:12pt; text-decoration:underline; font-weight:bold;}
#adline1 { font-family:Arial; color:#000000; font-size:10pt;}
#adline1a { font-family:Arial; color:#000000; font-size:10pt;}
#adline2 { font-family:Arial; color:#000000; font-size:10pt;}
#adline2a { font-family:Arial; color:#000000; font-size:10pt;}
#adurl { font-family:Arial; color:#008800; font-size:10pt;}
#adurl2 { font-family:Arial; color:#008800; font-size:10pt;}
.sl { padding-right:3px;float:right }
.style1 {font-size: 9pt; }
.style4 { font-size: 10px}
.tips { font-family: verdana; font-size:9pt; width:auto; float:left; padding:5px; background-color: #fff9dd;}
.welcome { font-family: verdana; font-size:12pt; width: auto; float:left; padding:5px;}


And here is the HTML:

<!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>Preview My PPC</title>
<link rel="stylesheet" href="style1.css" type="text/css"/>
<script language="javascript">
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}

function show(id){
if (document.getElementById){
obj = document.getElementById(id);
//if (obj.style.display == "none"){
obj.style.display = "";
//}
}
}

function hide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == ""){
obj.style.display = "none";
}
}
}

</script>

<script language="javascript">
<!-- Begin
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}
// End -->
</script>

<script language="javascript">
<!-- begin

function isfirstvar(desturl) {

if (desturl.indexOf('?') !=-1) {
desturl = desturl + "&";
} else {
desturl = desturl + "?";
}
return desturl;
}

function makead() {
var desturl=document.myForm.message5.value;

if (document.myForm.message6.value.length>0) {
desturl=isfirstvar(desturl);

desturl = desturl + "utm_campaign=" + document.myForm.message6.value;
}

if (document.myForm.message7.value.length>0) {
desturl=isfirstvar(desturl);
desturl = desturl + "utm_source=" + document.myForm.message7.value;
}

if (document.myForm.message8.value.length>0) {
desturl=isfirstvar(desturl);
desturl = desturl + "utm_medium=" + document.myForm.message8.value;
}

if (document.myForm.message9.value.length>0) {
desturl=isfirstvar(desturl);
desturl = desturl + "utm_term=" + document.myForm.message9.value;
}

if (document.myForm.message10.value.length>0) {
desturl=isfirstvar(desturl);
desturl = desturl + "utm_content=" + document.myForm.message10.value;
}

var finaladcopy = document.myForm.message1.value + "\r\n" + document.myForm.message2.value + "\r\n" +document.myForm.message3.value + "\r\n" + document.myForm.message4.value + "\r\n" + desturl;

//alert("beep")
document.myForm.finalad.value = finaladcopy
}
// End -->

function dynamicad(text,id) {
if (document.getElementById)
{
x = document.getElementById(id);
x.innerHTML = '';
x.innerHTML = text;
}
else if (document.all)
{
x = document.all[id];
x.innerHTML = text;
}
else if (document.layers)
{
x = document.layers[id];
text2 = '<P CLASS="testclass">' + text + '</P>';
x.document.open();
x.document.write(text2);
x.document.close();
}

}
</script>
</head>
<body>
<div class="wrap">
<div class="header"><img src="images/ppclogo2.gif" alt="Preview My PPC" /></div>
<div class="blueline">Preview of sponsored search results using google adwords&nbsp;</div>
<div class="formwrap"><form name="myForm" action="" method="post"><div class="columnleft">
<div class="topad">
<div class="sl" align="right">Sponsored Link Preview</div>
<div><div id="adtitle"></div> <div id="adurl"style="display:inline"></div>***<div id="adline1" style="display:inline"></div>*<div id="adline2" style="display:inline"></div></div></div>
<div align="left" id="inputbox"><b>Create Ad</b>:<br />
<table width="100%" border="0" align="left" cellpadding="5" cellspacing="0" class="linktextarea">
<tr>
<td width="49%" class="style4">Title<br />
<input name="message1" type="text" class="style1" tabindex="1" onkeydown="textCounter(document.myForm.message1,document.myForm.remLen1,25);"
onkeyup="textCounter(document.myForm.message1,document.myForm.remLen1,25); dynamicad(document.myForm.message1.value,'adtitle'),dynamicad(document.myForm.message1.value,'adtitl e2')" onblur="dynamicad(document.myForm.message1.value,'adtitle'),dynamicad(document.myForm.message1.value,'adtitl e2')" size="30" wrap="physical" /></td>
<td width="47%"><input name="remLen1" type="text" class="style1" value="25" size="3" maxlength="3" readonly="readonly" />
<span class="style4">Characters remaining</span></td>
</tr>
<tr>
<td class="style4">Description Line1<br />
<input name="message2" type="text" class="style1" tabindex="2" onkeydown="textCounter(document.myForm.message2,document.myForm.remLen2,35)"
onkeyup="textCounter(document.myForm.message2,document.myForm.remLen2,35); dynamicad(document.myForm.message2.value,'adline1'),dynamicad(document.myForm.message2.value,'adline 1a')" size="30" wrap="physical" /></td>
<td><input name="remLen2" type="text" class="style1" value="35" size="3" maxlength="3" readonly="readonly" />
<span class="style4">Characters remaining</span></td>
</tr>
<tr>
<td class="style4">Description Line2<br />
<input name="message3" type="text" class="style1" tabindex="3" onkeydown="textCounter(document.myForm.message3,document.myForm.remLen3,35)"
onkeyup="textCounter(document.myForm.message3,document.myForm.remLen3,35);dynamicad(document.myForm.message3. value,'adline2'),dynamicad(document.myForm.message3.value,'adline2a')" size="30" wrap="physical" /></td>
<td><input name="remLen3" type="text" class="style1" value="35" size="3" maxlength="3" readonly="readonly" />
<span class="style4">Characters remaining</span></td>
</tr>
<tr>
<td class="style4">Display URL<br />
http://
<input name="message4" type="text" class="style1" tabindex="4" onkeydown="textCounter(document.myForm.message4,document.myForm.remLen4,35)"
onkeyup="textCounter(document.myForm.message4,document.myForm.remLen4,35);dynamicad(document.myForm.message4. value,'adurl'),dynamicad(document.myForm.message4.value,'adurl2')" onblur="document.myForm.message5.value='http://'+document.myForm.message4.value" size="30" wrap="physical" /></td>
<td><input name="remLen4" type="text" class="style1" value="35" size="3" maxlength="4" readonly="readonly" />
<span class="style4">Characters remaining</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><div align="center">
<input name="reset" type="reset" tabindex="12" onclick="resetform();dynamicad(document.myForm.message1.value,'adtitle'),dynamicad(document.myForm.message1.v alue,'adtitle2');dynamicad(document.myForm.message2.value,'adline1'),dynamicad(document.myForm.messa ge2.value,'adline1a');dynamicad(document.myForm.message3.value,'adline2'),dynamicad(document.myForm. message3.value,'adline2a');dynamicad(document.myForm.message4.value,'adurl'),dynamicad(document.myFo rm.message4.value,'adurl2')" value="Clear Preview" />
</div></td>
<td width="4%" colspan="2" rowspan="5">&nbsp;</td>
</tr>
</table>
</div><div class="welcome">
Welcome to <strong>PreviewMyPPC.com</strong> where you can preview your paid search ads for Google AdWords, Yahoo! Search Marketing and MSN adCenter. Click on the tabs above to see previews from different paid search engines. <br />
<br />
Simply enter the text you wish to use for your sponsored ads into the box below and you will see a live preview of your ad as it would appear at the top or the side of the main Google search results page.</p>
</div><div class="tips">
<p><strong>Google AdWords Tips:</strong></p>
<p>When creating an ad consider the following:</p>
<p><strong>Title:</strong> Use the main keyword(s) in your title.</p>
<p><strong>Description Line 1:</strong> Write about a descriptive benefit of your product/service here.</p>
<p><strong>Description Line 2:</strong> Write about a special offer with a call to action on this line. </p>
<p><strong>Display URL:</strong> Use your keyword(s) in the URL if possible, maybe as a subdirectory.</p>
<p><a href="https://adwords.google.com/select/guidelines.html">Click here for the Google AdWords editorial guidleines.</a><br />
<br />
<a href="https://adwords.google.com/select/main?cmd=Login&amp;sourceid=Yh91503)">Click here to claim a $50 coupon for new Google AdWords customers.</a></p>
</div></div>
<div class="columnright"><div class="sl2" align="center" >Sponsored Link Preview</div><div class="sidead"><div id="adtitle2" style="margin-top:4px"></div>
<div id="adline1a"></div>
<div id="adline2a"></div> <div id="adurl2"></div></div></div></form><script language="javascript">
function resetform() {
document.myForm.message1.value="";
document.myForm.message4.value="";
document.myForm.message2.value="";
document.myForm.message3.value="";
document.myForm.message1.focus();
}
</script></div>

<div class="push"></div>
<div class="footer" align="center" style="float:none">&copy; UK Offer 2007 </div>
</body>
</html>


I think I need to use a clear command maybe, but I'd really appreciate some help :D

_Aerospace_Eng_
09-20-2007, 04:13 PM
Add clear:both; to the styles for your footer.

gjindancer
09-20-2007, 04:19 PM
Wow thanks! also - adding overflow:hidden; to the wrap div works too!

OK so the only problem is - why is FF forcing my text underneath the div with the form in it??

Thanks

Dan

_Aerospace_Eng_
09-20-2007, 04:29 PM
Remove

float:left;
width:auto;
from .tips and .welcome



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum