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='http://www.webdeveloper.com/forum/archive/index.php/#'>yg</a></th>
<th><a href='http://www.webdeveloper.com/forum/archive/index.php/#'>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?Add a {
width:100%;
.
.
bla
}allready tried that..
things get messy !
in my code: change cellpadding='10' to cellpadding='0'
and then try again with the 100%.a {zoom:1;}
To-days cure all (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?t=92889">http://www.webdeveloper.com/forum/showt ... hp?t=92889</a><!-- m -->)
allways nice to learn new CSS stuff. TNXoops..
when validating the css:
Property zoom doesn't exist : 1... should i just ignore this?It's an IE propriety property.
You could also use position:relative;, which will validate.
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='http://www.webdeveloper.com/forum/archive/index.php/#'>yg</a></th>
<th><a href='http://www.webdeveloper.com/forum/archive/index.php/#'>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?Add a {
width:100%;
.
.
bla
}allready tried that..
things get messy !
in my code: change cellpadding='10' to cellpadding='0'
and then try again with the 100%.a {zoom:1;}
To-days cure all (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?t=92889">http://www.webdeveloper.com/forum/showt ... hp?t=92889</a><!-- m -->)
allways nice to learn new CSS stuff. TNXoops..when validating the css:
Property zoom doesn't exist : 1... should i just ignore this?It's an IE propriety property.
You could also use position:relative;, which will validate.