Help Me Remove Spacing in #middle
Hello,
I need some help to remove extra space at the bottom of my middle div in Netscape 8.0.
Can you help?
Here is my CSS:
Code:
/* CSS Document */
body {
font-family: Verdana, Tahoma, Helvetica;
font-size: 62.5%;
line-height: 160%;
cursor: default;
margin: 0;
padding: 0;
text-align: center;
background: url(images/bg.gif);
}
img{border:0}
p {
margin: 0 0 10px 0;
font-size: 12px;
line-height: 175%;
clear: left;
text-align: left;
}
p.signature {
font-style: italic;
margin-left: 270px;
}
p.photo {
text-align: center;
margin: 30px 0;
}
p.photo2 {
text-align: center;
margin-top: 30px;
}
p.photo img {border:1px solid #000000;}
p.photo2 img {border:0;}
a:link, a:active {
text-decoration: underline;
color: #CC0053;
}
a:visited {color: #CC3366;}
a:hover {text-decoration: none;}
ul.sitemap {
padding: 20px 0 0 40px;
}
ul.indented1 {
padding-left: 20px;
}
ul.indented2 {
padding-left: 30px;
}
li.nested {
list-style-type: none;
margin: 0;
padding: 0;
}
h1 {
font-size: 19px;
line-height: 150%;
color: #000;
text-align: center;
font-weight: normal;
margin: 0;
}
h1.red {
color: #CC0033;
margin: 10px 0 20px 0;
}
h2 {
font-size: 1.7em;
margin: 0;
font-weight: normal;
text-align: left;
}
#heading {
width: 816px;
height: 82px;
margin: 0 auto;
background: url(images/heading.gif);
position: relative;
}
#description {
width: 487px;
text-align: center;
position: absolute;
top: 46px;
left: 0;
font-size: 1.1em;
font-style: italic;
}
#contact {
position: absolute;
top: 22px;
right: 55px;
text-align: right;
font-size: 1.1em;
}
#contact span.phone {
font-weight: bold;
}
#navbar {
height: 32px;
width: 816px;
margin: 0 auto;
padding-top: 13px;
background: url(images/navbar_top.gif) no-repeat;
position: relative;
text-align: center;
font-size: 1.1em;
}
* html #navbar {height:48px;he\ight:32px}
.navbar-links a:link, .navbar-links a:visited, .navbar-links a:active {
text-decoration: none;
color: #000;
margin: 0 5px;
font-weight: bold;
}
.navbar-links a:hover {
text-decoration: underline;
}
#middle {
width: 756px;
margin: 0 auto;
padding: 26px 30px 0 30px;
background: url(images/middle_bg.gif) repeat-y;
overflow: hidden;
text-align: left;
}
* html #middle {width:816px;w\idth:756px;}
#left {
width: 232px;
text-align: center;
position: relative;
float: left;
background: url(images/sidebar_bg.gif) repeat-y;
}
#left-top {
background: url(images/sidebar_top.gif) no-repeat top;
width: 232px;
height: 13px;
}
#left-bottom {
background: url(images/sidebar_bottom.gif) no-repeat bottom;
width: 232px;
height: 13px;
}
#left ul {
margin: 10px 15px 0 25px;
padding: 0;
text-align: left;
list-style-type: none;
}
#left li {
margin: 0;
background: url(images/bullet.gif) no-repeat left center;
padding: 0;
}
#left ul a:link, #left ul a:visited, #left ul a:active {
font-size: 11px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 20px;
text-decoration: none;
font-weight: bold;
color: #000000;
display: block;
}
#left ul a:hover {
font-size: 11px;
font-weight: bold;
color: #990033;
}
#left p.comment {
margin: 0 20px;
font-size: 1.1em;
font-style: italic;
}
#left p.author {
margin: 0 20px 20px 20px;
font-size: 1em;
text-align: right;
line-height: 150%;
}
#right {
position: relative;
float: right;
width: 488px;
}
#main {
clear: both;
text-align: center;
padding: 20px 0;
position: relative;
}
.box1 {
width: 163px;
height: 246px;
position: absolute;
top: 61px;
right: 37px;
}
.box1 p {
margin: 0 0 10px;
font-size: 1.2em;
}
.box1 p.details {
font-size: 1.1em;
text-align: right;
}
#footer {
width: 816px;
height: 34px;
margin: 0 auto;
padding-top: 18px;
background: url(images/navbar_bottom.gif) no-repeat;
position: relative;
text-align: center;
font-size: 1.1em;
}
* html #footer {height:52px;he\ight:34px}
#subfooter {
font-size: 1em;
margin: 0 auto;
padding: 10px 0;
color: #6A6A6A;
width: 816px;
text-align: center;
background: url(images/middle_bg.gif) repeat-y;
}
#subfooter a:link, #subfooter a:visited, #subfooter a:active {
font-size: 1em;
color: #6A6A6A;
text-decoration: underline;
}
#subfooter a:hover {
text-decoration: none;
}
#lightbox {
background-color: #eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails {
font-size: 1.1em;
font-weight: bold;
padding-top: 0.8em;
}
#lightboxCaption {
float: left;
}
#keyboardMsg {
float: right;
}
#closeButton {
top: 5px;
right: 5px;
font-size: 1em;
}
#lightbox img {
border: none;
clear: both;
}
#overlay img {
border: none;
}
#overlay { background-image: url(/images/overlay.png); }
* html #overlay {
background-color: #333;
back\ground-color: transparent;
background-image: url(/images/blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/overlay.png", sizingMethod="scale");
}
Here is my page:
Code:
<!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>
<title>The Area's Leading Supplier of Outdoor Furniture, Structures, and Accents | Wayside Lawn Structures</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="outdoor patio lawn furniture childrens playsets storage sheds buildings gazebos playground equipment ornaments accents" />
<meta name="description" content="The leading supplier of outdoor structures and accents in the tri-state area of Ohio, Pennsylvania, and West Virginia" />
<link rel="stylesheet" type="text/css" href="wayside.css" />
<script type="text/javascript" src="javascript/lightbox.js"></script>
</head>
<body>
<?php include('top.php'); ?>
<div id="middle">
<div id="left">
<div id="left-top"></div>
<p class="comment">"This is what one happy person said about a gazebo they bought from Wayside Lawn Structures."</p>
<p class="author">Name<br />City, St.</p>
<p class="comment">"This is what one happy person said about a gazebo they bought from Wayside Lawn Structures."</p>
<p class="author">Name<br />City, St.</p>
<a href="images/wayside-lawn-structures.jpg" rel="lightbox" title="Ariel View of Wayside Lawn Structures"><img src="images/lot_ariel.jpg" width="208" height="64" alt="Ariel View of Wayside Lawn Structures Lot" title="Ariel View of Wayside Lawn Structures Lot" /></a>
<ul>
<li><a href="/quote-request.php">Free Price Quote</a></li>
<li><a href="/contact.php">Directions to Our Lot</a></li>
<li><a href="images/wayside-lawn-structures.jpg" rel="lightbox" title="Ariel View of Wayside Lawn Structures">Ariel View of Our Lot</a></li>
<li><a href="/contact.php">Contact Us</a></li>
</ul>
<div id="left-bottom"></div>
</div>
<div id="right">
<h1>Discover the area's biggest supplier of outdoor furniture, structures, and accents</h1>
<h1 class="red">Where you are treated as a friend, and relationships are more important than money.</h1>
<p>Through the years, neighbors, friends, and many folks around the community have come to depend on us for <b>superior quality products</b>, such as outdoor furniture, children’s playground equipment, gazebos, and storage sheds.</p>
<p>We have been servicing the tri-state area of Ohio, Pennsylvania, and West Virginia since the spring of 2002. God has blessed our business, and we’ve grown from a small corner lot into the area's leading supplier of outdoor structures and accents.</p>
<p><b>Customers come first in our business</b>. We are dedicated to developing and maintaining relationships with neighbors and mail-in customers alike, meeting their needs and desires the best we can.</p>
<p>Use the links above to browse our products, and see which of our unique items catch your attention! Or come by <a href="contact.php">our lot in Columbiana, Ohio</a>. You will find high-quality playground equipment, lawn furniture and ornaments, gazebos, storage buildings, and much more.</p>
<p>Don't hesitate to <a href="contact.php">contact us</a> with any questions or comments. <b>We are here to serve you!</b></p>
<p class="signature">Jason Martin, Manager<br />Wayside Lawn Structures</p>
</div>
<div id="main">
<img src="images/picnic_table_chairs.jpg" alt="Picnic Table With Chairs" title="Picnic Table With Chairs" width="750" height="326" />
<div class="box1">
<h2>Oval Picnic Table</h2>
<p>With Set of 5 Chairs</p>
<p>The only thing missing from this table is you!</p>
<p>It's ready for your family and friends to gather around and have a great time of relaxation and fellowship.</p>
<p class="details"><a href="outdoor-furniture/picnic-tables.php">More details</a></p>
</div>
</div>
</div>
<?php include('bottom.php'); ?>
