Forum Moderators: open
Trying to make an entire td click, it's only picking up the text. Also isn't making the width correctly--470px divided by 5 is 94px, not 70px. Urgh.
<!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>Untitled Document</title>
<style type="text/css">
<!--
body {background: #ffffff;
font-size:100%;margin: 0; padding: 0;text-align: center; color: #000000;
}
#POLcontainer {
font: normal 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;width: 672px; background: #FFFFFF;margin: 0 auto; border: 1px solid #ccc;text-align: left; padding:18px;
}
.pol-ltbkgrnd{background-color:#ededee;padding:12px;margin-bottom:24px;}
caption{text-transform:uppercase; color:#666666; letterspacing:3px;text-align:left;font-size:12px;padding:0 8px 8px 16px;}
table.POLtable {background-color:#ffffff; padding:12px;border-collapse:collapse;}
table.POLtable td {border:1px solid #efefef;width:70px; padding:12px;}
table.POLtable td a {color:#000000; display:block; text-decoration:none; width:100%;height:100%; }
table.POLtable td a:hover {background-color:#CCC; color:#33C;}
.POLinvisible{border:none; background-color:#ededee;}
-->
</style></head>
<body>
<div id="POLcontainer">
<h1> Plex Online</h1>
<p>Integrated Apps</p>
<div class="pol-ltbkgrnd"><table width="470" border="0" cellspacing="0" cellpadding="0" class="POLtable">
<caption> Enterprise Resource Planning modules </caption>
<tr>
<td><a href="foo">Accounting</a></td>
<td><a href="foo">Costing</a></td>
<td><a href="foo">HR</a></td>
<td><a href="foo">Sales / CRM</a></td>
<td><a href="foo">Business Intelligence</a></td>
</tr>
</table>
</div>
<!-- end #container --></div>
</body>
</html>
Apply a width and height style to the foo class. An anchor is the natural click object, let it fill up your TD and the effect will be as you wish.
So, where is the padding coming from for non-link text and how do I get some spacing for the linked text?
New css:
[code]<!--
body {background: #ffffff;font-size:100%;margin: 0; padding: 0;
text-align: center; color: #000000;
}
#POLcontainer {
font: normal 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
width: 672px; background: #FFFFFF;margin: 0 auto;
border: 1px solid #ccc;text-align: left;
padding:18px;
}
.pol-ltbkgrnd{background-color:#ededee;padding:12px;margin-bottom:24px;}
caption{text-transform:uppercase; color:#666666; text-align:left;font-size:12px;padding:0 8px 8px 16px;}
table.POLtable {background-color:#ffffff; padding:12px;border-collapse:collapse; margin:0; text-align:center;}
table.POLtable td {border:1px solid #efefef;width:93px; height:45px;}
table.POLtable td a {color:#000000; display:block; text-decoration:none; width:100%;height:100%;}
table.POLtable td a:hover {background-color:#CCC; color:#33C;}
.POLinvisible{border:none; background-color:#ededee;}
table.POLtable td a.boxlink{width:93px; height:45px;}
-->
</style>
