12 Comments

  1. R. Hill says:

    June 20, 2010 at 4:06 pm

    You provided a clear, concise answer, to my problem, thank you very much. Sometimes I just feel like *not* supporting IE when I have to tone down on using what is otherwise perfectly compliant code… Too much time spent of figuring workarounds.

  2. says:

    July 11, 2010 at 10:16 am

    Thanks for your comment R. Hill.

    I totally agree, life would be so much simpler without IE! I’m counting down the days, but until then, I only code for compliant browsers, with a limited number of fixes for IE just so it “works”.

    Maybe IE9 will be better…

  3. says:

    November 23, 2010 at 2:39 pm

    Greetings Matthew Wilcoxson

    Hope you are doing great and nice to read your article. According to the website http://www.quirksmode.org/dom/w3c_cssom.html I found out that screen.width
    is supported by all browsers listed there. Now I am developing a mobile version of a website and of course it has a separate style sheet. Therefore what I did is the following:

    if(screen.width>50 && screen.width<799)
    {
    document.write('’);
    }
    else
    {
    document.write(”);
    }

    I tested it on firefox-linux, chrome-linux, ie7-vmware and on an android emulator and it works. Do comment and let me know what you think about it.

    Thanking You

    Imran
    Software Engineer

      • says:

        November 23, 2010 at 10:08 pm

        Hi Imran,

        You can certainly use javascript to detect the width and that will work fine in most situations. However, when your pages are viewed in a browser where javascript is not available or turned off you might like to add a CSS include in a section.

        You might also like to try, instead of document.write, use javascript to change the class on (for example) the body, you could then use a single css file for different width. For instance, if the width is detected as wide, then add “wide” to the body class. In the css file the use the class selector .wide .

        Mat

  4. says:

    February 8, 2013 at 1:18 pm

    AWSM! i love it! It’s so rare that these CSS hacks work “out-of-the-box”, so it was a nice surprise to find that this one does it’s job without a hitch. thank you.

  5. Digesh Bajracharya says:

    July 26, 2013 at 9:14 am

    for the above css embedded solution, all the codes goes inside header tag as far as i am concerned. but for me, i need to hack media query in the stylessheet.css which is same for ie and non-ie browsers. can you suggest any way for that??? i tried using conditional statements but they dont ‘help me.

    • says:

      July 26, 2013 at 10:44 am

      In most cases you will just need the IE conditional statements to include different CSS files. However, if that isn’t possible there are certain hacks you can use in the CSS which IE understands but others ignore. You should use caution though, these are *hacks* and therefore may not always work correctly, and some may use none standard CSS meaning your CSS won’t fully validate (though it should still work). This website has a good list of these hacks: http://www.webdevout.net/css-hacks . and in particular (using valid CSS):

      • * html {} // IE 6 and below
      • *:first-child+html {} // IE 7 only
      • html>body {} // IE 7 and modern browsers only
      • html>/**/body {} // Modern browsers only (not IE 7)

      You can then extend whichever one you need to target. i.e. * html ul li { color:red; } // only turns text red on list items in IE6.

Leave a Reply

Your email address will not be published. Required fields are marked *

To comment, click below to log in.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>