spacing problem

Question

1.00/5 (1 vote)

See more:

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:

XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0033)http://www.africatradingcorp.com/ -->
<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"/>&nbsp;<img src="Images/Twitter-icon.png"height="20" width="25"/>&nbsp;<img src="Images/orkut1"width="25" height="20"/>&nbsp;</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>

Posted 13-Oct-10 19:29pm

manjumca

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

The Manoj Kumar · Answer 1 · 2010-10-13T19:47:00

Solution 1

You can get more responses, if you can clearly state what you want to achieve by increasing space by 1 px.

Posted 13-Oct-10 19:47pm

The Manoj Kumar

Comments

manjumca 14-Oct-10 1:55am

i fixed table width 800px in html.I am not able to fix horizontal menu width in css exact to table width in html.if i increase space in css menu is coming down or if i decrease space in css compare to header horizontal menu width is less.

The Manoj Kumar 14-Oct-10 14:48pm

Seems you want some space between header and the menu. How about adding a blank row with same background color as header between menu and header.