Archived

This topic is now archived and is closed to further replies.

  • 0

Browser Specific CSS - Problem

Question

Posted · Report post

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?

 

body.ie8 #pagelines_content {
margin-left: 79px;
margin-top: -87px;
}

body.ie8 #menu-item-1265 {
display: none;
}

body.ie8 #menu-item-1379 {
margin-left: -240px;
margin-top: 100px;
}

 

spoiledrottenphotography.com

 

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

Share this post


Link to post
Share on other sites

19 answers to this question

Posted · Report post

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.
     
1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

For ie9: ie ie9

For ie10: ie ie10

 

I use wpengine.com hosting, which has a caching system built in.

Share this post


Link to post
Share on other sites

Posted · Report post

I use wpengine.com 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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

Im no css expert but something like this:

 

 

 

<!--[if IE 8]>
<style type="text/css">
#pagelines_content {
margin-left: 79px;
margin-top: -87px;
}
 
#menu-item-1265 {
display: none;
}
 
#menu-item-1379 {
margin-left: -240px;
margin-top: 100px;
}
</style>
<![endif]-->
 

Share this post


Link to post
Share on other sites

Posted · Report post

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!

Share this post


Link to post
Share on other sites

Posted · Report post

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!

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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: http://stackoverflow.com/questions/6231474/ie8-negative-margin-issue

 

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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:

 

body.ie8 #morefoot .content {
margin-left: 80px;
}

body.ie8 #footer .content {
margin-left: 80px;
margin-top: -32px;
}

body.ie9 #pagelines_content{
margin-left: 0px !important;
}

 

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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. 

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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:

 

body.ie8 #pagelines_content {
margin-left: 79px;
margin-top: -87px;
}
 
body.ie8 #menu-item-1265 {
display: none;
}
 
body.ie8 #menu-item-1379 {
margin-left: -240px;
margin-top: 100px;
}

 

spoiledrottenphotography.com

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites