css max width not working in ul li div img

I have a gallery with a frame around the thumbnails, I have used max-width to shrink the thumbnail images so they all line up nicely, but in IE althought the image shrinks to the max width the frame still expands as if the image was larger. I have tried adding a max-width to the li but to no avail. Here is a link to the page that looks nice and uniformed in Chrome and FF bt all over the shop in IE! http://wedding-photography-gloucestershire.co.uk/wedding-photography-gallery.php?gallery=Getting%20Ready

Wedding Photography Gallery

thanks in advance of any help.

This is the frame style..

.highslide-gallery ul li { display: block; position: relative; float: left; width: 106px; height: 106px; border: 1px solid silver; margin: 2px; line-height: 0; overflow: hidden; backgro开发者_StackOverflow中文版und-color: #000; max-width: 106px; }

I tried adding this which I found on another website as a solution to IE max width problems, but i don't really understand it ;

width:expression(document.body.clientWidth > 106? "106px": "auto" ); but it still didn't work.

Thank you.

---

IE treats padding/margin differently than the other browsers. I looked at your stylesheet (highside) and you need to have a stylesheet for ie specifically and then you can target IE specifically without worrying about how the changes you make effect the other browsers. I personally wouldn't do that but I used to do it when I was experimenting in web development.

The easiest way for you to figure out what's going wrong and where it is going wrong is to use firebug. Safari and IE have similar debug environments as well. There are some really good tutorials on using firebug out on http://net.tutsplus.com

Good luck.