Archived

This topic is now archived and is closed to further replies.

  • 0

Transparency issue (Explorer 8): can I have custom CSS that is browser specific?


Question

Posted · Report post

This may not be something that can be solved, but I am hoping it can. 

 

I am using Pagelines PlatformPro and working on this blog that I really want to have a page background color with a certain transparency that allows the image on the background to show.

 

And I was shocked to see how it displays in Explorer 8 (thought it would be a problem with Explorer 7, but not 8).

 

The page color simply does not show, and as a consequence it is unreadable.

Here is the link to the site:

 

http://travelandpacking.com

 

Is there any "workaround" CSS code for that? 

 

Do I have the option of having a CSS rule that applies only when the browser is Explorer 8 to make the page color opaque?

 

Please, if any one of you Genius of the support team can help me with this it will be greatly appreciated.

Ruth

 

Share this post


Link to post
Share on other sites

8 answers to this question

Posted · Report post

Hi Ruth

 

you'd write it like this 

 

.content-pad {
background-color: rgb (255, 255, 255); /* fallback */
background-color: rgba(255, 254, 254, 0.85);
}

 

Let us know how you get on :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Ruth

 

Unfortunately IE8 doesn't support transparency or semi transparent png, so the best way would be to set a fallback color in the css. So when it can't display the transparency it will use the solid color.

 

Please see the link below which will explain this in more depth.

http://css-tricks.com/rgba-browser-support/

 

You could also try using browser specific css to edit the color in IE by placing 'body.ie' as a prefix before your css for the background.

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you, James,

 

I will experiment with that and will let you know in a few hours if it has worked or if I need any extra help.

 

I am confident that it is excellent advice!

 

Ruth

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Ruth. Please let us know if you still need help with this. Otherwise you can choose James' response as your answer. :)

Share this post


Link to post
Share on other sites

Posted · Report post

I think I will need a little help, as I am not experienced with CSS coding.

 

What I have right now is the image as background to the site, and on the custom code area of Pagelines I have:

 

 
.content-pad { background: rgba(255, 254, 254, 0.85);
}
 
According to the link James posted, it looks like I should change it to this:
 
.content-pad { background: rgba(255, 254, 254, 0.85); /* The Fallback */ background: rgba(249, 245, 240);
}
 
Can you correct this and help me have the right code?
 
Thank you SO much for your support,
 
Ruth
 
 
 

 

 

Share this post


Link to post
Share on other sites

Posted · Report post

Excellent, I will test it and let you know ASAP!!

Thank you!

Share this post


Link to post
Share on other sites

Posted · Report post

Yes, I tested it in saucelabs.com and it worked. With Explorer 8 I get the solid background, and with 9 onwards I do get the transparency. On the Mac, this was never a problem anyway, so thank you!!

 

Well done! Great support!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Ruth, glad that worked for you :-)

Share this post


Link to post
Share on other sites