Click to See Complete Forum and Search --> : Unwanted margin/padding between divs


smallfish
01-21-2006, 11:21 AM
hey guys,
i'm a first-timer here and am having some minor issues that maybe someone can shed some light on.

http://www.hwy56storage.com

the site looks great in Firefox but seems to be having some padding/margin issues in IE below the header logo and nav bar. i believe it might be b/c of the links associated with both the logo header and nav buttons.

here's the 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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Highway 56 Storage | Smithville, Tennessee | Your U-Haul and self storage place | (615)597-7721</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="/js/rollover.js" type="text/javascript"></script>
</head>

<body onload="MM_preloadImages('/images/nav/home_on.gif','/images/nav/info_on.gif','/images/nav/locations_on.gif','/images/nav/facilities_on.gif','/images/nav/uhaul_on.gif','/images/nav/contact_on.gif')">

<div id="logo"><a href="/" class="image_link"><img src="/images/logo2.gif" class="image_link" alt="Highway 56 Logo" /></a></div>
<div id="nav"><a href="/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','/images/nav/home_on.gif',1)" class="image_link"><img name="Home" src="/images/nav/home.gif" alt="Home" class="image_link" /></a><a href="/pages/info.shtml" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Info','','/images/nav/info_on.gif',1)" class="image_link"><img name="Info" src="/images/nav/info.gif" alt="Info" class="image_link" /></a><a href="/pages/locations.shtml" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Locations','','/images/nav/locations_on.gif',1)" class="image_link"><img name="Locations" src="/images/nav/locations.gif" alt="Locations" class="image_link" /></a><a href="/pages/facilities.shtml" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Facilities','','/images/nav/facilities_on.gif',1)" class="image_link"><img name="Facilities" src="/images/nav/facilities.gif" alt="Facilities" class="image_link" /></a><a href="/pages/uhaul.shtml" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Uhaul','','/images/nav/uhaul.gif',1)" class="image_link"><img name="Uhaul" src="/images/nav/uhaul.gif" alt="UHaul" class="image_link" /></a><a href="/pages/contact.shtml" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','/images/nav/contact_on.gif',1)" class="image_link"><img name="Contact" src="/images/nav/contact.gif" alt="Contact Us" class="image_link" /></a><img name="Right_Nav" src="/images/nav/right_nav.gif" alt="Right Nav" class="image_link" />
</div>

<div id="left_column">
<div class="top" id="orange_top"><h2>SPECIALS</h2></div>
<div class="middle" id="orange_middle"><ul>
<li>Lease a storage unit for 12 months and GET 1 MONTH FREE.</li>
<li>10% Off all U-Haul rentals on weekdays.</li>
<li>No application fees on new storage rentals through January 2006.</li>
</ul></div>
<div class="bottom" id="orange_bottom"></div>

<div class="top" id="brown_top"><h2>WHAT IS MY SIZE?</h2></div>
<div class="middle" id="brown_middle"><p>Here are some standard size units that we offer with a description of what office or business items each might hold. If you need more help, contact Highway 56 South and one of our representatives will be happy to review your situation and recommend a unit.</p>
</div>
<div class="bottom" id="brown_bottom"></div>

<div class="top" id="green_top"><h2>CONTACT US</h2></div>
<div class="middle" id="green_middle"><p>
Hwy 56 South Mini - Storagez<br />
1229 Congress Boulevard<br />
Post Office Box 398<br />
Smithville, Tennessee 37166<br /><br />

Phone: (615) 597-7721<br />
Email: rentals@hwy56storage.com
</p>
</div>
<div class="bottom" id="green_bottom"></div>
<div>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" class="image_link" /></a>
</p>
<p>
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" class="image_link" /></a>
</p>
</div>
</div>
<div id="right_column">
<div class="w_top" id="blue_w_top"><h2>3 LOCATIONS TO SERVER YOU</h2></div>
<div class="w_middle" id="blue_w_middle"><table>
<tr>
<td class="border_right">
<h4>1100 East Blvd</h4>
<img src="/images/location_1.jpg" alt="Location 1" /><br />
<p>
Full service U-Haul rentals<br />
Over 80 storage units<br />
24/7 security
</p>
</td>
<td class="border_right">
<h4>235 Hwy 56</h4>
<img src="/images/location_2.jpg" alt="Location 2" /><br />
<p>
Over 80 storage units<br />
24/7 security
</p>
</td>
<td class="border_none">
<h4>3848 Main Street</h4>
<img src="/images/location_3.jpg" alt="Location 3" /><br />
<p>
Over 80 storage units<br />
24/7 security
</p>
</td>
</tr>
</table></div>
<div class="w_bottom" id="blue_w_bottom"></div>

<div class="w_top" id="lt_blue_w_top"><h2>SERVICES</h2></div>
<div class="w_middle" id="lt_blue_w_middle"><table class="services">
<tr>
<td class="services">
<h3>FULL SERVICE</h3>
<ul>
<li>On-Site Management - 6 days/wk</li>
<li>3 Locations to Server You</li>
<li>Smithville’s Largest</li>
<li>Security Fences &amp; Property well lit</li>
<li>24 Hour Access By Keypad</li>
<li>One Dozen Sizes to Choose From</li>
<li>Conveniently Located</li>
</ul>
</td>
<td class="services">
<h3>ADDITIONAL FEATURES</h3>
<p>Moving one way? Then your best selection to handle your upcoming move is the 26-foot Super Mover or 24-foot Household Mover. These vans can easily, safely and smoothly handle up to seven rooms of household goods. There's more than enough capacity to carry those little extras you might have to leave behind now... and pay to replace later. Also, our exclusive Mom's Attic (the extra storage space we provide directly above the cab) is the perfect place to transport your most delicate possessions.</p>
</td>
<td class="services">
<h3>U-HAUL RENTAL ON SITE</h3>
<ul>
<li>Local Or One Way Trucks</li>
<li>Packaging Supplies</li>
<li>2 Wheel Dollies</li>
<li>Auto Transport Trailer</li>
<li>Auto Tow Dolly</li>
<li>Blankets</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="w_bottom" id="lt_blue_w_bottom"></div>
</div>
<div id="credits">
<a href="http://www.smallfishsolutions.com" class="smallfish">website by Smallfish Web Solutions</a>
</div>
</body>
</html>

