Jump to content
londonremade

Browser specific CSS ie8 hiding Carousel section

Recommended Posts

londonremade    0
londonremade

Hi,

 

I am trying to hide the carousel section (which is displaying thumbnails from recent posts) in IE8, because it doesn't display properly.

 

I have done this for mobiles with:

 

body.mobile .section-carousel {
display: none;
}

 

and its working fine. I have tried the same for IE8 by replacing body.mobile with body.ie8 and it's having no effect.

 

Adding:

body.ie8 .crsl {
display: none !IMPORTANT;
}

 

Makes the carousel disappear but also makes the background image disappear! The carousel is only on certain pages so this only affects those pages with the carousel.

 

Any ideas?

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Could you link us to your site please?


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
londonremade    0
londonremade

http://londonremade.com

 

I am happy with the carousel in Chrome, Firefox, and versions of IE later than 8, but it was too small on a phone, and just doesn't display properly in IE8. I understand this is because IE8 doesn't support some of the CSS and HTML that makes up the carousel, so I just want it to not display!

 

Thanks

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

The free plugin Browser Specific CSS ''adds new classes to the main body tag in the html of your page, so if your viewing the page on a PC in chrome, it adds desktop chrome to the tags, if your on an iphone it adds iphone, it supports all major browsers and mobile/tablets. This makes it possible to target these browsers in your custom css.'' http://www.pagelines.com/store/plugins/browser-css/ 

 

 

Using Firebug or your browsers built-in web dev tools, inspect the Carousel element to find the correct code.

 

For assistance visit our custom CSS documentation - http://support.pagelines.me/docs/customization/custom-css/


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
londonremade    0
londonremade

Martin,

 

I have the browser specific css plugin activated, and I know the CSS selector for the carousel as I used it to hide the carousel on mobile devices.

 

It doesn't seem to be working for IE8 however - I target IE8 using body.ie8 and the Carousel using .section-carousel, tell it to {display: none;} and nothing happens.

 

The documentation doesn't help I'm afraid.

 

Any other suggestions?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

The code you have used should work.

 

 

body.ie8 .section-carousel {
display:none;
}

Can you add this again and so we can test IE8 on BrowserStack.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
londonremade    0
londonremade

OK, the code is in there.

 

I have just tried emptying the cache and that hasn't made a difference either. Bloody Carousel is still showing up!

 

Thanks.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

I do not have access to IE8, therefore can do the following please.

 

1. Enable PageLines debug mode - PageLines > Site Options > Advanced.

2. Disable any cache plugins you may have installed.

3. Copy your custom CSS into our paste service and provide a link to the paste - http://paste.pagelines.com/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
londonremade    0
londonremade

Sorry, cache plugins are?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

If you do not know what they are, then you most likely haven't installed on. So do the above minus disabling cache plugin suggestion.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

OK, that code should work.

 

Can you remove all comments /* */ from your custom CSS along with all your custom CSS, except for the body.ie8 CSS and see if this resolves your issue.

 

**Add your custom CSS to a text file, so you don't lose it.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
londonremade    0
londonremade

No joy. Tried removing everything except all the body.ie8 CSS and that didn't work. Tried removing everything except the body.ie8 .section-carousel CSS and that didn't work either.

 

It's a head scratcher!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

OK, I am going to bring this to our developers attention as I am unable to test this, due to not having access to IE8. I will reply here when I have more information.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900    29
nfp1900

With the worldwide user penetration  of IE8 standing at just 5.5% http://www.w3schools.com/browsers/browsers_explorer.asp I advised one client to upgrade when their site was behaving erratically on some PC's. But you will have to evaluate the risk for this project.

Share this post


Link to post
Share on other sites
Simon    247
Simon

The reason there is no background is you are hiding the carousel, then when the carousel javascript runs it errors out because there is no carousel there! The background js will never run because the compiler has stopped.

So instead of hiding it use absolute positioning to send it 2 miles off the page.

Share this post


Link to post
Share on other sites
londonremade    0
londonremade

Thanks for the responses. I appreciate that the number of people using IE8 is low, I was just hoping to make our site accessible to as many people as possible, as long as it only takes a reasonable amount of effort to do so. So I definitely won't be faffing around with IE7  - but just being able to make the carousel { display:none } doesn't seem too much of an ask.

 

Simon_P thanks for your suggestion, I'll give that a go.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Keep us updated and let us know, if Simon's suggestion resolves your issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
londonremade    0
londonremade

No joy with absolute positioning. It's a stubborn little bugger!

