JNorman Posted December 27, 2008 Share Posted December 27, 2008 Hi, In developing a new site, i am using tables and recently there appears to little gaps between tables on the site. I have tried sorting out the HTML but i cannot move the lines. The size of the gaps appear to be about half the height of a <br />. My code is below. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="includes/js/nav.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Arabian Airlines</title> <link href="includes/styles/properties.css" rel="stylesheet" type="text/css" /> </head> <body> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td valign="top"><a href="index.php"><img src="images/basic-layout/logos/left-logo.jpg" alt="Logo" width="300" height="260" /></a><br /></td> <td valign="top"><a href="index.php"><img src="images/basic-layout/logos/logo-right.jpg" alt="Logo" width="600" height="260" /><br /> </a></td> </tr> </table> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="50" valign="middle" class="menu-table"><a href="" class="menu-titles" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'anylinkmenu1')">OPERATIONS</a> <div id="anylinkmenu1" class="nav"> <a href="pages_about.php">About Arabian</a> <a href="pages_opproc.php">Operating Procedures</a> <a href="pages_fleet.php">Fleet Information</a> <a href="pages_routes.php">Route Maps</a></div> <img src="images/basic-layout/navigational/star.png" width="9" height="9" class="menu-divider" /> <span class="menu-titles"> <a href="" class="menu-titles" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'anylinkmenu2')">PILOT CENTRE</a><img src="images/basic-layout/navigational/star.png" width="9" height="9" class="menu-divider" /> <div id="anylinkmenu2" class="nav"> <a href="pages_login.php">Login</a> <a href="register_tandc.php">Register</a> <a href="pages_tandc.php">Terms and Conditions</a> <a href="pages_login.php">Forgotten Password</a></div> <a href="" class="menu-titles" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'anylinkmenu3')">HUBS</a><img src="images/basic-layout/navigational/star.png" width="9" height="9" class="menu-divider" /> <div id="anylinkmenu3" class="nav"> <a href="pages_dubai.php">Dubai Hub</a> <a href="pages_dubairoster.php">>> Dubai Roster</a> <a href="pages_dubaistats.php">>> Dubai Stats</a> <a href="pages_amman.php">Amman Hub</a> <a href="pages_ammanroster.php">>> Amman Roster</a> <a href="pages_ammanstats.php">>> Amman Stats</a></div> <a href="" class="menu-titles" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'anylinkmenu4')">CONTACT US</a><img src="images/basic-layout/navigational/star.png" width="9" height="9" class="menu-divider" /> <div id="anylinkmenu4" class="nav"> <a href="pages_dubai.php">Website Feedback</a> <a href="pages_dubairoster.php">Other Support Queries</a></div> </span> <div id="anylinkmenu4" class="nav"> <a href="pages_dubai.php">Website Feedback</a> <a href="pages_dubairoster.php">Other Support Queries</a></div> </span></td> </tr> </table> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td> </td> <td> </td> </tr> </table> <br /> </body> </html> This is my CSS @charset "UTF-8"; /* CSS Document */ body { margin-top:0px; background-image:url(../../images/basic-layout/bg.jpg); background-repeat:repeat-x; background-color:#E4E4E4; } img { border-style:none; } .menu-table { background-image:url(../../images/basic-layout/navigational/menu_back.jpg); height:40px; padding:5px; padding-left:23px; background-repeat:repeat-x; } .menu-titles { font-family:sans-serif, verdana; font-size:11px; color:#333333; text-align:center; vertical-align:middle; } .menu-divider { padding-left:23px; padding-right:23px; } .nav { position:absolute; visibility: hidden; border:1px solid #999999; border-bottom-width: 0; font-family:Tahoma; font-size:11px; font-weight:none; line-height: 18px; z-index: 100; background-color:#F9F9F9; width: 205px; font-family:Tahoma; font-size:11px; color:#FFFFFF; text-align:left; } .nav a { width: 100%; display: block; text-indent: 3px; border-bottom: 1px solid black; padding: 1px 0; text-indent: 5px; } .nav a:hover { /*hover background color*/ background-color:#333333; color: white; } Appreciate your help - James Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted January 1, 2009 Share Posted January 1, 2009 Again - as soon as I saw the term 'table' which wasn't associated with tabular data and therefore being used for layout - I lost all interest... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.