go to rosshavenfarm.com/index.html Help me fix the footer so it goes to the bottom of the page. I will pay you $1 for the fixed css file.
<!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" /> <!-- TemplateBeginEditable name="doctitle" --> <title>Ross Haven Farm</title> <!-- TemplateEndEditable --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --> <style type="text/css"> <!-- .style3 {font-size: large} .style4 {font-size: 20px} .style6 {font-size: 39px} .style7 {font-size: 24px} --> </style> </head> <meta name="description" content="Equine Convalescence, Equine Layup, Equine Rehabilitation, Equine Boarding, Equine Farm, Farm"> <body> <div class="main"> <div class="tophead"> <h1><span class="style6">Ross Haven Farm. </span><span class="style4">Sturbridge, Massachusetts</span><br /> <span class="style7">Your Equine Convalescent Care Facility</span></h1> </div> <div class="header"><div id="tabsB"> <ul> <li><a href="index.html" title="Home"><span>Home</span></a></li> <li><a href="thefarm.html" title="The Farm"><span>The Farm</span></a></li> <li><a href="services.html" title="Our Services"><span>Services</span></a></li> <li><a href="staff.html" title="Staff"><span>Staff</span></a></li> <li><a href="testimonials.html" title="Testimonials"><span>Testimonials</span></a></li> <li><a href="visit.html" title="Visit Us"><span>Visit Us</span></a></li> <li><a href="directions.html" title="Directions to the farm."><span>Directions</span></a></li> <li><a href="contact.html" title="Contact Us"><span>Contact Us</span></a></li> <li><a href="links.html" title="Links"><span>Links</span></a></li> <li><a href="album.html" title="Album"><span> Album</span></a></li> </ul> </div></div> <div class="contents"><!-- TemplateBeginEditable name="Text Region" --> <div class="left"> <h1>Welcome</h1> <div id="text4" name="text4"></div> <h2><strong>For Horse Owners</strong>:</h2> <p class="style3"> <img src="images/index/3horses.gif" alt="3 horses in the field" width="382" height="285" align="right" />Ross Haven Farm offers a quiet and relaxed farm environment, managed by medical professionals, in which horses recovering from illness or injury can effectively rebuild depleted resources and regain lost vitality.</p> <p class="style3">Experienced owners recognize that horses recuperating from medical or surgical procedures reach a point when they are sufficiently improved to warrant discharge from a primary care facility, but they may not be ready to return to the rigors of the show barn or training farm. Alternatively, while your horse may be ready to return home, he or she may require continued medical care or other treatment which you may be reluctant to provide for reasons of inexperience, limited facilities, or simply a lack of time. </p> <p class="style3">Whatever the reason, you now have the opportunity to transition your horse’s convalescence through our comprehensive care facility staffed by knowledgeable individuals with both equestrian and medical experience.</p> <p> </p> <h2><strong>For Veterinarians</strong>:</h2> <p><img src="images/index/mare-and-foal-1.gif" alt="Mare and Foal" width="382" height="285" align="right" />When your expertise, time and resources have successfully brought your patient to the point where immediate veterinary oversight is no longer required, but continued care needs may exceed the resources of the owner or trainer, consider Ross Haven Farm as an interim comprehensive care facility.</p> <p>Staffed by capable and experienced care providers, you can be assured that your patient’s interests will be our top priority, that your recommendations will be closely followed, and that the opportunity for frequent communication between all parties will be maintained. </p> <p align="left"> </p> </div></div> <!-- TemplateEndEditable --></div> <div class="footer" style="clear:both;"> <div class="footertexts">© Ross Haven Farm Inc., 188 Shepard Road, Sturbridge, Massachusetts 01566-1416<br /> Telephone: 508-868-7091 or 508-868-9892<br /> Email: kh@rosshavenfarm.com<br /> Designed by<a href="http://ramblingsoul.com"> Rambling Soul</a> | <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | CSS <br /> </div> </div> </div> </body> </html> Code (markup): Try that.... answer back if it didn't work...
Logoesdotbiz: Your CSS file contains html code in it. It should not. Anyway, when you replace the css file with the correct one, do the following change and it should make your footer move all the way down, to where it should be: Change <div class="footer"> Code (markup): to <div class="footer" style="clear:both;"> Code (markup):
Try working with the footer now, the other css seems to not have been my original css for some reason. please post the code.
man your web site doesn't apply the archive css and looks crap when you see it in the internet explorer navigator and in the firefox all the text element is mixed with the other
Hi, Make the change to your footer div as I said earlier and everything will be alright. Check this screenshot: Let me know if you still can't figure it out. I'll attach the updated css file then.
it only works for some pages, check past the first page... idk whats up with this. help plz my client is trusting me to be able to fix this
I hope you know how to edit css... Just remove the height property (height:16px) from the .main .contents .left class.
add to html style: html { position:relative; height:100%; } div.footer { background-color: #BEC4F2; background-image: url(../images/footerdiv.png); background-position: center top; background-repeat: no-repeat; bottom: 0px; height: auto; padding: 35px 25px 0px; position:absolute; width:707px; } and yes - remove height:16px from the .main .contents .left class.
It always is easy when you find the answer... and thanks but no thanks. Well, money is the biggest motivator for most of us. You also came
Giving position:absolute will just fix the footer the bottom of the browser's viewport and it won't scroll (stick) down/up with the page contents.
Yes - I think He need footer to be always at the bottom of the page (maybe not?). If mid-content of the page is small footer will be in the middle. With this solution footer will be always at the bottom of page, no matter how big is content.