Question

The following code works perfect with transitional doctype but a small bottom border appears when using the strict doctype. I can’t understand why.

<div class="image"><img width="100" height="100" src="aaa.jpg" title="aaa" alt="aaa" /></div>

        div.image {
            -moz-box-shadow: 0 0 5px #939393;
            -ms-box-shadow: 0 0 5px #939393;
            -o-box-shadow: 0 0 5px #939393;
            -webkit-box-shadow: 0 0 5px #939393;
            box-shadow: 0 0 5px #939393;
            padding: 2px;
            display: inline-block;
        }

Any tips?

Edit1: ideally the image class can’t have height and width information because it must fit whatever the image size is.

Answer 1

Create an imageholder with the image size and hide the rest.

<div class="image">
    <div class="imageholder">
         <img width="100" height="100" src="aaa.jpg" title="aaa" alt="aaa" />
    </div>
</div>

.image {-moz-box-shadow: 0 0 5px #939393;
        -ms-box-shadow: 0 0 5px #939393;
        -o-box-shadow: 0 0 5px #939393;
        -webkit-box-shadow: 0 0 5px #939393;
        box-shadow: 0 0 5px #939393;
        padding: 2px;
        display: inline-block;} // anything, like border, etc.
.imageholder {width: 100px; height: 100px; overflow: hidden;}