Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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:

    Code:
    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:
    Code:
    <!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,'adtitle2')" onblur="dynamicad(document.myForm.message1.value,'adtitle'),dynamicad(document.myForm.message1.value,'adtitle2')" 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,'adline1a')" 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.value,'adtitle2');dynamicad(document.myForm.message2.value,'adline1'),dynamicad(document.myForm.message2.value,'adline1a');dynamicad(document.myForm.message3.value,'adline2'),dynamicad(document.myForm.message3.value,'adline2a');dynamicad(document.myForm.message4.value,'adurl'),dynamicad(document.myForm.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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Add clear:both; to the styles for your footer.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Remove
    Code:
    float:left;
    width:auto;
    from .tips and .welcome
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •