This is a three part question with both Firefox and IE.
I've got a page that lists all the images in a particular directory. I've set up my CSS (I thought) so that when a link is in a cell, the link fills up the whole cell. This is so when someone mouses over any part of the cell, they activate the link. Screenshots and relevant code is listed below Now on to my problems:
1) IE only:
The link doesn't expand to the whole cell, it vertically, it just extends as far as the content
2) Firefox only: [SOLVED] (Need to set explicitely state size of images)
Sometimes when loading a page with lots of images, the table doesn't expand to include the images, and the images appear to overlap. Once I mouseover part of the table though (it has to be a certain spot, and that certain spot changes), the table expands and looks fine
3) Both browsers:
How do I get the content of the trash icon and text to be centered in the cell, as opposed to being aligned to the top. I've tried using both <td valign = 'middle'> and setting the vertical-align property, but to no avail.
Screenshots:
Firefox

IE

Code:
CSS
Code: Select all
.resource-table
{
background-color:#666666;
}
.resource-table td
{
background-color:#F1F1E3;
}
.resource-table th
{
background-color:#BBBBBB;
}
.link_wrapper{
height:100%;
vertical-align:middle;
align:center;
}
.link_wrapper a{
vertical-align:middle;
display:block;
width:100%;
height:100%;
}
.link_wrapper a:hover{
background-color:#D3D3E0;
font-weight:bold;
height:100%;
}Code: Select all
<tr>
<!-- the trash can cell -->
<td valign = "middle" align = "center" >
<div class = 'link_wrapper'>
<a onClick = "alert('This image cannot be deleted because the following files refer to it:XXX');" href = 'javascript:void(0);'>
<img src = "images/del.gif" border = '0'>
</a>
</div>
</td>
<!-- The image cell -->
<td valign = "middle" align = "center" style = 'vertical-align:middle;'>
<div class = 'link_wrapper' style = 'vertical-align:middle;'>
<a href = "preview.php?target=%2Fimages%2Fgroup%2F6%2Faristota.jpg" style = 'vertical-align:middle;'>
<img src = '/images/group/6/thumbs/aristota.jpg' style = 'border:0px;'>
</a>
</div>
</td>
<!-- the filename cell -->
<td align = "center" >
<div class = 'link_wrapper'>
<a href = "javascript:void(0)" onClick = "set_url('/images/group/6/aristota.jpg');">
aristota.jpg
</a>
</div>
</td>
</tr>Thanks a bunch folks.