I Goo-Goo-Googled this and found a huge listing of information on this very topic. 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.
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?
You certainly could use that kind of code in your stylesheet. Here’s another link that may help you: 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
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
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?
Kafkaesqui, how can i (if possible), use that to specify for only certain parts of my css?
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.
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?
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? :/
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)
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.
thanks! and referring to #1, would i delete the other link rel (the one currently there)?
Here, a little easier to read:
http://paste.uni.cc/6798
And yes, you’d replace your current stylesheet rel with your version of the php if/else statement.
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) …
