Jump to content


Photo
- - - - -

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

transparency Explorer8 alternative CSS browser specific CSS

Best Answer James B , 05 April 2013 - 11:40 PM

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 :-)

Go to the full post


  • Please log in to reply
8 replies to this topic

#1 ruthtoledoaltschuler

ruthtoledoaltschuler

    Advanced Member

  • Members

  • 55 posts
  • LocationSanta Rosa, California

Posted 05 April 2013 - 12:53 AM

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:

 

Please Login or Register to see this Hidden Content

 

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

 



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 05 April 2013 - 01:32 AM

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.

Please Login or Register to see this Hidden Content

 

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.



#3 ruthtoledoaltschuler

ruthtoledoaltschuler

    Advanced Member

  • Members

  • 55 posts
  • LocationSanta Rosa, California

Posted 05 April 2013 - 02:15 PM

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



#4 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 05 April 2013 - 04:51 PM

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



#5 ruthtoledoaltschuler

ruthtoledoaltschuler

    Advanced Member

  • Members

  • 55 posts
  • LocationSanta Rosa, California

Posted 05 April 2013 - 05:43 PM

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
 
 
 

 

 



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 05 April 2013 - 11:40 PM   Best Answer

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 :-)



#7 ruthtoledoaltschuler

ruthtoledoaltschuler

    Advanced Member

  • Members

  • 55 posts
  • LocationSanta Rosa, California

Posted 05 April 2013 - 11:59 PM

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

Thank you!



#8 ruthtoledoaltschuler

ruthtoledoaltschuler

    Advanced Member

  • Members

  • 55 posts
  • LocationSanta Rosa, California

Posted 06 April 2013 - 12:09 AM

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!



#9 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 April 2013 - 12:39 AM

Hi Ruth, glad that worked for you :-)







Also tagged with one or more of these keywords: transparency, Explorer8, alternative CSS, browser specific CSS