Jump to content


Photo
- - - - -

Browser Specific CSS - Problem


Best Answer Simon_P , 08 February 2013 - 08:30 PM

Ok heres what i suggest.

 

you have two choices.

 

  • You use the browser css plugin, this changes the body classes on-the-fly. PHP detects the browser type and adds a body class so you can use it with CSS.
    This is the cleanest method as there is no extra code added into the head of the page and you just use the special classes: ie ie8 ie9 ie10 etc etc.
    BUT you cannot use this tool with static page caching as I already explained, everyone will see the first stored page, so if Joe Soap views the page in ie7 then
    everyone after that will have the ie7 body class applied until the cache expires.


     
  • Leave the cache on and use the conditional css method I linked to before. Now everyone will be served the same page code and same body classes but only
    Internet Explorer will bother to parse the conditionals, this method will work but it looks messy in the HEAD of the page with all that extra code.
     
Go to the full post


  • Please log in to reply
19 replies to this topic

#1 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

Posted 06 February 2013 - 03:43 AM

I'm using the Browser Specific CSS plugin to fix a couple of IE
issues.  I was able to fix most but when I apply the following code to
fix some alignment issues, the edits are made across all versions of
IE.  Shouldn't this only be applying to IE8?  How can I resolve?

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

 

(Was going to put this under the Store forum but there is no drop down for the Broswer Specific CSS plugin.)



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 February 2013 - 04:17 AM

Hi,

 

Actually, that Browser Specific CSS plugin is one of ours, so not in the Store category.

 

IE8 predates CSS3, so many attributes or functions of CSS don't work in IE8, including negative margin values.  See this:

Please Login or Register to see this Hidden Content

 

I'm sure the plugin will work, but you may have to use an alternative way of writing the code given that IE8 (and 9, actually) don't use negative values.



#3 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

Posted 06 February 2013 - 05:43 AM

I'm having the problem that while code will fix the problem in ie8, it is being applied to ie9, chrome, and firefox browsers - even with the 'body.ie8' selector.



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 February 2013 - 05:54 AM

Just out of curiosity, is the plugin activated? You can tell by going to Dashboard > Plugins > Installed Plugins and see if it says Activate or Deactivate under the plugin title in the list.



#5 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

Posted 06 February 2013 - 06:01 AM

Yes.  It is a multi-site and is network activated.



#6 Danny

Danny

    Is Awesome!

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

Posted 06 February 2013 - 08:33 AM

Hi,

 

So all your other browser specific CSS is working just fine ?

 

Also, can you try using classes instead of IDs in your code please and see if that resolves your issue.



#7 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

Posted 07 February 2013 - 10:22 PM

Tried using classes instead, to the same effect.  It works in ie8 but applies to other browsers, as well.

 

I currently have the following code that is working through the Browser Specific CSS:

 

Please Login or Register to see this Hidden Content

 

