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; }
