Title: cross-browser CSS question
Last modified: August 18, 2016

---

# cross-browser CSS question

 *  [tjinh200](https://wordpress.org/support/users/tjinh200/)
 * (@tjinh200)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/)
 * i remember that there is a way, in your stylesheet to specify IE and Mozilla 
   and what to do for either instance, but i can’t seem to remember … is there a
   good way to ensure cross-browser compatibility? (using px, pt, em, % is not working)…

Viewing 15 replies - 1 through 15 (of 22 total)

1 [2](https://wordpress.org/support/topic/cross-browser-css-question/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/cross-browser-css-question/page/2/?output_format=md)

 *  [NuclearMoose](https://wordpress.org/support/users/nuclearmoose/)
 * (@nuclearmoose)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/#post-171082)
 * I Goo-Goo-Googled this and found a huge listing of information on this very topic.
   [http://tinyurl.com/4xzf2](http://tinyurl.com/4xzf2)
 * Google comes in many languages, and is a fairly well-known search engine which
   helps people, uh, search for stuff. 🙂
 * Heh, heh…sorry…couldn’t resist.
 *  Thread Starter [tjinh200](https://wordpress.org/support/users/tjinh200/)
 * (@tjinh200)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/#post-171083)
 * thanks for the sarcastic response that held slight value 😉
 * i did google for this in many ways, but i didn’t get the results i was looking
   for, so i will reword my question more specifically:
 * can i use if/else tags within my css for cross-browser compatibilty (if IE, else
   do this), if so, what is the code i could use?
 * i have googled for this specifically as well, the result:
    ` <!--[if IE]> <link
   rel="stylesheet" type="text/css" href="iespecific.css" /> <![endif]-->  could
   i use this exact code in my stylesheet? (possibly with the link rel substituted
   with things like “margin” and “padding”) if not, which is better?
 *  [NuclearMoose](https://wordpress.org/support/users/nuclearmoose/)
 * (@nuclearmoose)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/#post-171085)
 * You certainly could use that kind of code in your stylesheet. Here’s another 
   link that may help you: [http://communitymx.com](http://communitymx.com) – search
   there for CSS articles. Many are free, but some can be purchased very inexpensively.
 * Oh, another great link which may help too: [http://positioniseverything.net](http://positioniseverything.net)
 *  Thread Starter [tjinh200](https://wordpress.org/support/users/tjinh200/)
 * (@tjinh200)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/#post-171086)
 * thanks 🙂
 *  [Kafkaesqui](https://wordpress.org/support/users/kafkaesqui/)
 * (@kafkaesqui)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/#post-171087)
 * Psst! WordPress already has some basic browser detection built-in. Try this as
   an example:
 * `<?php 
    if($is_gecko) echo 'You're running Netscape or Firefox. Fancy that.';
   elseif($is_winIE) echo 'You're running Internet Explorer from Bill's realm.';
   elseif($is_macIE) echo 'You're running Internet Explorer from Steve's domain.';
   elseif($is_opera) echo 'You're running Opera. How's the fat lady?'; elseif($is_NS4)
   echo 'You're running Netscape 4. Upgrade!'; elseif(is_lynx) echo 'You're running
   Lynx. Text rules.'; else echo 'I don't your browser.'; ?>
 * Note: It’s _very_ basic and may be in need of help; you can find the components
   for it in wp-includes/vars.php
 *  Thread Starter [tjinh200](https://wordpress.org/support/users/tjinh200/)
 * (@tjinh200)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/#post-171088)
 * actually, my stylesheet won’t let me do that …
 * when i enter:
    ` <!--[if IE]> margin-left: 20px; margin-top: 15px; <![endif]--
   >  and try to save, it goes to:  <!--[if IE]> margin-left: 20px; margin-top: 
   15px; <  and makes the rest of my css a comment, any suggestions?
 *  Thread Starter [tjinh200](https://wordpress.org/support/users/tjinh200/)
 * (@tjinh200)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/#post-171089)
 * Kafkaesqui, how can i (if possible), use that to specify for only certain parts
   of my css?
 *  [Kafkaesqui](https://wordpress.org/support/users/kafkaesqui/)
 * (@kafkaesqui)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/#post-171090)
 * You’d parse out the declarations for a specific browser, then either as a separate
   css file or declared in the `<head>` of your page, you’d perform an if/else on
   it.
 *  Thread Starter [tjinh200](https://wordpress.org/support/users/tjinh200/)
 * (@tjinh200)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/#post-171093)
 * Kafkaesqui, is there an easier way to accomplish this? perhaps just in my stylesheet,
   individually? i know it’s not as pretty, but i’m still learning bit by bit, and
   it might help me … so the code i previously posted i thought might work but it
   did not, any other suggestions of that kind?
 * perhaps in `<head>`, could i put `<style>`, and then something that accesses 
   my style sheet, maybe `if IE` and `.cssthing`
 * would something like this work? if so, what would it look like?
 *  [Kafkaesqui](https://wordpress.org/support/users/kafkaesqui/)
 * (@kafkaesqui)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/#post-171097)
 * Often it’s handled by offering up the default or *base* stylesheet, then individual
   ones, if required, for one or more browser types, which include declarations 
   overriding the default, or just any browser-specific tweaks. No, it’s not pretty,
   but it’s more certain than other methods.
 * I’ve been doing some rough stuff on my site; here’s what my style element looks
   like:
 * `<style type="text/css" media="screen">
    @import url( <?php bloginfo('stylesheet_directory');
   if (strpos(true == $_SERVER['HTTP_USER_AGENT'],'Gecko')) { echo "/style.css );
   n"; } else if (strpos(true == $_SERVER['HTTP_USER_AGENT'],'Opera')) { echo "/
   style-op.css );n"; } else { echo "/style-ie.css );n"; } ?> </style>
 * Sad how I asssume the “else” are using IE, eh? `:/`
 *  Thread Starter [tjinh200](https://wordpress.org/support/users/tjinh200/)
 * (@tjinh200)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/#post-171098)
 * currently, in my header, my `<style type="text/css" media="screen">` is located
   under the meta and all that, but my main stylesheet is a link rel … if i used
   the code above:
 * 1. would i delete the link rel and use this instead?
    2. could i use the same
   stylesheet, just modified and renamed? (so my other elements remain the same)
 *  [Kafkaesqui](https://wordpress.org/support/users/kafkaesqui/)
 * (@kafkaesqui)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/#post-171103)
 * 1. For that I’d could set up my code like so:
 * `<?php if (strpos(true == $_SERVER['HTTP_USER_AGENT'],'Gecko')) { ?>
    <link rel
   =stylesheet type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/
   style.css"> <?php } elseif (strpos(true == $_SERVER['HTTP_USER_AGENT'],'Opera')){?
   > <link rel=stylesheet type="text/css" href="<?php bloginfo('stylesheet_directory');?
   >/style-op.css"> <?php } else { ?> <link rel=stylesheet type="text/css" href="
   <?php bloginfo('stylesheet_directory'); ?>/style-ie.css"> <?php } ?>
 * 2. Yep.
 *  Thread Starter [tjinh200](https://wordpress.org/support/users/tjinh200/)
 * (@tjinh200)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/#post-171104)
 * thanks! and referring to #1, would i delete the other link rel (the one currently
   there)?
 *  [Kafkaesqui](https://wordpress.org/support/users/kafkaesqui/)
 * (@kafkaesqui)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/#post-171105)
 * Here, a little easier to read:
 * [http://paste.uni.cc/6798](http://paste.uni.cc/6798)
 * And yes, you’d replace your current stylesheet rel with your version of the php
   if/else statement.
 *  Thread Starter [tjinh200](https://wordpress.org/support/users/tjinh200/)
 * (@tjinh200)
 * [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/#post-171109)
 * i have the following code entered:
    ` <?php if (strpos(true == $_SERVER['HTTP_USER_AGENT'],'
   Gecko')) { ?> <link rel=stylesheet type="text/css" href="<?php bloginfo('stylesheet_directory');?
   >/style.css"> <?php } elseif (strpos(true == $_SERVER['HTTP_USER_AGENT'],'Opera')){?
   > <link rel=stylesheet type="text/css" href="<?php bloginfo('stylesheet_directory');?
   >/style-ie.css"> <?php } else { ?> <link rel=stylesheet type="text/css" href="
   <?php bloginfo('stylesheet_directory'); ?>/style-ie.css"> <?php } ?>
 * and when previewing with both FF and IE, i see the same stylesheet used (this
   was just a test to see the differences) … but i’m not sure where the problem 
   might be …
 * when using FF: i see “style-ie.css” not “style.css” (the one that should work”
   
   when using IE: i see “style-ie.css” but i’m not sure if it’s working correctly
   because of the FF problem …
 * is this just a name issue? (Gecko, Opera, IE, etc) …

Viewing 15 replies - 1 through 15 (of 22 total)

1 [2](https://wordpress.org/support/topic/cross-browser-css-question/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/cross-browser-css-question/page/2/?output_format=md)

The topic ‘cross-browser CSS question’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 22 replies
 * 6 participants
 * Last reply from: [fuzzy_logic](https://wordpress.org/support/users/fuzzy_logic/)
 * Last activity: [21 years, 2 months ago](https://wordpress.org/support/topic/cross-browser-css-question/page/2/#post-171462)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics