Thumbnails not maintaining their size in Internet Explorer 6

Question

I'm working with Galleria Classic. How can I get my thumbnails to all be the same height and width in Internet Explorer? I have adjusted the attributes in the CSS using the (.galleria-thumbnails .galleria-image) style. It works great in Safari and Firefox, but Internet Explorer seems to either stretch the width of some of my thumbs, or it's resizing and cropping them. The height never seems to be effected which is good, but I want them all to be the same. Any ideas?

Here is the script I have just before the closing body tag:

<script>
    Galleria.loadTheme('tools/galleria/themes/classic/galleria.classic.js');
</script>

<script>
    $('#galleria').galleria({
        extend: function() {
            this.play(3000);
            this.bind(Galleria.LOADFINISH, function(e) {
                $(e.imageTarget).click(this.proxy(function(e) {
                    e.preventDefault(); // removes the garbage
                    var obj = this.getData();
                    $.fancybox({
                        'href': obj.image

                    });
                }))
            });
        }
    });
</script>

The CSS look like this:

.galleria-thumbnails-container {
    bottom: 0;
    left: 5px;
    position: absolute;
    z-index: 2;
    margin-top: 10px;
    width: 400px;
    height: 60px;
}
.galleria-carousel .galleria-thumbnails-list {
    margin-left: 30px;
    margin-right: 30px;
}
.galleria-thumbnails .galleria-image {
    height: 40px;
    width: 60px;
    background: #000;
    border: 1px solid #000;
    float: left;
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: 0;
    margin-left: 0;
    text-align: left;
}

Answer 1

Fixing IE Box Model Bug This is perhaps the most common and frustrating bug in IE 6 and below. It is caused due to IEs different approach in calculating the total size of a box. Let us say you write

.box {
   width:100px;
   padding:10px;
   border:2px solid #CCC;
}

According to W3C specifications, the total width of the box should be 124px, which all the modern browsers follow, while as IE calculates it as 100px only.

This deviation from the specs can cause lot of layout problems. IE 6 can actually get it right if you are in standards-compliant mode. There are various workarounds for this problem. Some of them are:

BOX-IN-A-BOX According to this technique, we simply use extra markup to fix the issue. Instead of using the padding on the main element, we insert another element inside it and use padding on it. Like

<div class=”box”>
  <div class=”box-inner”>
    Testing for box model hack
  </div>
</div>

In this case our markup will be

.box { width:100px;}
.box-inner {padding:10px;}

SIMPLIFIED BOX MODEL HACK (SBMH)

It uses the CSS parsing bug of Internet Explorer to address the issue. This was first detailed by Andrew Clover

The structure for this hack is

.box {
   padding:20px;
   width: 100px;
   \width: 140px;
   w\idth: 100px;
}

The first line width: 100px; is for browsers like Mozilla and Opera that render correctly. Opera and other browsers choke on the escape character (\) and so will ignore the second and third properties. The second property \width: 140px; is for IE 5 and 6/quirks mode. The final line w\idth: 100px; will be read by escape friendly browsers (including IE 6 in non-quirks mode) and set the width back to 100px.

BOX-SIZING The newly introduced CSS3 box-sizing property allows you to choose which box-model your browser should use. The W3C box model is called content-box and the Internet Explorer box model is called border-box.

This can make it easier to control the size of elements and to make sizes behave the same across different browsers.

.box {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

If the website is rendered in quirks mode, IE6 will render using the non-standard box model, so it will already be rendering as if it had the border-box property on. Modern browsers will adopt the IE’s buggy box-model by setting this property.

Hope this may help...