Unwanted Padding [Archive] - CodingForums.com

yankeeschick

06-09-2008, 07:51 PM

I asked this the other day, but I cannot find the thread to save my life :( I'm sorry!

I'm having a problem with an unwanted space between my nav bar and search bar. Here's what it looks like:

http://yankees-chick.com/navbarproblem.jpg

and here's all my code:
<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Top Ten Wholesale</TITLE>
<meta NAME="description" CONTENT="Connecting wholesalers, disributors, manufacturers and importers of general merchandise to dropshipers & resellers in every wholesale product category.">
<meta NAME="keywords" CONTENT="Wholesale General Merchandise Distributors, Wholesale Products Suppliers, Wholesale Directory, Wholesale Lots, Wholesalers, Dropshippers, Closeouts, Supplier,Importers, Liquidators, Liquidations, Resellers, Manufacturers, Wholesaling, Toptenwholesale.">
<META name="y_key" content="2e938d33c140f978" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/style.css">
<style type="text/css">

body {
margin: 5;
padding: 5;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 12px;
background-color: #FFFFFF;
}

#topsection{
background: #ffffff;

}

#maincontainer{
width: 930px;
margin: 0 auto;
}

.table {
padding: 10;
border: 0;
}

.td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 78;
height: 20;
border: 0px;
}

.popularsearches {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color : #000000;
border: 0px;
align: center;
background-color: #e6f9fe;
width: 870px;
}

.tdblack {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color : #000000;
border: 0px;
align: center;
padding: 4px 0;
}

.tdsearch {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color : #ffffff;
border: 0px;
align: left;
}

.tableleft {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 140px;
border: solid #bbe5ff 1px;
background-color: #fdffd4;

}

.searchbar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 911px;
height:53px;
border: 0px;
background-image: url(/tt/images/searchbar1.gif);
background-repeat: no-repeat;
background-position: center center;
}

.searching {
float:left;
margin-left:180px;
margin-top:5px;
}

.country {
float:left;
margin-left:12px;
margin-top:5px;
}

.go_button {
float:left;
margin-left:12px;
margin-top:5px;
}

.featuredtradeshows {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 713px;
height: 233px;
border: 0px;
background-image: url(/tt/images/featuredtradeshows.jpg);
vertical-align:top;

}

.showdates {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 546px;
height: 176px;
border: 0px;
background-image: url(/tt/images/showdates.jpg);

}

.category {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 713px;
height: 135px;
border: 0px;
background-image: url(/tt/images/category.jpg);

}

.location {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 546px;
height: 289px;
border: 0px;
background-image: url(/tt/images/location.jpg);

}

.foot {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
border: 0px;
}

.footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #e6e6e6;
}

#footer{
clear: left;
width: 100%;
background-color: #e6e6e6;
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 4px 0;
}

a img {
border: 0;
}

.header {
padding: 5px
border: 0px solid #CCCCCC;
color: #7A7685;
font-size : 10px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-right: 200px;
}

#rightcolumn{
float: left;
width: 200px;
margin-left: -200px;
background: #ffffff;

}

.innertube{
margin: 10px;
margin-top: 0;
}

<!–
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55; width:600px;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;font-weight:bold;background:#fff url(/tt/images/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:10px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent url(/tt/images/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(/tt/images/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(/tt/images/dolphin_right-ON.gif) no-repeat top right;height:33px;}
–>

</style>

</HEAD>
<BODY>
<div id="maincontainer">

<div id="topsection"><div class="innertube">

<table width="900">
<tr><td><img src="/tt/images/tt_logo.jpg"></td>
<td><img src="/tt/images/header_banner_1.jpg"></td><td>
<img src="/tt/images/header_banner_2.jpg">
</td>

<td>
<table>

<tr align="right">
<td class="td"><a href="#"><img src="/tt/images/answers.jpg"></a></td>
<td class="td"><a href="#"><img src="/tt//images/forbuyers.jpg"></a></td>
</tr>
<td class="td"><a href="#"><img src="/tt//images/forsellers.jpg"></a></td>
<td class="td"><a href="#"><img src="/tt/images/login.jpg"></a></td>
</tr>
</table>
</td></tr></table>
<div id="dolphincontainer" align="center">
<div id="dolphinnav">
<ul>
<li><a href="#" title="home" class="current"><span>Home</span></a></li>
<li><a href="#" title="products"><span>Products</span></a></li>
<li><a href="#" title="trade shows"><span>Trade Shows</span></a></li>
<li><a href="#" title="about us"><span>About Us</span></a></li>
<li><a href="#" title="news"><span>News</span></a></li>
<li><a href="#" title="contact us"><span>Contact Us</span></a></li>
</ul>
</div>

</div>
<div class="searchbar"> <form action="">
<input type="text" name="search" size="55" class="searching">

<select name="region" class="country">
<option value="select">Select Country/Region</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="UK">UK</option>
<option value="China">China</option>
</select>

<input type="image" SRC="/tt/images/searchbutton_03.gif" alt="Submit" valign="middle" class="go_button">
</form></div>
</div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">

