Image alignment problems: IE

[spivey]

I have a assembled a background image for an online book club to make a bookshelf.

In Firefox, the sides line up properly, but in IE7+8, they don't:

Here is the site:
http://www.westlakelibrary.org/emilysbookshelf

Here is the relevant css:

div#emilybookclub #galleryblock table.view-grid-emily_gallery {
    background: transparent url('/sites/www.westlakelibrary.org.emilysbookshelf/files/images/woodgrain.jpg') repeat;
    margin-left:10px;
}
div#emilybookclub #galleryblock td.view-grid-item .view-data-comment-count {
  height: 20px;
}
div.view-emily-gallery table.view-grid-emily_gallery .view-data-comment-count, div.view-emily-gallery table.view-grid-emily_gallery .view-field-name {
   height: 20px;
}
div.view-emily-gallery table.view-grid-emily_gallery {
    background: url('/sites/www.westlakelibrary.org.emilysbookshelf/files/images/woodgrain.jpg') repeat;
}

table.view-grid-emily_gallery tr {
  background: url('/sites/www.westlakelibrary.org.emilysbookshelf/files/images/shelfedge2.jpg') repeat-x;
background-position: bottom;
}
 div#emilybookclub #galleryblock table.view-grid-emily_gallery tr td, table.view-grid-emily_gallery tr td {
  height: 310px;
   width:100px;
}
div.view-emily-gallery div.view-data-cover-link  {
    background: url('/sites/www.westlakelibrary.org.emilysbookshelf/files/images/bookdropshadow.png') no-repeat bottom left;
height: 165px;

}

div#emilybookclub #galleryblock div.view-data-cover-link  {

    background: url('/sites/www.westlakelibrary.org.emilysbookshelf/files/images/bookdropshadow.png') no-repeat  left;
height: 165px;
}

The site is a Drupal site, and this is for a themed view, but I don't think any of that matters. I think this is a straight-up CSS/IE problem.

Thanks

[Lusiphur]

I can see the issue you are having with the alignment and I can sympathize. For some reason on my site I have issues where table cells don't maintain their widths outside of FireFox (ie: a 4 cell table where each cell is set to 25% will show as if it was a 2 cell table at 50% each if 2 of the cells are empty).

I wish I could provide a solution for you, perhaps if I can figure out my table issue it might help with your alignment issue :P

[gaurang4]

Yes,
This problem comes up on number of times.
You need to use the dedicated style for IE and some times you have to use specially for IE 7 or IE 6.

in tag in your page, add following style :

THIS WILL ONLY TAKE PLACE IN IE 7:

THIS WILL ONLY TAKE PLACE IN IE6 :

THIS WILL ONLY TAKE PLACE IN IE :

Now add styles for divisions you are getting problem. I hope it would be helpful for your problem.