Can’t figure this out!

I am working with some basic CSS to provide a thumbnail view of selected attachments in Lotus Notes. The problem is the last attachment (which is a picture) shows up full size. I am sure it is something simple and I suspect it has to do with the outer parent <DIV>. Here is the kicker, it only has the problem in Internet Explorer – there’s a shocker! Works fine in Chrome, FireFox and Safari. If anyone has any ideas let please share. Here is what the problem looks like:

Click Image To Make Larger

The HTML is very simple, here is a sample (taken from the developer tools in IE)

Click Image To Make Larger

One thing I hate is IE assigns the original height and width of the images so it is very misleading.  Here is the class “thumb” CSS:

.thumb {
 float:left;
 width:140px;
 height:140px;
 margin:5px;
 overflow:hidden;
 display: block;

 border: 1px solid #A0ACC0;

 -moz-box-shadow: 3px 3px 4px #333333;
 -webkit-box-shadow: 3px 3px 4px #333333;
 box-shadow: 3px 3px 4px #333333;
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333');    
}

Advertisements

5 thoughts on “Can’t figure this out!

  1. I did, and if you notice from the screen shot, it looks like none of the CSS attributes are even applied to the image. The clearly shows the class of “thumb” but also notice its at the end of the tag, unlike the others.

  2. using IE dev tools, highlight the element and click on “trace styles” in the right panel to drill down on the property that’s causing the problem. If the images are loaded dynamically, makre sure to refresh the DOM tree with the refresh button in the dev tools pane

  3. also, not that IE goes into quirks and/or compatibility mode for intranet sites by default, which localhost is classified as. causes all sorts of problems. Putting a doctype in the header adds some stability and consistency as well.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.