Links; Height: 100% Problem

[dotty]

This is going to be difficult to explain, but i will try my best.

I have a table on my webpage, and the height is not defined as my content will define how much space the table height should take up.

In my table, there are two columns. One is for all my content (text/images) and the other is for a link.

Now this link is set out like this,


<td width="50" bgcolor="#000000">
<div id="j"><a href="j.html"></a></div></td>

Now, my CSS code to style this link is like the following,


#j {
display: block;
width: 50px;
height: 100%;
background: url('normal.gif') no-repeat 0% 50% !important;
}

#j a {
display: block;
width: 50px;
height: 100%;
background: url('normal.gif') no-repeat 0% 50% !important;
}

#j a:hover {
background: #FFFFFF url('hover.gif') no-repeat 0% 50% !important;
}

Now the thing is, the website works great in firefox. Firefox picks up the height 100% great. However, in Internet Explorer, it doesnt pick up the height 100% business. so what occurs, the gif images are displayed at the very top of the column (i think internet explorer somehow interprets it as height="0")

Now, what is my easiest solution?
This is a real blow in the design of my page because i was just browsing/checking/testing my page in firefox, and when i accidently blew it up into internet explorer. Problems problems problems..

[GITs]

yes, its a real pain in the ass, links don't like to be re-sized much in IE, id be interested in an answer for this too as i need it for a project :S