Make container smaller for IE only

Question

I cannot get a container to shrink for IE only. The site is in development at http://wcousin.com

The gray box with the white text inside the slider is too wide on IE. It works fine in Chrome, but in IE9 it widens over the image.

Any help?

I tried the tips here: https://css-tricks.com/forums/topic/target-ie9/

Answer 1

You can try min width /max width for IE older version because it dosent support border-box property

box-sizing: border-box; is supported in the current versions of all major browsers. The less-commonly used padding-box is only supported in Firefox at the moment. There's more comprehensive information about browser support in our box-sizing almanac entry.

There are a few issues with older versions of Internet Explorer (8 and older). IE 8 doesn't recognize border-box on elements with min/max-width or min/max-height (this used to affect Firefox too, but it was fixed in 2012). IE 7 and below do not recognize box-sizing at all, but there's a polyfill that can help.

Answer 2

I found a solutions:

I added this to the ie-hacks.php file in my WP theme:

<!--[if lte IE 9]>
    <style type="text/css">#ie9 {width:40%;}</style><![endif]-->
<![endif]-->

Then I just added the #ie9 ID to the div and it worked.