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');    
}

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.

    Like

  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

    Like

  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.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s