Resolved Page and field background colors

[dreamscape 0]

Folks,

Per one of the other threads in this forum, I have used the following code to set the background color for the page content to 80% white:

body{}


.canvas .page-canvas, .thepage .content, .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .commentlist ul.children .even {

background-color: rgba(255, 255, 255, 0.80);

}[/html]

While this worked in Firefox, it has no effect in IE8 which shows a completely transparent page/content background, allowing the large image background to shine through and reduce readability.

At the same time, the input fields on the contact form seem to have gone black (#1a1a1a, actually). I've searched the main CSS file and can find no reference to 1a1a1a. Are the two issues related? I have no idea. The site is live, however, so any expedient advice is appreciated.

The site is http://eastlansingallergy.org .

Thank you in advance!

Matt

[catrina 103]

IE8 by default doesn't support transparency very well. There might be a chance that it would work in IE9, so I would advise updating.

[dreamscape 0]

Catrina,

IE8 doesn't do much very well, but unfortunately it's out there enough to be a concern. Any other ideas beyond "upgrade your browser and hopefully you won't see it anymore"?

[Rob 547]

I totally understand that it's not as easy as just upgrading a browser. Many people are stuck with older computers, particularly in business or government,

As you can see here: http://www.w3schools.com/cssref/css_colors_legal.asp

RGBA isn't supported before IE9. That's unfortunately something we cannot fix. If a browser cannot read a version of CSS, then its simply a browser issue. I apologize for that.

However, we have something called Browser Specific CSS, which might allow you to apply different CSS for the same element detected by different browsers. http://pagelines.com/store/plugins/browser-css

This might be your solution, since you could apply a CSS solution that might work. What that is, I don't know. A guess might be image transparency/opacity... http://www.w3schools.com/css/css_image_transparency.asp

This might help too: http://www.w3schools.com/cssref/css3_pr_opacity.asp

[dreamscape 0]

Thank you for your response, Rob. The information about the bleeding edge CSS used by Pagelines was enough to inspire me to simply set the background to a faded white transparent PNG. That does the trick across all browsers, it seems.

That whole backward-compatibility thing might be something you guys want to consider as you continue to work on Pagelines. The client picked this theme themselves and at first blush, it looked like a good idea to us. After using it, however, we'll happily go back to using the Genesis framework and themes for all our clients.

Response time on Pagelines support is pretty solid, though, so thank you again!

[catrina 103]

The topic was marked as resolved.