VAlindaloo Posted November 29, 2009 Report Share Posted November 29, 2009 (edited) Hi! I'm trying to finish my final project for my web design class and I have coded a CSS for my footer to fit in my container. Unfortunately, from the index page to the other pages, the footer decides to become it's own little floating box and doesn't stay flush with the margins or the border around the container. What the heck? Do I adjust it with tags, , or   until I get it where I want it?? The rest of the page looks great, just the footer moves around. grrr! Any help would be greatly appreciated!! Linda Edited November 29, 2009 by VAlindaloo Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 29, 2009 Report Share Posted November 29, 2009 Do you have a link or at least the code so we can see what you have there? Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 29, 2009 Report Share Posted November 29, 2009 And also - s and s are not meant to be used for layout and to create space. Quote Link to comment Share on other sites More sharing options...
VAlindaloo Posted November 30, 2009 Author Report Share Posted November 30, 2009 The site is not published yet, so here's the code I used for the container and the footer. Thanks for your help! #container { width: 900px; margin-left: auto; margin-right: auto; height: auto; font-weight: 1.0em; font-family: Arial, Verdana, sans-serif; font-weight: bold; overflow: hidden; border: 3px solid #000000; line-height: 150%; background-color: #FFF8DC; text-align: center; } #footer { font-size: .85em; font-style: italic; font-weight: bold; background-color: #C67171; color: #000000; padding-top: 5px; padding-bottom: 5px; width: 100%; clear: both; text-align: center; } Hope this helps find a solution to my problem - thanks, again! Linda Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 30, 2009 Report Share Posted November 30, 2009 That's not enough - we need ALL of it - HTML and CSS. Quote Link to comment Share on other sites More sharing options...
VAlindaloo Posted November 30, 2009 Author Report Share Posted November 30, 2009 Home About Services Contact Me My Blog What is a Virtual Assistant? I'm glad you asked! ?A Virtual Assistant (VA) is a highly-trained independent entrepreneur who provides a myriad of business support services virtually via phone, fax and internet based technology to support and meet the growing needs of businesses worldwide. Partnering with a VA reduces stress, protects cash flow, eliminates administrative hassles, and enables business people to find the success they originally set out to achieve. A VA is your right hand person helping you to succeed in your business. The irony is you may never meet your VA as odds are they live nowhere near you!? VAnetworking Now that you know what a Virtual Assistant is and what we can do, I?ll bet you?re asking yourself... ?What can Villa Linda Business Solutions do for me?? Well...How does this sound???? Internet marketing Article, newsletter, email writing Professional Business writing and editing Social Media Specialist And much, much more!!! So, if you are in the market for taking your business to the next level, but can't seem to find the time... let me help! And remember???Lindaloo works for you?!! Call(505) 604-2696 OR email info@lindalooworksforyou.com for a quote. ALL inquiries will be answered within 24 hours! Quote Link to comment Share on other sites More sharing options...
Susie Posted November 30, 2009 Report Share Posted November 30, 2009 (edited) Linda, Is the footer supposed to extend the full width of the main container or is it supposed to just be at the bottom of the right column? I uploaded it and it shows one way in Firefox/Safari/Opera and another way in Internet Explorer. Check it out here Edited November 30, 2009 by Susie Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 30, 2009 Report Share Posted November 30, 2009 You have several issues - beginning with <?xml version="1.0" encoding="UTF-8"?> which does not belong to an HTML document. Next comes your XHTML doctype- you're writing HTML, not XHTML. Then there is no charset. If you drop the <?sml version... line and add the proper charset, you lose the funky characters you see now in IE7 and 8 (http://www.aandbwebdesign.com/misc/linda.html) Your navigation is actually a list and should be written as such. To create space on your site, use padding and margins in your CSS - s are line breaks ONLY, and s are to prevent a breaking space, not to create space. The blockquote tag is for quotes - again, not for spaces. - http://www.w3schools.com/TAGS/att_blockquote_cite.asp tags are heading (title) tags and meant to be used in order of importance. The h1 tag is the main heading of a page - generally the name/title of a webpage. The next important heading would be , then , etc. You style those tags in your CSS, so an is not necessary. An h tag by its very nature is already emphasized. My lunch is about over and I need to get back to work, but there are also several semantic issues in your CSS. Also, always check your pages in more than just one browser, and VALIDATE - http://www.w3schools.com/site/site_validate.asp Quote Link to comment Share on other sites More sharing options...
VAlindaloo Posted November 30, 2009 Author Report Share Posted November 30, 2009 Hi, First, thank you both for your input. Andrea - I will follow your instructions and fix the errors you found. Susie - The left column goes to the bottom of the container with the footer going from the column to the right margin - so it shouldn't go across the entire bottom, only from the footer to the right margin. Again, thanks! Linda Quote Link to comment Share on other sites More sharing options...
Susie Posted November 30, 2009 Report Share Posted November 30, 2009 Well, there are a lot of issues with the code as Andrea mentioned, but as far as the footer goes, I have often found that if you declare a width (rather than use 100%), Internet Explorer will play along. So, try adding width:735px; and float:right; to the footer. It works for me: check here. Quote Link to comment Share on other sites More sharing options...
VAlindaloo Posted November 30, 2009 Author Report Share Posted November 30, 2009 Thank you very much! If I can get the footer to work for this project, I can finish the class. I really appreciate it! The class I'm taking is XHTML complete and the <?xml version="1.0" encoding="UTF-8"?> is what our book says we must use for every page we code - is that not true? I will be using this forum and any tutorials I can find online to help me learn how to do this correctly, so any other tips you can think of would be very helpful. Thanks, again! Linda Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted November 30, 2009 Report Share Posted November 30, 2009 The W3C and its validator allows (and suggests) dropping this xml declaration because it fails in Internet Exploder. Quote Link to comment Share on other sites More sharing options...
VAlindaloo Posted December 1, 2009 Author Report Share Posted December 1, 2009 Thank you! You all were so helpful, I truly appreciate it! Linda Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.