Annoying CSS issues on IE

The URL is: http://site1.ewart.library.ubc.ca/

IF using FF or other none IE browsers, the carousel panel looks like this: (3px border, in double style)

But when using IE 7 or 8, I g开发者_StackOverflowet this: (border is gone and there is a gray area below the left side large thumbnail).

CSS for the carousel panel is:

#webcastingslideshow { 
margin: 25px 30px 20px 35px; 
z-index:1;
background:#3c3c3c;
border:double 3px #fff;
}

CSS for the left side large thumbnail is:

#webcastingslideshow .largethumbnail {
display:block;
height:240px;
width:320px;
background:#000;
float:left;
}

Could you please help?

Thanks,

I looked at your site. The border you are applying is white against a white background. Thus, IE is interputting this as 2 white lines 3px wide. This is per the spec.

If I change the color to red, I see it work properly in IE8+. IE7 deviates from the spec and places two 1px red borders filled with the background color of the parent box (white in this case).Firefox is also deviating from the spec because it is not displaying white borders.

See also this KB for more issues related to double borders in IE. Also, this blog post sums up double borders pretty good too.

I actually see the double border correctly in IE8. However, in IE7, I see nothing.

In IE7, the background color doesn't fill the area of the border. So what you're seeing is a white double border on top of a white background. Just invert your colors for ie7 or add a container div with the correct bg color. I made a jsfiddle so you could see the difference: http://jsfiddle.net/KPvax/1/