3 fold problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

3 fold problem

Post by pickle »

Hi folks,

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
Image
IE
Image

Code:

CSS

Code: Select all

.resource-table
&#123;
  background-color:#666666;
&#125;
.resource-table td
&#123; 
  background-color:#F1F1E3;
&#125;
.resource-table th
&#123; 
  background-color:#BBBBBB;
&#125;
.link_wrapper&#123;
  height:100%;
  vertical-align:middle;
  align:center;
&#125;
.link_wrapper a&#123;
  vertical-align:middle;
  display:block;
  width:100%;
  height:100%;
&#125;
.link_wrapper a:hover&#123;
  background-color:#D3D3E0;
  font-weight:bold;
  height:100%;
&#125;
HTML:

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>
These are purely cosmetic, but it'd be at least nice to find out why these are happening.

Thanks a bunch folks.
Last edited by pickle on Fri Feb 18, 2005 10:04 am, edited 1 time in total.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Wayne
Forum Contributor
Posts: 339
Joined: Wed Jun 05, 2002 10:59 am

Post by Wayne »

solution to at least 1 part, images over-lapping in firefox, have you tried specifying the image dimensions in the image tags?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

Yep, that seemed to fix it. Thanks a bunch!!
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply