Problem lining up CSS links in a TD... [Archive]

DesignIt

06-09-2005, 06:48 PM

Can anyone help me figure out why I can't get these links to align top, rather than sit in the middle of the TD? I bolded the text so you could see where the trouble area is...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles/global_cuddy.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body>
<div>
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="5">
<tr>
<td align="center" valign="middle">

<table width="760" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3" background="images/back_leather.jpg">

<div id="navleft">

<a href="*.htm" class="nav_1">HOME</a><br/>
<a href="*.htm" class="nav_1">LOCATION</a><br/>
<a href="*.htm" class="nav_1">COMMUNITY</a><br/>
<a href="*.htm" class="nav_1">PROPERTIES</a><br/>
<a href="*.htm" class="nav_1">INFRASTRUCTURE</a><br/>
<a href="*.htm" class="nav_1">CONTACT US</a>
</div>
</td>

<td><img src="images/home_top1.jpg" width="190" height="108" alt=""></td>
<td><img src="images/home_top2.jpg" width="190" height="108" alt=""></td>
<td><img src="images/home_top3.jpg" width="190" height="108" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/home_headline.jpg" width="570" height="141" alt=""></td>
</tr>
<tr>
<td colspan="3"><img src="images/home_mainpic.jpg" width="570" height="309" alt=""></td>
</tr>
<tr>
<td colspan="1" class="bottomfooter">
</td>
<td colspan="3" class="bottomfooter">
<div class="H_copyright"> abcdefighslaeoafj</div>
</td>
</tr>
</table>
<div align="center"></div></td>
</tr>
</table></div>
</body>
</html>

STYLESHEET:

/* CSS Document */

/* Global Definitions */
TABLE, TD {
color: #666666;
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0px;
line-height: 14px;
margin: 0px;
padding: 0px;
background-color:#003300
}

.maintable {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
background-color: #FFFFFF;
visibility: visible;
vertical-align: middle;
border-top-width: 1px;
border-top-color: #000000;
}

.bottomfooter {
background-color: #000000;
width: 570px;
height: 25px;
color: #FFFFFF;
}

.H_copyright {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #FFFFFF;
background-position: center;
text-align: center;
padding-right: 10px;
}

#navleft {
margin-left: 33px;
text-align: left;
text-decoration: none;
line-height: 16px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 10px;
font-weight: bold;
vertical-align: text-top;
top: 188px;
left: 212px;
}

/*nav links*/
a.nav_1:link {color: #FFFFFF; text-decoration: none; height: 18px;}
a.nav_1:visited { color: #FFFFFF; text-decoration: none; height: 18px;}
a.nav_1:hover { color: #FFEEBB; text-decoration: none; height: 18px;}
a.nav_1:active {color: #FFEEBB; text-decoration: none; height: 18px;;
}

THANKS!!

Patrick Shannon

06-09-2005, 06:56 PM

My brain isn't working today, but a suggestion...perhaps that nav_left DIV is taking on properties from a parent DIV? Or perhaps even the table itself? It might be worth taking out any middle align, etc properties from parents and seeing what happens, if you haven't already.

Vikia

06-09-2005, 07:40 PM

Try applying the style to a .class selector rather than an #id selector.
for reference (http://www.brainjar.com/css/using/default2.asp)

DesignIt

06-09-2005, 07:43 PM

I put a valign="top" in the TD and that fixed it. =)

Thanks everyone who looked. =)

Ryan8720

06-09-2005, 08:35 PM

You can try changing vertical-align: text-top; to vertical-align: top;.