Hi,
I am new to website creation.I had designed entire site.I am getting spacing problem.First row header and second row horizontal menu.in horizontal bar spacing problem if i increase 1px horizontal menu will come down.if i decrease little bit space is less compare to header.Please any one help me.
Here is my sample 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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>chennai tourism</title>
<style type="text/css">
body { margin:0px auto;background-color: #FFFFFF;font-size:13px;}
ul#nav, ul#nav ul { padding:0; list-style: none;}
ul#nav li {position: relative; float: left;width:114px;font-family: Verdana, Arial, Helvetica, sans-serif;}
#nav li ul {position: absolute;margin-left: -999em; /* hide menu from view */top: auto;left:0;}
/* Styles for Menu Items */
ul#nav li a {display: block;text-decoration: none;color: #FFFFFF;background:#700000 ; /* IE6 Bug */padding: 5px;min-height:0; }
ul#nav li a.down {display: block; text-decoration: none; color:#FFEBCD ; /* IE6 Bug */ padding: 5px; border-top:0px solid #B8860B;
border-bottom:0px solid #ccc;border-left:0px solid #ccc;border-right:0px solid #ccc;min-height:0; }
ul#nav li a.down:hover { color:#700000; background-color:#D8D8D8;}
/* commented backslash mac hiding hack \*/
* html ul#nav li a {height:1%; position:relative;}
/* end hack */
/* this sets all hovered lists to red */
#nav li:hover a,#nav li.over a,
#nav li:hover li a:hover,#nav li.over li a:hover {color: #700000;background-color:#D8D8D8;width:89px;font-family:Verdana, Arial, Helvetica, sans-serif;}
#nav li a span.down {color:#CC6600; }
/* set dropdown to default */
#nav li:hover li a,#nav li.over li a {color: #FFFFFF;background-color: #700000;text-align: inherit; }
#nav li ul li a { padding: 5px 5px; } /* Sub Menu Styles */
#nav li:hover ul,#nav li.over ul {margin-left:0; } /* show menu*/
hr{background:#FFEBCD;}
ul{list-style-type:none;margin:0;padding:0;}
li{display:inline;font-family: Verdana, Arial, Helvetica, sans-serif;}
ul.a{display:block; font-family: Verdana, Arial, Helvetica, sans-serif; color: #009966;}
.header{padding-left:15px;}
.nortext { font-family:Arial, Helvetica, sans-serif; font-size:13px; color: #333333; line-height:18px; padding:10px; text-align: center;}
.textheading { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#990033; line-height:10px; padding-left:120px; text-decoration:underline;}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor=" #FFFFFF">
<tbody><tr>
<td>
<table width="800" border="0" cellspacing="0" cellpadding="0" bgcolor="#700000" align="center" >
<tr>
<td align="center" class="img1" height="40" ><img src="Images/download (7).jpg" height="30" width="40" align="left"/></td>
<td class="header" align="center" ><font style="font-family:Geneva, Arial, Helvetica, sans-serif; font-size:25px; color: #D8D8D8 ;">TourDe Chennai Welcomes</font></td>
<td align="right" valign="top" class="img"><img src="Images/facebook" height="20" width="25"/> <img src="Images/Twitter-icon.png"height="20" width="25"/> <img src="Images/orkut1"width="25" height="20"/> </td>
</tr>
</table>
<table bgcolor="#FFFFFF" width="800" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr><td>
<table cellpadding="0" cellspacing="0" width="800" align="center">
<tbody><tr>
<td align="center">
<ul id="nav">
<li><a class="down">Home</a></li>
<li><a href="about.html">About</a>
</li>
<li><a href="">Online</a>
<ul>
<li>
<a href="">Travel Booking</a>
</li>
<li>
<a href="">Tour Booking</a>
</li>
</ul>
</li>
<li><a href="">Forms</a>
<ul>
<li><a href="">Booking</a></li>
<li><a href="">Tour</a></li>
</ul>
</li>
<li><a href="">Hotels</a>
<ul>
<li><a href="Accomidation.html">Accomidation</a></li>
<li><a href="">Vehicles</a></li>
</ul>
</li>
<li><a href="">TravilTips</a></li>
<li><a href="">Contact Us</a>
<ul>
<li>
<a href="">FeedBack</a>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body></html>