smallfish
01-21-2006, 11:22 AM
here's the css

/* CSS Document */
body {
margin:0 auto;
padding:0px;
width:884px;
text-align:center;
background-color:#ffffff;}
div {
text-align:left;
vertical-align:top;
font-family:Arial, Helvetica, sans-serif;}
#logo {
width:884px;
height:67px;}
#nav {
width:884px;
height:42px;
margin-bottom:0px;}
#left_column {
width:235px;
float:left;
background-image:url(/images/bkgd/left_border.gif);
background-repeat:repeat-y;
background-position:left;
padding:0px 0px 0px 30px;}
#right_column {
width:615px;
float:left;}
#credits {
width:884px;
height:48px;
background-image:url(/images/bkgd/credits.gif);
background-repeat:no-repeat;
clear:both;
text-align:right;
padding:20px 0px 0px 0px;}
h2 {
font-size:.8em;
line-height:.8em;
margin:10px 0px 4px 16px; padding:0px;}
h3,h4,h5,h6 {
font-size:.8em;}

p {
font-size:.8em;}

li {
margin-left:-22px;
font-size:.8em;}

a {color:#000000; font-family:Arial, Helvetica, sans-serif; text-decoration:underline;}
a:hover {color:#666d29;}

a.nav {text-decoration:none; margin:0px; padding:0px;}
a.smallfish {text-decoration:none; font-size:.8em; margin-right:40px;}

.image_link {text-decoration:none; border:0px; padding:0px; margin:0px;}


.top { width:220px; height:26px; float:left;}
.middle { width:196px; float:left; padding:4px 4px 4px 20px;}
.bottom { width:220px; height:11px; float:left; margin-bottom:14px;}

.w_top { width:604px; height:31px; float:left;}
.w_middle { width:604px; float:left;}
.w_bottom {width:604px; height:13px; float:left; margin-bottom:14px;}

#orange_top { background-image:url(/images/bkgd/orange_top.gif); background-repeat:no-repeat;}
#orange_middle { background-image:url(/images/bkgd/orange_middle.gif); background-repeat:repeat-y;}
#orange_bottom { background-image:url(/images/bkgd/orange_bottom.gif); background-repeat:no-repeat;}

#brown_top { background-image:url(/images/bkgd/brown_top.gif); background-repeat:no-repeat;}
#brown_middle { background-image:url(/images/bkgd/brown_middle.gif); background-repeat:repeat-y;}
#brown_bottom { background-image:url(/images/bkgd/brown_bottom.gif); background-repeat:no-repeat;}

#green_top {background-image:url(/images/bkgd/green_top.gif); background-repeat:no-repeat;}
#green_middle { background-image:url(/images/bkgd/green_middle.gif); background-repeat:repeat-y;}
#green_bottom { background-image:url(/images/bkgd/green_bottom.gif); background-repeat:no-repeat;}

#blue_w_top { background-image:url(/images/bkgd/blue_w_top.gif); background-repeat:no-repeat;}
#blue_w_middle { background-image:url(/images/bkgd/blue_w_middle.gif); background-repeat:repeat-y;}
#blue_w_bottom { background-image:url(/images/bkgd/blue_w_bottom.gif); background-repeat:no-repeat;}

#lt_blue_w_top { background-image:url(/images/bkgd/lt_blue_w_top.gif); background-repeat:no-repeat;}
#lt_blue_w_middle { background-image:url(/images/bkgd/lt_blue_w_middle.gif); background-repeat:repeat-y;}
#lt_blue_w_bottom { background-image:url(/images/bkgd/lt_blue_w_bottom.gif); background-repeat:no-repeat;}


table.services {
width:615px;}
td.services {
width:33%;
text-align:left;
vertical-align:top;
padding:0px 0px 0px 20px;}

td.border_right {
width:33%;
border-right:2px solid #5A7B9C;
vertical-align:top;
padding:0px 20px 0px 10px;}
td.border_none {
width:33%;
vertical-align:top;
padding:0px 10px 0px 10px;}

NogDog
01-21-2006, 04:47 PM
I've had trouble before getting blocks to join bottom to top when the relevant margins and paddings were set to 0. I had to set the relevant paddings to some non-zero value (like 1px) to get it to work. (If anyone know whys, I'd be interested to know.)

smallfish
01-23-2006, 10:51 AM
Nogdog-
tried that and "no dice". i have realized that the line breaks are happening under each <div> that holds a active image link. maybe this will shed some light.

thanks,
grant

toicontien
01-23-2006, 12:40 PM
Try vertical aligning all the images in your logo and nav to bottom.


<style type="text/css" media="screen">
#logo img,
#nav img {
vertical-align: bottom;
}
</style>


And an article that might be related to your problem: Images, Tables, and Mysterious Gaps (http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps)

smallfish
01-23-2006, 09:54 PM
DING DING DING!!!!!! we have a winner.

toicontien,
thanks for that vert align insight. to be honest, i have tried the vert. align so many times in the past to fix other problems and it hasn't worked.

thanks again for your help and time.

-grant