<table class="featuredtradeshows">
<tr><td class="tdblack"></td></tr>
<tr><td class="tdblack" colspan="2"></td></tr>
<tr><td class="tdblack" colspan="2"></td></tr>
<tr><td class="tdblack" valign="top" align="center"><b><br><br>test<br>moretest<br>moretest<br>testtesttesttestesttesttest</b></td>
<td class="tdblack" valign="top" align="center"><b><br><br>test<br>moretest<br>moretest<br>moremoremoremoremore</b></td>
</tr>
</table>
<br>

<table class="category"><tr><td class="tdwhite" valign="top"></td></tr>

<tr>
<td class="tdblack" valign="top" align="left"><br><br>    <a href="#">Fashion Accessories</a><br>    <a href="#">Gifts</a><br>    <a href="#">Automotive</a><br>    <a href="#">testtesttesttestest</a></td>
<td class="tdblack" valign="top" align="left"><br><br>    <a href="#">Fashion Accessories</a><br>    <a href="#">Gifts</a><br>    <a href="#">Automotive</a><br>    <a href="#">testtesttesttestesttest</a></td>
<td class="tdblack" valign="top" align="left"><br><br>    <a href="#">Fashion Accessories</a><br>    <a href="#">Gifts</a><br>    <a href="#">Automotive</a><br>    <a href="#">testtesttesttestesttest</a></td>
<td class="tdblack" valign="top" align="left"><br><br>    <a href="#">Fashion Accessories</a><br>    <a href="#">Gifts</a><br>    <a href="#">Automotive</a><br>    <a href="#">testtest</a></td>

</tr>
</table>

<br /><br />

<table class="tableleft" align="left"><tr><td>asdf asfd asdf asdf asdf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asfd asdf asdf asdf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asfd asdf asdf asdf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asfd asdf asdf asdf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asfd asdf asdf asdf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asfd asdf asdf asdf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asfd asdf asdf asdf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asfd asdf asdf asdf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asfd asdf asdf asdf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asfd asdf asdf asdf adsf asdf asdf asdf asdf asdf asdf asdf asdf</td></tr></table>

<table class="showdates" align="right"><tr><td></td></tr></table>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<table class="location" align="right"><tr><td></td></tr></table>
<br>
<br>
<br><br><br>
</div>
</div>
</div>

<div id="rightcolumn">
<div class="innertube" align="right">
<a href="#"><img src="/tt/images//asd_ad.jpg"></a>
<br><br>
<a href="#"><img src="/tt/images/valueprice_ad.jpg"></a>
<br><br>
<a href="#"><img src="/tt/images/asap_ad.jpg"></a>
<br><br>
<a href="#"><img src="/tt/images/closeout_ad.jpg"></a>
<br><br>
<a href="#"><img src="/tt/images/forum_ad.jpg"></a>
<br><br>
<a href="#"><img src="/tt/images/asd_ad_2.jpg"></a>
</div>

</div>

<br><br>
<div id="footer">
<table>
<tr>
<td class="foot" rowspan="2">
<a href="#">About TopTen</a><br>
<a href="#">Wholesale Home</a><br>
<a href="#">Wholesale Blog</a><br>
<a href="#">Wholesale News</a><br>
<a href="#">Wholesale Affiliate Program</a><br>
<a href="#">Advertise</a><br>
</td>
<td class="foot" rowspan="2">
<a href="#">Member Login</a><br>
<a href="#">Privacy</a><br>
<a href="#">Terms of Use</a><br>
<a href="#">Contact Us</a><br>
<a href="#">Terms of Use</a><br>
<a href="#">Advertise</a><br>
</td>

<td width="150" align="right"><img src="/tt/images/adwords.jpg"></td><td><img src="/tt/images/footertext.jpg"></td><td width ="150" align="right"><img src="/tt/images/secure.jpg"></td>
</tr>
<tr><td colspan="5" align="center" class="foot"><a href="#">2008 JP Communications Inc</a> All Rights Reserved.</a></td>
</tr>

</table>

</div>
</div>

</BODY>

</HTML>

jcdevelopment

06-09-2008, 07:54 PM

every browser has its own style of what it thinks the padding should be. So thats why its always best to set everything to "0". Not sure if i gave this as the answer the last time but it might work.

* {
margin:0px;
padding:0px;
}

If not i will look into it again!

yankeeschick

06-09-2008, 08:05 PM

Sadly, no dice :( Any other ideas?

jcdevelopment

06-09-2008, 08:27 PM

on these, instead of margin try this

.searching {
float:left;
padding-left:180px;
padding-top:5px;
}

.country {
float:left;
padding-left:12px;
padding-top:5px;
}

.go_button {
float:left;
padding-left:12px;
padding-top:5px;
}

Then adjust if you need to!

yankeeschick

06-09-2008, 09:16 PM

that worked!

but... now the search bar is all long and wacky...

http://yankees-chick.com/navbarproblem.jpg

yankeeschick

06-09-2008, 09:17 PM

wooops... here's the image

http://yankees-chick.com/navbarproblem2.jpg

tomws

06-09-2008, 10:16 PM

I asked this the other day, but I cannot find the thread to save my life :( I'm sorry!

Useful info #139: Click your username (over to the left). Then click "Find all threads started by yankeeschick".

yankeeschick

06-09-2008, 11:43 PM

thank you - sorry for the re-post!

any other ideas, my fellow coders? :)