Jump to content
ruthtoledoaltschuler

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

Recommended Posts

ruthtoledoaltschuler+    0
ruthtoledoaltschuler

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
ruthtoledoaltschuler+    0
ruthtoledoaltschuler

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
Jenny    33
Jenny

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


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
ruthtoledoaltschuler+    0
ruthtoledoaltschuler

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
ruthtoledoaltschuler+    0
ruthtoledoaltschuler

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

Thank you!

Share this post


Link to post
Share on other sites
ruthtoledoaltschuler+    0
ruthtoledoaltschuler

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
James B    436
James B

Hi Ruth, glad that worked for you :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • tjolin
      By tjolin+
      Hi all, 
       
      Anyone knows how to disable the transparency on the "translate on scroll" animation? 
      Been going crazy trying to edit this for the last couple of weeks. 
       
      TIA!
    • WebEditor
      By WebEditor
      Hello, 
       
      my company would like to have a menu (NavBar) on the Quickslide, exactly over the images of it. 
       
      Is it possible to make it, perhaps with a css code?
       
      Thank you very much
       
      Enrico
    • MissT
      By MissT+
      Hi there,
       
      I've noticed there is an issue with a site I created awhile ago - the browser specific css I added for IE isn't being picked up for IE11 - it is for the older versions (not checked IE10) though yet - but not for IE11.
       
      Did a bit of investigating and strangely there is no class for ie or ie11 appearing??  It actually shows .firefox instead.
       
      I don't have any cache plugins on this site by the way.
       
      Versions:
      PL Framework 2.3.7
      WP 3.4.2
      Browser Specific CSS plugin 1.3 - is there a newer version of this available perhaps?
       
      I can give the URL via private message if need.
       
      Many thanks in advance!
       
       
       
       
    • lexlex88
      By lexlex88
      I'm using w3 total cache and the browser specific css tools. However, I've discovered which ever browser opens a page first sets that browser body tag in the cache for that page.
       
      Example:
       
      I open pageA in firefox after reseting the cache.  Then I open pageA in safari hoping the browser specific css I set for safari will apply, but it does not because the body tag is cached as firefox.
       
      Thanks for any help.
    • laurenp
      By laurenp
      Hi There,
       
      I'm trying remove the background image on the features slider when viewing on a mobile. This is due to the features text overlapping the image at small sizes which makes it illegible. So I'm looking to either hide it or replace it with just white.
       
      I've got the Browser specific CSS plugin installed and have got a few things working with it but can't figure out what class I should target to hide the image.
       
      I've tried things such as...
       
      body.mobile  .fmedia { display:none;}
       
      body.mobile  #feature_slider .fmedia {
      background: none;
      display:none;
      }
       
      I think I'm close but not quite there. Any help would be appreciated.
       
      Also does the .mobile class cover all mobile devices or do I need to repeat the code for each type of available class ie .iphone, .samsung etc??
       
      cheers!
       
×