ofir
01-25-2006, 07:55 AM
i've made my link display:block to accommodate all the sapce in order to simulate a button.
in FF all its area is taken as a link.
BUT... in ie, although it does accommodate all the space of its father element the link itself is only the text inside the a tag.
when applying width: 100% to the link things are messy.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>website</title>
<style type='text/css'>
a{
padding: 2px 5px;
display: block;
text-decoration: none;
border-style: solid;
border-width: 1px;
border-color: red #000 #000 red;
}
a:hover{
padding: 3px 4px 1px 6px;
border-color: #000 red red #000;
}
</style>
</head>
<body>
<table border='0' cellspacing='0' cellpadding='10' class='DataTable'>
<thead>
<tr>
<th><a href='#'>yg</a></th>
<th><a href='#'>this is wrong</a></th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>444444444444</td>
<td>222kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
</tr>
</tbody>
</table>
</body>
</html>
hover on the "this is wrong" button to see.
any way to solve this?
in FF all its area is taken as a link.
BUT... in ie, although it does accommodate all the space of its father element the link itself is only the text inside the a tag.
when applying width: 100% to the link things are messy.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>website</title>
<style type='text/css'>
a{
padding: 2px 5px;
display: block;
text-decoration: none;
border-style: solid;
border-width: 1px;
border-color: red #000 #000 red;
}
a:hover{
padding: 3px 4px 1px 6px;
border-color: #000 red red #000;
}
</style>
</head>
<body>
<table border='0' cellspacing='0' cellpadding='10' class='DataTable'>
<thead>
<tr>
<th><a href='#'>yg</a></th>
<th><a href='#'>this is wrong</a></th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>444444444444</td>
<td>222kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
</tr>
</tbody>
</table>
</body>
</html>
hover on the "this is wrong" button to see.
any way to solve this?