Hello everyone. I'm designing a site and I've encountered an issue with the footer.
http://www.drawninwardmedia.com/other/DIG/index.html
Above is a link to the test site. I haven't tested it in IE, but in Firefox and Safari there is extra space surrounding the footer. Below I've included the the html and css markup. If anyone has any suggestions they would greatly be appreciated.
CSS
/*----HTML ELEMENTS----*/
/*--------Body--------*/
body {
text-align: center;
background-image: url(../images/bg.jpg);
background-repeat: repeat;
}
p, a, h1, h2 {
font-family:Arial, Helvetica, sans-serif;
}
/*--------end of body--------*/
/*----END OF HTML ELEMENTS----*/
/*----PAGE ELEMENTS----*/
/*--------Container--------*/
#container {
margin: 0 auto;
width: 740px;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}
/*--------end of container--------*/
/*--------Header--------*/
#header {
width: 740px;
}
/*--------end of header--------*/
/*--------Nav Bar--------*/
#navbar {
width: 740px;
}
/*--------end of nav bar--------*/
/*--------Right Column--------*/
#right_column {
float: right;
width: 465px;
}
/*--------end of right column--------*/
/*--------Content--------*/
#content {
width: 417px;
background-image: url(../images/rightcorner_lock.jpg);
height: 577px;
background-repeat: no-repeat;
}
#content a {
color: #93b896;
font-size: 12px;
text-decoration: none;
}
#content a: hover {
color: 7b8fb4;
text-decoration: none;
font-size: 12px;
text-decoration: none;
}
#content a: visited {
color: #93b896;
font-size: 12px;
text-decoration: none;
}
#content h1 {
font-size: 24px;
color: #75b080;
padding-top: 75px;
}
#content h2 {
font-size: 12px;
color: #5b73a1;
}
#content p {
color: #494c53;
font-size: 12px;
text-align: justify;
padding-right: 25px;
padding-left: 25px;
}
.pad_lock_top {
float: right;
margin-top: 105px;
}
/*--------end of content--------*/
/*--------Left Column--------*/
#left_column {
float: left;
width: 261px;
background-image: url(../images/leftbar.jpg);
height: 577px;
}
.button {
margin-right: 26px;
margin-top: 150px;
}
/*--------end of left column--------*/
/*--------Line Break--------*/
#line_break {
clear: both;
height:0;
line-height: 0;
display:block;
font-size: 1px;
}
/*--------end of line break--------*/
/*--------Footer--------*/
#footer {
width: 740px;
background-color: #808080;
background-image: url(../images/corner_lockbottom.jpg);
background-repeat: no-repeat;
background-position: 545px top;
}
#footer a {
color: #5B5B5B;
text-decoration: none;
}
#footer a: hover {
color: #FFFFFF;
}
#footer a: visited {
color: #FFFFFF;
}
#footer p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #5b5b5b;
text-align: center;
}
.pad_lock_bottom {
z-index: 1;
}
/*--------end of footer--------*/
/*----END OF PAGE ELEMENTS----*/
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Dean Insurance Group: Home Page</title>
<style type="text/css">
<!--
@import url("style_sheets/site-style.css");
-->
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="images/Header.jpg" width="740" height="125" alt="Dean Insurance Group: Making Insurance Easy Since 2008" /></div>
<div id="navbar">
nav bar
</div>
<div id="right_column">
<div id="content">
<h1>"Making Insurance Easy"</h1>
<p>
We listen to your needs before providing you a solution. Being independent allows us to offer that solution with the best price and coverage possible. Instead of being tied to one company we will give you more than one choice, and guide you though the process.
<br />
<br />
Your insurance agent will guide you through any type of personal coverage you need. Contact us now to see what our friendly agents can do for you.
</p>
<br />
<img src="images/cornerlock_top.jpg" class="pad_lock_top" width="150" height="201" alt="padlock" />
</div>
</div>
<div id="left_column">
<img src="images/leftbar_button.jpg" class="button" width="212" height="54" alt="Get a free quote" />
</div>
<div id="line_break">
</div>
<div id="footer">
<p align="center">
<a href="#">HOME</a> <a href="#">AUTO</a> <a href="#">LIFE/HEALTH</a> <a href="#">CONTACT</a> <a href="#">CLAIMS</a>
</p>
<hr width="75%" align="center" color="#919191" />
<p align="center">© 2008 Dean Insurance Group, All Rights Reserved</p>
</div>
</div>
</body>
</html>
