Grow your CSS skills. Land your dream job.

Annoying issue with IE / Opacity settings – probably a simple fix…

  • # January 23, 2013 at 7:36 pm

    I’ve got a transparent background that looks fine in Chrome, Firefox, Safari and Opera, but the 55% black background is missing in IE, or 100% transparent. You can see my issue here:
    http://www.503rephotography.com/woodcrest/ – anyone know how I can fix this for IE? I’ve done some searching and the -ms-filter:”progid:DXImageTransform.Microsoft.Alpha line isn’t working. I’m not a fan of IE…..it looks fine in every other browser!

    I’ve already had a little help on here which I really appreciate. If anyone has any ideas on how I can solve the issue with IE to make it look the same as it does on all the other browsers, that would be awesome!

    Trevor

    # January 23, 2013 at 10:29 pm

    @trevorpdx, the easy solution is to get a 1px by 1px .png semi-transparent, black image to use, and call it in an IE only .css file..

    # January 24, 2013 at 12:41 am

    Ah okay, I was wondering if there was another workaround, but I suppose that will do. How would I point that out in a .css file for IE specifically and not have the other browsers use it? Thanks a bunch for the help!

    # January 24, 2013 at 12:52 am

    You can use IE conditional comments to target specific versions of IE, and load a separate IE stylesheet only when that condition is met.

    But better yet, consider Paul Irish’s approach which is used in the HTML5 boilerplate, where IE conditional comments are used to set a class on the body element. Then you can use that body class to target the descendant which needs the transparent background. Your main stylesheet will continue to function as expected, but the IE-specific style will override it when the IE class is added to the body tag due to greater specificity.

    See [Paul’s blog post](http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ “Conditional stylesheets vs CSS hacks? Answer: Neither!”) for a more detailed explanation and how-to.

    # January 24, 2013 at 8:55 am

    @Eric, except, ya know…that’s what he IS doing, and he’s asking for an IE fallback

    # January 24, 2013 at 9:24 am

    I swear all you guys just skip right over the text. Thats the whole point. There is a ie faallback

    # January 24, 2013 at 9:27 am

    hahaha oooooops, my bad @Eric, I did skip right over it..to be fair, I was on my phone

    # January 24, 2013 at 9:30 am

    I understand :) I dont see everything when on my phone either. Which is most of the time.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".