Jump to content


Photo
- - - - -

Browser specific CSS ie8 hiding Carousel section

carousel browser specific display none

  • Please log in to reply
29 replies to this topic

#1 londonremade

londonremade

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 05 April 2013 - 10:21 AM

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:

 

Please Login or Register to see this Hidden Content

 

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:

Please Login or Register to see this Hidden Content

 

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?



#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 05 April 2013 - 10:37 AM

Could you link us to your site please?



#3 londonremade

londonremade

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 05 April 2013 - 10:40 AM

Please Login or Register to see this Hidden Content

 

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



#4 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 05 April 2013 - 10:49 AM

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.''

Please Login or Register to see this Hidden Content

 

 

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 - 

Please Login or Register to see this Hidden Content



#5 londonremade

londonremade

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 05 April 2013 - 10:59 AM

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?



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17965 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 05 April 2013 - 11:23 AM

Hi,

 

The code you have used should work.

 

 

Please Login or Register to see this Hidden Content

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



#7 londonremade

londonremade

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 05 April 2013 - 11:26 AM

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.



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17965 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 05 April 2013 - 11:37 AM

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 -

Please Login or Register to see this Hidden Content



#9 londonremade

londonremade

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 05 April 2013 - 11:40 AM

Sorry, cache plugins are?



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 17965 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 05 April 2013 - 11:44 AM

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.



#11 londonremade

londonremade

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 05 April 2013 - 11:45 AM

OK magic - here is the link: 

Please Login or Register to see this Hidden Content



#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 17965 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 05 April 2013 - 11:58 AM

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.



#13 londonremade

londonremade

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 05 April 2013 - 12:13 PM

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!



#14 Danny

Danny

    Is Awesome!

  • Moderators
  • 17965 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 05 April 2013 - 12:43 PM

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.



#15 londonremade

londonremade

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 05 April 2013 - 12:51 PM

Thanks, appreciate it.



#16 nfp1900

nfp1900

    Advocate

  • Members

  • 304 posts
  • LocationLondon (the original one)
  • Framework Version:The Latest
  • Country: Country Flag

Posted 05 April 2013 - 02:39 PM

With the worldwide user penetration  of IE8 standing at just 5.5%

Please Login or Register to see this Hidden Content

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.



#17 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 05 April 2013 - 04:55 PM

Yes we generally do not support IE8 at all. We have a sticky post about this at

Please Login or Register to see this Hidden Content



#18 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 05 April 2013 - 05:09 PM

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.



#19 londonremade

londonremade

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 08 April 2013 - 11:04 AM

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.



#20 Danny

Danny

    Is Awesome!

  • Moderators
  • 17965 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 April 2013 - 11:41 AM

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







Also tagged with one or more of these keywords: carousel, browser specific, display none