[SOLVED] CSS Centering Issues w/ IE6

I've been hacking away at my G2 implementation and although it's still very much a work in progress, things are coming along. I've basically taken the siriux layout and made some mods of my own.

I'm trying to have a layout with 4 thumbs per row with everything nicely centered. I've done the math and have set the width/margins/padding accordingly. Firefox and Safari render things right, but IE6 doesn't. In the following link, you'll notice that FF/Safari centers everything correctly and there are 4 thumbs per row as expected. With IE, only 3 thumbs can fit per row and thus everything's not properly centered. I can get things to look right with IE (4 thumbs/row and everything centered), but the math doesn't add up and it screws up FF/Safari.

http://www.rohjuh.com/gallery/main.php

Any CSS gurus out there that can help? I'm pretty sure I can get the same look with tables (which should have greater compatibility across browsers), but I was trying to be more progressive by using CSS.

I was kind of hoping someone had already done something similar and could offer a quick tip. But I guess that would have been too easy. You're right so here goes.

I'm using the Siruix layout as a foundation. For album layouts, this is how things are structured:

<div class="gbBlock">
  <div class="gallery-albums">
    <div class="gallery-album">
      <div class="gallery-thumb">
      
      This is where the thumbnail and giDescription reside.
      
      </div>
    </div>
  </div>
</div>

My thumbnails are 150X150 so here is the relevant CSS:

.gbBlock {
  width: 820px;
}

.gallery-albums {
  width: 820px;
}

.gallery-album {
  width: 165px;
  height: 280px;
}

.gallery-thumb {
  width: 165px;
  height: 280px;
}

The reason that .gallery-album and .gallery-thumb have a width of 165px (which is more than the thumbnail width of 150px) is because:

.gallery-thumb img {
  border-width: 1px;
  padding: 4px;
  margin: 1px;
}

If I understand the CSS box model correctly, the entire size of a box = content+padding+border+margin so in my case the .gallery-thumb box should be 150 (content=thumnail width) + 8 (padding, 2/side) + 2 (border, 2/side) + 2 (margin, 2/side) = 162px. I've made .gallery-thumb 165px so it should encompass everything inside it.

To get things all evenly spaced for a total width of 820, the following math should apply:

20 + 165 + 20 + 20 + 165 + 20 + 20 + 165 + 20 + 20 + 165 + 20 = 820px

Thus, I set:

.gallery-album {
  margin: 0 20px;
}

Since a width of 820px is what I set .gallery-albums to be , the math works out. FF and Safari do the math correctly.

IE *seems* to add an extra margin-left (padding-left?) to the first thumbnail, thereby pushing everything too far to the right and able to only fit 3 thumbs/row using the above CSS. I can fiddle with the margin for .gallery-album and get things to look right in IE, but it is basically trial-and-error - change values and see what looks right. Of course, this screws things up in FF/Safari.

This is what I found:

* html ul.gbTabBar li {  /* IE adds li+span padding instead of overlapping */
    padding: 0 0 0 8px;

Is that the general technique for adding IE-specific CSS - add an asterisk before any property that you only want IE to implement? If that's the case, I can probably get things to work by creating some IE-specific margin settings.