WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] IE 7-specific PHP Detection (12 posts)

  1. One of the blogs that I manage is using the discontinued Wuhan theme. It uses the following if/else statement to direct IE users to a special style-ie.css stylesheet, which is essentially a copy of the main stylesheet with corrections for IE errors:

    <?php if (eregi("MSIE",getenv("HTTP_USER_AGENT")) ||<br />
           eregi("Internet Explorer",getenv("HTTP_USER_AGENT"))) { ?><link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style-ie.css"/><br />
    <?php } else { ?><br />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style.css"/><br />
    <?php } ?>

    This IE-specific stylesheet is necessary for IE versions 5 and 6, but practically destroys the blog's appearance under IE 7. Is there any way to re-write the if/else statement to be specific to all IE versions, except 7?

    The blog in question is: http://sarahwallinhuff.com/

    Thanks in advance!

  2. whooami
    Member
    Posted 7 years ago #

    I realize this isnt the exact answer you looked for but you've seen this?

    http://htmlfixit.com/?p=909

    he's just using MS's conditional comments in lieu of the other.

    theres also this:

    $useragent=getenv("HTTP_USER_AGENT");
    if (eregi("MSIE [4-6],$useragent)
    { blah blah }

    or:

    $useragent=getenv("HTTP_USER_AGENT");
    if (!eregi("MSIE [7],$useragent)
    { blah blah }

    those are just examples, I have NO idea off the top of my head what the proper user-agent strings to look for would be.

  3. vkaryl
    Member
    Posted 7 years ago #

    macmanx - there is, but I'm on my laptop with no way to get to the relevant links until tomorrow.

  4. Thanks, Whooami! I think that the link you posted may work. It certainly looks like it will work with IE 7, but it may leave IE 6 out in dust, so I'll try it out tomorrow when I'm near IE 6.

    vkaryl, thanks for confirming my suspicions! I look forward to seeing your solution too.

  5. vkaryl
    Member
    Posted 7 years ago #

    Hi macmanx - this site has some great stuff about IE in multiples as well as the info in the linked comment below on specifying conditionals - which may help with the useragent string problem as well.

    http://tredosoft.com/Multiple_IE#comment-2327

  6. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    I really would not do this with PHP. The correct way would be to use conditional comments and let the browser sort it out.

    Instead of having a style-ie.css with all the same stuff plus changes for IE, make a CSS file with just the differences that IE needs. Then use this in the theme:

    <!-- if [IE lt 7]>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/ie-specific.css"/>
    <![endif]-->

    This will make that ie-specific CSS only work under IE 6 or less. Other browsers will ignore it entirely, since it's in HTML comments.

    It's possible that this will work even with the style-ie.css you already have, but you'll have to put it after the call to the normal CSS in the HTML, so that the IE overrides the original one for older IE versions.

  7. whooami, I tried the suggestion that you linked to, but while it worked for IE 7 and IE 6, it broke under Firefox and Safari, though this could be due to a syntax error.

    vkaryl, I tried the provided conditional identifiers with both whooami's first and second suggestions, but couldn't produce anything with consistent support across all browsers.

    Otto42, I tried your suggestion with the style-ie.css file and it had the most consistency of all the suggestions so far, but it broke under IE 6 on the single post views for some weird reason.

    I think I'll try combining the style-ie.css and style.css files using the old-style * html IE hacks. That should work, because that's how the rest of my themes work, though I may have to leave a few things broken in IE 6.

    Thank you again for all of your suggestions!

  8. vkaryl
    Member
    Posted 7 years ago #

    Good luck with it - if you can get it sorted and report, I'm sure it'll help all of us eventually!

  9. Well, I'm 90% sure that I fixed it.

    First, I removed the if/else statement and set the style.css file as the only stylesheet.

    Then, I compared the style-ie.css and style.css file, stripped out the differences, and added them to the style.css file using the old * html CSS hacks which will only work with IE 6 and lower. Ex:

    #sidebar ul li {
    list-style-type: none;
    list-style-image: none;
    margin-bottom: 15px;
    }
    * html #sidebar ul li {
    padding-left: 20px;
    }
    #sidebar ul ul, #sidebar ul ol {
    margin: 5px 0 0 10px;
    }
    * html #sidebar ul ul, #sidebar ul ol {
    margin-left: 20px;
    }
    #sidebar {
    padding: 20px 0 10px 0;
    margin-left: 525px;
    width: 190px;
    font: 1.25em Verdana, Sans-Serif;
    }
    * html #sidebar {
    margin-left: 502px;
    width: 210px;
    }

    I won't be 100% sure if this worked until I can actually test it in IE 6 tomorrow. I've seen promising screenshots, but there could be some hidden issues.

    The only problem left is the huge gap at the bottom of the sidebar lists under IE 7, but this was a problem before I started editing the stylesheet, so I'll probably have to find some IE 7-specific hack for it.

  10. vkaryl
    Member
    Posted 7 years ago #

    Thanks for the update!

  11. It looks good in both IE 6 and IE 7! I fixed the issue of the huge sidebar gap in IE 7 by targeting all IE versions with both the IE 7-only hack, *:first-child+html, and the IE 6 and lower hack, * html. Ex:

    #sidebar ul li ul li ul li {
    right: 0px;
    border-top: 1px solid #acb0b5;
    background-color: #eaeff3;
    width: 250px;
    font: 1px/1px monospace;
    height: 1px;
    margin-left: -37px;
    margin-top: 10px;
    margin-bottom: 10px;
    }
    *:first-child+html #sidebar ul li ul li ul li {
    margin-top: -25px;
    }
    * html #sidebar ul li ul li ul li {
    margin-left: -47px;
    margin-top: -25px;
    }

    Thank you again for all of your suggestions!

  12. vkaryl
    Member
    Posted 7 years ago #

    Good job! I'm bookmarking this post, 'cause I KNOW I'm going to need it....

Topic Closed

This topic has been closed to new replies.

About this Topic