Testcase for jQuery Ticket 1123

by Timmy Willison

HTML

<p>Reconstructed from zip file appended by orginal poster to ticket 1123.</p>
<p><b>When the animation starts, the link's top, bottom and left paddings and borders vanish immediately in IE6+</b><br /></p>

<div>
    <p>Image has negative margins</p>
    <a href="#" id="one" class="logo thumbnail">
        <img src="http://jsfiddle.net/img/logo.png" width="137" height="56" alt="jQuery" title="Open this page again" />
    </a>
</div>
<div>
    <p>Image has no negative margins</p>
    <a href="#" id="one" class="logo thumbnail nonegativemargins">
        <img src="http://jsfiddle.net/img/logo.png" width="137" height="56" alt="jQuery" title="Open this page again" />
    </a>
</div>

CSS

.thumbnail {
    margin: 5px;
    padding: 0;
    display: block;
    outline-style: none;
}
.thumbnail img {
    border: 1px solid #bbb;
    margin: -5px; /*for shadow image*/
    padding: 3px;
    background-color: #fff;
    display: block;
}
.nonegativemargins img {
    margin: 5px; /*for shadow image*/
}
.thumbnail img:hover, .thumbnail:hover img {
    background-color: #eee;
}
body {
    background: #eee;
}

JavaScript

$("a.logo").click(function() {
    this.style.filter = 'alpha(opacity=50)';
    return false;
});