Member Avatar for 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

  • 3 Contributors
  • 2 Replies
  • 160 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by gaurang4
Member Avatar for 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

Member Avatar for 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 <head> tag in your page, add following style :

THIS WILL ONLY TAKE PLACE IN IE 7:

<!--[if lt IE 7]>
<style type="text/css">

</style>
<![endif]-->

THIS WILL ONLY TAKE PLACE IN IE6 :

<!--[if lt IE 6]>
<style type="text/css">

</style>
<![endif]-->

THIS WILL ONLY TAKE PLACE IN IE :

<!--[if lt IE]>
<style type="text/css">

</style>
<![endif]-->


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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.