I'm just at a loss as to why the other code isn't working (or isn't working strictly in ie8, as is designed).



#8 Simon_P

Simon_P

    Messer

  • Administrators



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

Posted 07 February 2013 - 10:31 PM

When you view the page source using another IE like ei9 for example what body casses are applied? should say 'ie9 ie' so you can use either ie9 to be specific or ie to target all ie browsers. 



#9 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

Posted 08 February 2013 - 12:00 AM

Yes, IE8 is the one with the issues.  'ie8' is defined in the body classes when viewing the site in IE8.  But the following code is being applied to other browsers when i insert it into css.... and it should only be applied to ie8:

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content



#10 Simon_P

Simon_P

    Messer

  • Administrators



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

Posted 08 February 2013 - 12:24 AM

I'll repeat the question When you view in ie9 or ie10 what classes are there? Are you using a cache plugin? Sent from my iPad using Tapatalk HD

#11 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

Posted 08 February 2013 - 02:23 PM

For ie9: ie ie9

For ie10: ie ie10

 

I use

Please Login or Register to see this Hidden Content

hosting, which has a caching system built in.



#12 Simon_P

Simon_P

    Messer

  • Administrators



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

Posted 08 February 2013 - 04:34 PM

I use 

Please Login or Register to see this Hidden Content

 hosting, which has a caching system built in.

 

Well theres your problem then. Your pages are cached so if 3 people using 3 different browsers view your site they will ALL see the html that was server to user #1 the other two will see the cached page.

 

If your going to use page caching you will have to use internet explorer conditional statements in the <HEAD> of the document.



#13 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

Posted 08 February 2013 - 04:50 PM

The page caching is built in to the hosting so I don't believe I have an option of using it or not.  But it's an image heavy site anyway, so I'd like to keep it.  Didn't realize this would interfere with browser tags.  What conditions would I put in the <head> tag? 

 

Thank you for your help!  I've been racking my brain for days and never thought of that.



#14 Simon_P

Simon_P

    Messer

  • Administrators



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

Posted 08 February 2013 - 04:55 PM

There is some examples here 

Please Login or Register to see this Hidden Content



#15 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

Posted 08 February 2013 - 05:00 PM

Yes, but what do I put in the conditional statements?  I'm confused.



#16 Simon_P

Simon_P

    Messer

  • Administrators



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

Posted 08 February 2013 - 06:13 PM

Im no css expert but something like this:

 

 

 

Please Login or Register to see this Hidden Content



#17 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

Posted 08 February 2013 - 08:19 PM

Thank you, Simon!  Getting close!  So I found where I can purge the cache or turn it off completely.  When I purge and view on IE9 first, IE8 is still messed up.  When I purge and look at IE8 first, it seems to do the trick.  Can I leave caching turned on and view through IE8 first to resolve this issue?  Or will it eventually get messed up again?  In which case, I'm guessing I should turn caching off.  Suggestions?

 

Thank you so much!!!  You've been a huge help!



#18 Simon_P

Simon_P

    Messer

  • Administrators



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

Posted 08 February 2013 - 08:30 PM   Best Answer

Ok heres what i suggest.

 

you have two choices.

 

  • You use the browser css plugin, this changes the body classes on-the-fly. PHP detects the browser type and adds a body class so you can use it with CSS.
    This is the cleanest method as there is no extra code added into the head of the page and you just use the special classes: ie ie8 ie9 ie10 etc etc.
    BUT you cannot use this tool with static page caching as I already explained, everyone will see the first stored page, so if Joe Soap views the page in ie7 then
    everyone after that will have the ie7 body class applied until the cache expires.


     
  • Leave the cache on and use the conditional css method I linked to before. Now everyone will be served the same page code and same body classes but only
    Internet Explorer will bother to parse the conditionals, this method will work but it looks messy in the HEAD of the page with all that extra code.
     

  • anlinares likes this

#19 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

Posted 08 February 2013 - 08:42 PM

Okay, apparently I cannot turn all of the caching off. (It says: We aggressively cache everything from pages to feeds to 301-redirects on sub-domains; this makes your site load lightning-fast for your non-logged-in readers. 99.9% of the time this is what you want, but every once in a while something happens where our cache should have been purged but wasn't. For example, some URL plugins change behavior without alerting WordPress.)

 

I can turn off object/transient caching.  (It says: Generally you want this enabled for maximum speed and scale, but if your site is under active development or if you have a theme or plugin which is incompatible it might be more convenient to have it temporarily disabled.)

 

So I turned off the object/transient caching.  I'll leave the script in the <head> tags.  Fingers crossed this will work!  It works now as long as I look at IE8 first after purging all caches.  But I'm wondering if it'll stick whenever it is cached again.  At a loss of what else to do.  I'll just hope this works and keep checking on it.  If it does revert back to not working, I'll contact my host to see if they have suggestions with this.

 

I really appreciate all of your help!!  Thank you so much!



#20 Simon_P

Simon_P

    Messer

  • Administrators



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

Posted 08 February 2013 - 08:58 PM

If your using the IE conditionals caching will not matter, everyone gets the same page anyway. Only IE will read the conditional statements and it will only read the CSS if the statement is true.