CODEWITHSUNDEEP
cssinternet-explorer-8
user1341199
user1341199

Reputation: 3

IE8 Issues - Looks good on other browsers

This looks great in IE9, Firefox and Chrome but in IE8, it's all jacked up looking. Any ideas on this one? I am on WordPress using Thesis Themes. I am using custom.css for my edits.

My site is: http://www.7637olympia.com/

Can you suggest how to make it work with IE8 as well as the other browsers?

Upvotes: 0

Views: 254

Answers (3)

NullPoiиteя
NullPoiиteя

Reputation: 57332

To simulate RGBA and HSLA background in IE, you can use a gradient filter, with the same start and end color (alpha channel is the first pair in the value of HEX):

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff');

or use a .png image of size 1x2 instead of 1x1.

because Internet Explorer 8 doesn't perform the repeat of a 1x1 pixel semi-transparent background image correctly when any other element on the page is using the "-ms-filter" drective for the alpha transparency

See this link

Upvotes: 2

Anthony
Anthony

Reputation: 37075

I thought that since IE7, there was support for the css rule filter:alpha(opacity=x); to avoid using semi-transparent pngs. Is that not the case?

In your site, you would use:

.custom #page {
    background-color: #000;
    filter:alpha(opacity=50);
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px 10px 10px 10px;
    padding-top: 5px;
}

As I understand it, IE will ignore the rgba value and use the two higher rules to get a similar effect.

The one downside to using opacity on an element (in newer browsers as well) is that it set it to the entire element, not just the background color, so all text and borders, etc are semi-transparent. But I would at least try out the above to see if it's close enough.

Remember: the only reason people don't upgrade to higher versions of IE (or move to FF or Chrome) is because we go to such great lengths to ensure the design looks good in these obsolete browsers. If enough sites look like dog crap, they will eventually get the idea that it's not the sites, it's their old browser. So don't lose too much time and energy supporting the already-too-slow transition from the bad-old-days of IE pandering.

Upvotes: 2

Bill
Bill

Reputation: 25565

IE8 doesn't support rgba colors. If you want it to work in IE8, create a small png (any other size than 1x1 pixel) with same opacity and apply it as a background to the div. Or you can use an IE8 only style sheet and set a different background color other than white.

Upvotes: 0

Related Questions