jQuery/CSS image issue. Opera only loading parts of the images for unkown reason

Not that it's a surprise you encounter daily problems with Internet Explorer, but when you actually do it with a browser like Opera - it kind of throws you off the chair.

I got most things working with Firefox, Chrome and IE (apart from the fact that fancybox isn't validating all the IE-fixes as green, but that's an issue for another time).

Anyway, the problem which I can't seem to figure out is best described with a screenshot!

http://patrikarvidsson.com/stuff/operaissue.jpg

Hover seems to work, lights up the images just as it is supposed to do. But it doesn't seem to correctly show the "faded out" images as it does in the rest of the browsers. As seen above only parts of the images are shown.

Opera-users can see the webpage at hxxp://www.patrikarvidsson.com/project/portfolio

I installed the latest Opera as of today to recreate this for myself, as it was reported by a friend a day ago.

// LiveQuery for Fade-Effect

$(".thumb").livequery(function(){ 
$(".thumb").css("opacity","0.6");
    $(".thumb").hover(function () {
        $(this).stop().animate({
           opacity: 1.0
        }, "fast");
},
 function () {
    $(this).stop().animate({
        opacity: 0.6
        }, "fast");
    });
});

The jQuery .load-code for one of the links;

    $("a.dartLink").click(function(){
    $('div#content').load("content/digitalart.php");
    return false;
});

The link to one of the gallery pages (surrounded by a list);

    <a href="index.php?l=digitalart" class="dartLink gallery"><span>Digital Illustrations</span></a>

The HTML for one of the thumbs;

<div class="thumbbox">
<a rel="digitalart" href="thumblink.jpg" class="thumb" title="Astralis"><img src="images/thumbs/AstralisSmall.jpg" alt="" /></a></div>

On second th开发者_开发知识库ought, however, this may not be related to jQuery. I added the CSS tag just in case. Although I still have no idea what is causing this. Unfortunately, since I edited this post, the image and hyperlink limit again applies as I am a new user.

Edited the post. I think I managed to include the needed code now.

---

Patrik,

This isn't the core of your question (and I will abstain from responding to that until you put up some code that we can analyze), but be careful with the lightbox plugin when using IE. It acts very weirdly when you have a lot of images on the page (i.e. [no pun intended] it will halt the execution of the entire browser and even slow down the operating system until all images are loaded). My solution to this problem was to use the colorbox plugin, which you can find here:

http://colorpowered.com/colorbox/

I find it to be just as snappy as lightbox, except it works perfectly in IE.

---

I don't have opera installed hover I am quite confident that your issue is because you are using display:inline of the boxes containing thumbnails. Try:

.thumbbox {
display: inline-block;
padding: 0px;
}

Opera is simply cropping the image to the size of the container (I used chrome dev tools to verify). You will need to set the display to inline for IE6 & 7 and apply min-height:1% or zoom:1 hack to get the same effect. Alternatively you can float these divs which will require additional safe guard to ensure they are contained correctly.

Hope that helps!

EDIT

Additionally the <a /> and <span /> tags beneath the <div class="thumbbox" /> may need to be set to display:block as they are both inline elements.