The footer breaks if there isn't enough content. Here the one with the correct footer. http://amplifydesignstudio.com/upsnap/ Here is one where there isn't enough content. http://amplifydesignstudio.com/upsnap/template.htm I've tried using <div style="clear:both"></div> Code (markup): and it didn't work. I'm at a loss, any suggestions?
I would suggest that your structure this differently, as the current layout will always have alignment problems. Take the footer out of the tail-bottom div and give it its own div below all that. Make an outer div 100%wide with the desired background image, then an inner div with the same margin:0 auto and width 981px. That will be a much more robust solution. Of course, remove the footer background image from its original location.
The page with the current changes are http://amplifydesignstudio.com/upsnap/template.htm. The header height is still dependant upon page size. Also, when I removed the image from tail-bottom it changed the background color. I put the background color in tail-bottom, but it did not change the background color. Any ideas what will fix this?
It looks fine to me in firefox. I've lost rack of how you want it to look. If the footer background color is just meant to be the same as for the page background, you don't need a background image at all now.
Both links broken here in Opera - and I know why, dynamic fonts over a FIXED HEIGHT image... Which is pretty much instant /FAIL/... though the broken layouts I'm seeing seem unrelated to anything with the footer, which is the one element that looks like it's behaving PROPERLY. Not even sure what's 'broken' in the shorter one in that regard. Across the board I see issues with the layout. Fixed height containers, fixed height non-tiled images, use of alpha .png for no good reason... and that's BEFORE we even talk about the non-semantic markup (div for obvious HEADINGS) and definition list abuse. What Ralph.M said about structuring it differently? Double it. I would probably throw away most of the existing markup before even TRYING to move on with that. Oh and a little advice, 400px for a BANNER is too much, on a factor of about four. Yer pushing the actual page content (the stuff people go to sites for) clean off the page at anything less than 800px height, and it's generally accepted that if users have to scroll down to see anything meaningful, they probably won't bother investigating the site further. Really for markup, I'd axe MOST of the div and a lot of the paragraphs and lists you are using - using DIV to group like elements together, not as CDATA wrappers. Something like... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <!-- Don't forget to implement these later! <link type="text/css" rel="stylesheet" href="print.css" media="print" /> <link type="text/css" rel="stylesheet" href="handheld.css" media="print" /> --> <title> Home - UpSnap </title> </head><body> <!-- empty tags like SPAN and B below are image sandbags for sliding doors or glider-levin replacement - do not remove!!! Horizontal rules and .jumpto menus should be removed by CSS and are present for CSS off users only. --> <div id="pageWrapper"> <h1> Up<span>SNAP</span> <b></b> </h1><hr /> <ul id="mainMenu"> <li><a href="index.htm" class="current">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Network</a></li> <li><a href="#">Solutions</a></li> <li><a href="#">Partners</a></li> <li><a href="#">Login</a></li> <li><a href="#">Contact</a></li> </ul><hr /> <div id="features"> <div class="borderTop"></div> <div class="section"> <h2><a href="#">Network</h2> <p> Learn about our Network </p> <ul> <li><a href="#"><strong>Scalable Mobile Content</strong></a></li> <li><a href="#">> 1,000 Voice Services</a></li> <li><a href="#">Mobile Ads</a></li> <li><a href="#">Call-based Advertising</a></li> </ul> <a href="#" class="details">View details</a> <!-- .section --></div> <div class="section"> <h2><a href="#">SOLUTIONS</a></h2> <p> Learn about our Capabilities </p> <ul> <li><a href="#">Interactive Voice Recording</a></li> <li><a href="#">Customized</a></li> <li><a href="#">Call to Action</a></li> <li><a href="#">Connect to Call Center</a></li> </ul> <a href="#" class="details">View details</a> <!-- .section --></div> <div class="section"> <h2><a href="#">CAPABILITIES</a></h2> <p> More Capabilities </p> <ul> <li><a href="#"><strong>Mobile Web</strong></a></li> <li><a href="#">Customized Banner Ads</a></li> <li><a href="#">Connect to Info Page</a></li> <li><a href="#">Connect to Call Center</a></li> </ul> <a href="#" class="details">View details</a> <!-- .section --></div> <div class="section"> <h2><a href="#">PARTNERS</a></h2> <p> More Capabilities </p> <ul> <li><a href="#"><strong>SMS (Text Messaging)</strong></a></li> <li><a href="#">Customized</a></li> <li><a href="#">Daily Alerts</a></li> <li><a href="#">Click to Call</a></li> </ul> <a href="#" class="details">View details</a> <!-- .section --></div> <div class="section last"> <h2><a href="#">RADIO STATIONS</a></h2> <p> 6 months FREE trial </p> <ul> <li><a href="#">Unlimited web space</a></li> <li><a href="#">Unlimited bandwidth</a></li> </ul> <a href="#" class="details">View details</a> <!-- .section --></div> <div class="borderBottom"></div> <!-- .features --></div> <div id="subFeatures"> <div class="section title1"> <h2>Title1<span></span></h2> <ul> <li><a href="#">Full root access and rebooting</a></li> <li><a href="#">4-core servers running Xen virtualization</a></li> <li><a href="#">Mobile management portal for smartphones</a></li> <li><a href="#">Ajax console access</a></li> <li><a href="#">Bootable rescue mode</a></li> <li><a href="#">Private IPs for inter-slice communication</a></li> <li><a href="#">HA capabilities via shared IPs</a></li> </ul> <!-- .section --></div> <div class="section title2"> <h2>Title2<span></span></h2> <ul> <li class="lorem"> <a href="#">Lorem ipsum dolor sit</a> consectetuer adipiscing praesent vestibulum. </li> <li class="adipiscing"> <a href="#">Adipiscing praesent</a> vestibulum aenean nonummyhe ndrerit mauris. </li> <li class="praesent"> <a href="#">Praesent vestibulum aenean</a> nonum- myhe ndrerit mauris hasellus porta. </li> <li class="adrerit"> <a href="#">Adrerit mauris hasellus porta</a> fusce suscipit varius mi cum sociis natoque. </li> </ul> <!-- .section --></div> <div class="section title3"> <h2>Title3<span></span></h2> <h3> Lorem ipsum dolor sit consectetuer adipi- scing Praesent vestibulum Aenean non- ummyhendrerit mauris. </h3> <p> Lorem ipsum dolor sit consectetuer adipiscing Praesent vestibulum Aenean nonummyhendrerit mauris. Hasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis. </p> <a href="#" class="more">Read more</a> <!-- .section --></div> <!-- .subFeatures --></div> <div id="footer"><hr /> <ul> <li><a href="index.htm" class="current">Home</a>|</li> <li><a href="#">About</a></li> <li><a href="#">Network</a></li> <li><a href="#">Solutions</a></li> <li><a href="#">Partners</a></li> <li><a href="#">Login</a></li> <li><a href="#">Contact</a></li> </ul> UpSnap Services LLC © 2009 | <a href="#">Privacy Policy</a> | <a href="#">T&Cs</a> <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): Would be a good start. Should have all the hooks needed for the appearance you were aiming for. If I have the time later this week, I'll toss together a CSS and remastered images to show you how I'd approach that (with a hey mom, look no alpha .png)