I need an extra set of eyes to troubleshoot an existing website… I decided to re-write the stylesheet (from a previous outsourcer) because it was too code heavy and in the process i've managed to move the footer to the far right of the main content instead of falling to the bottom. Also, when I add a transparent image to the header, I'm losing the header bg. Oh, and there's an added empty line between the nav image and the main content. I’ve mucked around with this for so long that I’ve lost track of what I’m looking for and can’t “see†the problems. Anyone feel like taking a stab at this?? I uploaded the original site to http://offlinenet.com/test1 and the “do over†is at http://offlinenet.com/test1/do-over Thx in advance for your help <body> <div id="heading"> <div id="container"> <div id="logo"> </div> <!-- END LOGO --> <ul id="nav"> </ul> <!-- END NAV --> <div align="center"> <!-- BEGIN Image Map --> <img src="image.png" border="0" width="897px" height="227px" usemap="#map" /> <map name="map" id="map"> <area shape="rect" coords="10,46,142,218" href="#" /> <area shape="rect" coords="159,71,291,218" href="#" /> <area shape="rect" coords="306,85,439,218" href="#" /> <area shape="rect" coords="456,87,590,217" href="#" /> <area shape="rect" coords="605,72,739,217" href="#" /> <area shape="rect" coords="754,48,889,218" href="#" /> </map> </div> <!-- END CENTER --> <!-- END Image Map --> </div> <!-- END CONTAINER --> </div> <!-- END HEADING --> <div class="main"> <div class="left"> </div> <!-- END LEFT --> <div class="right"> </div> <!-- END RIGHT --> </div> <!-- END MAIN --> <div class="clear"></div> <div id="footer"> <div class="footer-container"> <div class="wrapper"> <div class="fleft"> <img src="image.png" alt="" />© All Rights Reserved </div> <div class="fright"> <a href="#" target="_blank">Privacy</a> | <a href="#" target="_blank">About Us</a> | <a href="#" target="_blank">Contact</a> | <a href="#" target="_blank">Home</a> </div> </div> <!-- END WRAPPER --> </div> <!-- END FOOTER-CONTAINER --> </div> <!-- END FOOTER --> </body> CSS #container { margin:0 auto; width:960px; position: relative; font-size:.8525em; } .wrapper { width:100%; overflow:hidden; } .clear {clear: both and height: 0} #heading { height:380px; overflow:hidden; background:url(images/bg-hdrx.jpg) 0 0 repeat-x; } #map { margin-left: 30px; } .main {margin:0 auto; width:891px; } .main .left {float:left; padding:0 20px 0 45px;width:550px;font-size:.95em;} .main .right {float:left; background:url(images/content-separator.png) no-repeat; padding:0 51px 0 33px; width:187px; height: 313px; font-size:.95em; } .main .right {overflow:visible; zoom:1;} #footer {color:#000000; padding:20px 0 22px 0; border-top:5px solid #eee;} #footer .footer-container { margin:0 auto; width:960px; font-size:.8525em;} #footer .fleft { padding-left:20px; width:550px; overflow:hidden; } #footer .fright { padding-right:40px; width:250px; } #footer .fleft img { margin-left:-20px; overflow:hidden; }
There are a lot of issues with your code and website in general. It would be helpful if you could explain each and every problem you're having trouble with, and also mention which browser the problem occurred in.
It would also be really cool if you could upload your site to a server, so that we could view the site with firebug, Makes life so much easier
thx folks - yes, i know there were other issues but the priority was to find the bugs for the footer and header. These were "found" yesterday, after which I tackled the minor problems. It's all good now. Am going to remove the files that I uploaded for the post so the links in the OP are no longer valid. Thx anyway... (gotta love forums!)