Ok this might be a noob question but i cant seem to figure it out.
I have a table thats being generated from a SQL query in ASP that contains links to other pages. My CSS doc makes a link go bold and italic on hover. The problem is that when i put the mouse over a link it resizes the whole table to fit the text that isnt even big enough to go outside of the boundries of the cell.
I have tried.
1) Making the txt smaller on hover. This will work if you make it small enough that you can read it anymore.
2) stopping the text from turning bold, no change
3) defining the cell height and width, even with huge cells it will resize.
This is the table page code:
Code:
<?xml version="1.0"?>
<!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>
<title>Help Desk - Problem List</title>
<link rel="stylesheet" type="text/css" href="../default.css">
</head>
<body>
<center>
<table width="820"><tr><td valign="top" align="left"><font size="-1"><b>User Name:</b> jon.hagan<br /><b>Problems:</b> <a href="view.asp">13</a></font></td><td valign="top" align="right"><font size="-1">Support rep logged in.<br /><i><a href="../admin/">Help Desk Administration</a></i></font></td></tr></table></center>
<div align="center">
<table class="Wide">
<tr class="Head1">
<td colspan="6">
Problem Listing for
</td>
</tr>
<tr class="Head2" align="center">
<td nowrap><a href="showCats.asp?start=1&num=10&sort=1&order=1&category_ID=10&cname=&intSort=1" class="HeadLink"> ID </a></td>
<td > <a href="showCats.asp?start=1&num=10&sort=2&order=&category_ID=10&cname=&intSort=2" class="HeadLink"> Title </a></td>
<td nowrap><a href="showCats.asp?start=1&num=10&sort=3&order=&category_ID=10&cname=&intSort=3"class="HeadLink"> Assigned To </a></td>
<td nowrap><a href="showCats.asp?start=1&num=10&sort=4&order=&category_ID=10&cname=&intSort=4" class="HeadLink"> Date Submitted </a></td>
<td nowrap><a href="showCats.asp?start=1&num=10&sort=5&order=&category_ID=10&cname=&intSort=5" class="HeadLink"> Status </a></td>
<td nowrap><a href="showCats.asp?start=1&num=10&sort=5&order=&category_ID=10&cname=&intSort=6" class="HeadLink"> Priority </a></td>
</tr>
<tr class="Body1">
<td nowrap><div align="center">3</div></td>
<td><div align="center"><A HREF="rep/details.asp?id=3">ouifv u bnug ib ku</A></div></td>
<td nowrap><div align="center" height='100%'><A HREF="mailto:jon.hagan@bosgroup.com?Subject=HELPDESK: Problem 3">Jon Hagan</A></div></td>
<td nowrap><div align="center">3/9/2007</div></td>
<td nowrap><div align="center">OPEN</div></td>
<td nowrap><div align="center"><img SRC = "../image/yellow_pin.gif"></div></td>
</tr>
<tr class="Body1">
<td nowrap><div align="center">2</div></td>
<td><div align="center"><A HREF="rep/details.asp?id=2">ouifv u bnug ib ku</A></div></td>
<td nowrap><div align="center" height='100%'><A HREF="mailto:jon.hagan@bosgroup.com?Subject=HELPDESK: Problem 2">Jon Hagan</A></div></td>
<td nowrap><div align="center">3/9/2007</div></td>
<td nowrap><div align="center">OPEN</div></td>
<td nowrap><div align="center"><img SRC = "../image/yellow_pin.gif"></div></td>
</tr>
<tr class="bigTitle">
<td colspan="6">
 
</td>
</tr>
</table>
</div>
</body>
</html>
This is the CSS used:
Code:
body {
font: 11px Arial,Verdana,Helvetica;
font-size: 10pt;
color: #000000;
background-color: #FFFFFF;
margin:50px 0px; padding:0px;
text-align:center;
}
a.HeadLink {
text-decoration: none;
color: #FFFFFF;
}
a.HeadLink:hover {
text-decoration: underline;
color: #FFFFFF;
}
a {
text-decoration: none;
color: #9F1E27;
}
a:hover {
color: #073678;
font-weight: bold;
font-style: italic;
}
HeadLink {
text-decoration: none;
color: #FFFFFF;
}
table.Wide {
font-size: 10pt;
width: 850px;
}
tr.Head1 {
font-size: 15pt;
color: #FFFFFF;
font-weight: bold;
text-align: center;
background-color: #9F1E27;
}
tr.Head2 {
color: #FFFFFF;
font-weight: bold;
background-color: #073678;
text-align: center;
}
tr.Body1 {
color: #000000;
background-color: #EEEEEE;
text-align: center;
}
tr.bigTitle{
color: #FFFFFF;
font-weight: bold;
font-size: 8px;
text-align: center;
background-color: #9F1E27;
}
|