Share this post


Link to post
Share on other sites
Simon    247
Simon

What code are you using now?

 

.ie8 .jcarousel-container {
    top-10000px !important;
    positionabsolute !important;
}

Share this post


Link to post
Share on other sites
londonremade    0
londonremade

Just tried that code (I had tried .section-carousel before and that didn't work) and it did the same as { display: none; }

 

The carousel was gone but so was the background image!

Share this post


Link to post
Share on other sites
Simon    247
Simon

Right.. install and activate the customize plugin... then add this code to the functions.php in that plugin:

 

https://gist.github.com/5338286

 

Dont forget to add your pageid.

 

This disables the section completely for that page.

Share this post


Link to post
Share on other sites
londonremade    0
londonremade

Still no good. Didn't remove the Carousel.

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

    • oseehys
      By oseehys+
      The Grams section of Platform 5, is lacking lots of important features, that DMS multigram was having, there is no space for another user ID asie the default user, that was one of the strongest point of multigrams, because the Hashtag option cannot capture everyone, multiple User ID is the default standard for Instagram,  Also there is no carousel or slide on this one, it means now that if you want to display 18 pictures in one page all will be visible at once thats not good engineering.
      My appeal to the Pagelines Team, guys please let the next update have all the DMS Multigrams features that is missing on Platform 5 Grams, that will bring it to its glory...
       
       
    • onlinedesigns4u
      By onlinedesigns4u+
      Hi Guys, 
       
      I noticed this a while back but thought it happened back when there was security issues with the wordpress plugin revolution slider and thats why they disappeared, but thinking i was wrong now as mine are the DMS versions.
       
      Basically, my front end editor is missing the icons for;
       
      • Rev Slider
      • Revolution Slider
      • Quick Slider
       

       
       
      What i've also noticed is a difference in how the menu tabs on the left hand side of the front end editor have changed. They were not styled like this before. Its like the css is off or something isnt quite right with the install somehow, somewhere.
       
      Even though the icons are missing for the slider sections. I can still drag them onto my pages and configure them, to a certain degree anyway.
       
      I tried adding the revolution slider to a page yesterday. But it wasnt responding to the way i had configured it. I choose a slide set for it to use and it took no notice. It just used every slide and every caption regardless.
       
      Leaving the revolution slider behind i took a look at the rev slider. Adding the correct images is fine. But i don't get any captions showing when i set them? Tried a few different options but nothing.
       
      Id like to know if my pagelines DMS 2 install is corrupt in anyway? Does anyone else's front end editor look the same as mine? Is anyone else missing the icons for the sliders and have no padding-right for the menu items?
       
      Is anyone using any of the sliders at the moment without issues?
       
      Im using the child theme 'Sophistique" which uses the revolution slider on the homepage. It works fine and its configured the way i want it using thh slide sets ive choosen so dont understand why it would be working inside the website.
       
      Any advice or help is appreciated. Thank for your time guys. Ben
       
       
       
    • dgsarnow
      By dgsarnow+
      I have DMS2 installed and my site is being served over HTTPS. However, I am getting an error that a placeholder image for Quick Carousel (which is not a being used on any of my pages) is being served over http://
       
      Mixed Content: The page at 'https://harqen.com/'was loaded over HTTPS, but requested an insecure image 'http://placehold.it/45x45/f0f0f0/ccc'. This content should also be served over HTTPS.
       
      How can I remove this?
       
      Found it. It was the Recent Posts Widget that was calling this little devil. I have removed the reference and all is well in SSL land.
    • Claude203
      By Claude203
      On our website (http://www.blackfives.org) there is an unwanted navbar at the very top of the site, which I can see only after logging out, but not while I am logged in and using DMS Editor in Chrome. Using an inspector, I was able to identify the element and simply do this:
       
      .section-navbar #navbarusw3odu {   display: none; }   That makes it invisible but it doesn't take away the original problem, namely that I cannot see it in DMS Editor. Why not? Is there a way I can just go ahead and delete it?   Thank you very much.
    • dgsarnow
      By dgsarnow+
      I just updated to the new theme and I am now getting errors on my HTTPS site that the quick carousel is trying to deliver content through HTTP.
       
      Mixed Content: The page at 'https://harqen.com/'was loaded over HTTPS, but requested an insecure script 'http://harqen.com/wp-content/themes/dms/sections/quickcarousel/caroufredsel.js?ver=98ab90'. This request has been blocked; the content must be served over HTTPS.
       
      Can you please help me correct this issue?
       
       
×