Can someone please tell me why my footer image(contents-bottom) isn’t aligning properly? I had my site designed by someone and I changed my footer image(although it’s not in the footer code b/c I don’t want it there) and it did this. Pic attached shows the image aligning with the navigation and up to far. Coding:
*|* {
margin:0pt;
padding:0pt;
}
body {
background-image: url("pinkdots.png"); repeat-repeat center top;
font-family:"century gothic", arial, sans-serif;
font-size:10px;
color:#ef5f90;
padding:0;
}
p {
line-height:1.5;
padding-bottom:0px;
}
h1 {
font-size:12px;
font-weight:bold;
color:#eb79a4;
line-height:0;
}
h2 {
font-size:14px;
font-weight:bold;
color:#000000;
}
#wrapper {
width:960px;
margin:0pt auto;
}
#header {
float:left;
width:100px;
height:10px;
margin-bottom:0px;
}
.weebly_header {
float:left;
background-image: transparent; repeat-x center top;
width:960px;
height:0px;
margin-top:0px;
}
#sitename {
float:left;
height:101px;
width:860px;
font-size:30px;
color:#cccccc;
font-weight:normal;
padding-top:25px;
}
#content-wrapper {
float:left;
width:960px;
}
#contents-top {
float:left;
background:transparent url(content_top.gif) no-repeat center top;
width:960px;
height:15px;
}
#contents-body {
float:left;
width:916px;
padding:10px 20px 0px 20px;
background-color:#ffffff;
border-left: 2px solid #2a1908;
border-right: 2px solid #2a1908;
margin-top:-4px;
}
*html #contents-body {
float:left;
width:916px;
padding:10px 18px 10px 19px;
background-color:#ffffff;
margin-top:-2px;
border-left: 2px solid 06a8e5;
border-right: 2px solid 06a8e5;
margin-top:0px;
}
#navigation {
float:left;
width:205px;
}
#nav-top {
background: transparent url(nav_top.jpg) no-repeat center top;
width:205px;
height:32px;
}
#nav-bottom {
float:left;
background: transparent url(nav_bottom.gif) no-repeat center top;
width:205px;
height:10px;
}
#navigation ul {
width:205px;
position:relative;
margin:0 auto;
list-style-type:none;
}
*html #navigation ul {
width:203px;
padding-right:0px;
}
#navigation-links {
float:left;
width:203px;
padding:0px;
margin:0px;
}
*html #navigation-links {
}
#navigation li {
float:left;
background: transparent url(navlink_background.gif) no-repeat center top;
font-size:14px;
padding:10px 0 0 4px;
width:188px;
height:12px;
list-style:none;
text-align:left;
}
*html #navigation li {
}
#navigation a:link {
color:#583e19;
font-weight:normal;
text-decoration:none;
}
#navigation a:hover {
color:#f80e81;
font-weight:normal;
text-decoration:none;
}
#navigation a:visited {
color:583e19;
font-weight:normal;
text-decoration:none;
}
#active a:link {
color:#f80e81;
font-weight:normal;
text-decoration:none;
}
#active a:hover {
color:#f80e81;
font-weight:normal;
text-decoration:none;
}
#active a:visited {
color:06a8e5;
font-weight:normal;
text-decoration:none;
}
a:link, a:hover, a:visited {
color:#583e19;
font-weight:normal;
text-decoration:underline;
}
#contents {
float:right;
width:660px;
padding:20px 30px 30px 10px;
}
#contents-bottom {
float:left;
background-image: url("http://img690.imageshack.us/img690/467/bellafoot.jpg"); no-repeat center top;
width:960px;
height:100px;
padding:0
margin:0
}
#footer {
float:left;
width:960px;
margin:20px 0 30px 0;
visibility:hidden
}
#footer-contents {
float:left;
color:#666666;
text-align:right;
font-family:"lucida grande", "lucida sans", arial, sans-serif;
padding:7px 10px 0 0px;
width:940px;
height:28px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>%%TITLE%%</title>
<link rel="stylesheet" type="text/css" href="main_style.css">
<!--[if IE 7]>
<style>
p {
line-height:20px;
padding-bottom:0;
}
h1 {
font-size:20px;
font-weight:bold;
color:#583e19;
padding-bottom:0;
}
h2 {
font-size:16px;
font-weight:bold;
color:#272e34;
padding-bottom:0;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="weebly_header"></div>
<div id="sitename">%%TITLE%%</div>
</div>
<div id="content-wrapper">
<div id="banner">
<img src="/files/theme/birdheader.png" width="960" height="272" border="0" usemap="#map" />
<map name="map">
<area shape="circle" coords="704,45,33" href="http://..." />
<area shape="circle" coords="790,44,33" href="http://.../contact-us.html" />
<area shape="circle" coords="873,44,33" href="http://.../faq--important-info.html" />
</map>
<div id="contents-body">
<div id="navigation">
<div id="nav-top"></div>
<div id="navigation-links">%%MENU%%</div>
<div id="nav-bottom"></div>
<br>
<BR> <!-- start of freefind search box html -->
<table cellpadding=0 cellspacing=0 border=0 >
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 7.5pt;">
<form style="margin:0px; margin-top:4px;" action="http://search.freefind.com/find.html" method="get" accept-charset="utf-8" target="_self">
<input type="hidden" name="si" value="80587153">
<input type="hidden" name="pid" value="r">
<input type="hidden" name="n" value="0">
<input type="hidden" name="_charset_" value="">
<input type="hidden" name="bcd" value="÷">
<input type="text" name="query" size="15">
<input type="submit" value="search">
</form>
</td>
</tr>
</tr>
</table>
<!-- end of freefind search box html -->
<BR> <img src="http://img59.imageshack.us/img59/4267/paypale.gif" border="0" alt="Solution Graphics">
<a href="http://www.facebook.com/" target="_blank">
<img src='http://img46.imageshack.us/img46/2111/fbpink.png' border='0'/></a>
<!-- data banner code begin -->
<a href="http://modmommashoppes.gotop100.com/in.php?ref=1319" target="_blank">
<img src="http://modmommashoppes.gotop100.com/lists/modmommashoppes/custombanners/87121.png" border="0" width="165" height="165"alt="Mod Momma Shoppes"> </a>
<!-- data banner code end -->
<a href="http://poshmomboutiques.gotop100.com/in.php?ref=1769" target="_blank">
<img src="http://...5544104.png" border="0" width="165" height="166"alt="Top 100 Princess Sites"> </a>
</div>
<div id="contents">%%CONTENT%%</div>
<div>
<div id="contents-bottom"></div>
<p align=center> ©2009 - 2010 Bella Bows. All rights reserved.
<div id="footer">
<div id="footer-contents">%%WEEBLYFOOTER%%<div>
</div>
</div>
</div>
</body>
</html>
