cross-browser CSS question

  • tjinh200

    (@tjinh200)


    20 years ago

    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)
  • NuclearMoose

    (@nuclearmoose)

    I Goo-Goo-Googled this and found a huge listing of information on this very topic. https://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

    (@tjinh200)

    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

    (@nuclearmoose)

    You certainly could use that kind of code in your stylesheet. Here’s another link that may help you: https://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: https://positioniseverything.net

    Thread Starter tjinh200

    (@tjinh200)

    thanks ??

    Kafkaesqui

    (@kafkaesqui)

    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

    (@tjinh200)

    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

    (@tjinh200)

    Kafkaesqui, how can i (if possible), use that to specify for only certain parts of my css?

    Kafkaesqui

    (@kafkaesqui)

    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

    (@tjinh200)

    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

    (@kafkaesqui)

    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

    (@tjinh200)

    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

    (@kafkaesqui)

    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

    (@tjinh200)

    thanks! and referring to #1, would i delete the other link rel (the one currently there)?

    Kafkaesqui

    (@kafkaesqui)

    Here, a little easier to read:

    https://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

    (@tjinh200)

    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)
  • The topic ‘cross-browser CSS question’ is closed to new replies.