Unneccessary Line Breaks

JNorman · 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

ToonMariner · 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...

Sign In

Unneccessary Line Breaks

Recommended Posts

JNorman

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information