Tip for CSS in IE/Mozilla...

Discussion in 'Web Design & Coding' started by melon, Jan 28, 2005.

  1. melon

    melon MS-DOS 2.0 Political User

    Messages:
    854
    Location:
    Ásgarðr
    I thought I'd share something.

    IE's CSS support is truly deplorable. It's quite sad that, for a browser that once looked better than the rest, it is now an embarrassment. I can create a site that looks perfect in Firefox, but looks awful in IE.

    Thankfully, IE has a non-standard extension read by IE 5+ and ignored in others, meaning you can create special commands solely for IE. If you want two different stylesheets, you can do this:

    Code:
    <!--[if gte IE 5]>
    <link rel="stylesheet" type="text/css" href="default-IE.css" />
    <![endif]-->
    
    <![if !IE]>
    <link href="default.css" rel="stylesheet" type="text/css" />
    <![endif]>
    The former command is interpreted as a "comment" in Mozilla, so it is ignored. The latter will be read by IE to skip the line, while the top and bottom tag are ignored by non-IE browsers.

    But it also works for making changes in a web page. In IE, it would not put enough space between two objects, while it looked perfectly in Firefox. So, to add additional space in IE only, I added this:

    Code:
    <!--[if gte IE 5]>
    <br><br>
    <![endif]-->
    Anyway, I know how difficult it is creating sites that work with multiple browsers, and this extension will likely ruin any W3C validators. But, if all else fails, there's always this extension.

    You can read up more on it here:

    http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

    Melon
     
    Khayman, Perris Calderon and NetRyder like this.
  2. NetRyder

    NetRyder Tech Junkie Folding Team

    Messages:
    13,256
    Location:
    New York City
    Good post. :)

    There are several messy workarounds like this one to overcome most of IE's rendering issues (including the PNG alpha channel issue). But from what I've read and heard on Channel9, the IE team has definitely been given a much-needed wake-up call by Mozilla/Firefox. This is one area where Microsoft just cannot afford to screw up in their next iteration.

    Here's a good place to leave feedback. Most of the issues are already covered, but if any of you have any additional things to post, go ahead. The ball is now in their court. ;)
    http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerFeedback
     
  3. j79zlr

    j79zlr Glaanies script monkey Political User

    Messages:
    2,725
    Location:
    Chicago
    I wouldn't hold my breath, MS is not going to fix IE, my money is on, ever.

    Some comic relief:

    IE and security? Maturity of IE?

    http://www.betanews.com/article/Microsoft_Windows_Exec_Talks_IE_Firefox/1100534022
     
  4. NetRyder

    NetRyder Tech Junkie Folding Team

    Messages:
    13,256
    Location:
    New York City
    I think that first sentence allows for a little more optimism when taken in the context of the paragraph it's in.
     
  5. j79zlr

    j79zlr Glaanies script monkey Political User

    Messages:
    2,725
    Location:
    Chicago
    So users are going to have to spend $300 on Longhorn, if its ever released, until IE gets fixed. I wouldn't hold my breath. They still haven't ported IE6 SP2 to Win2000 which alot of corporations still use. Firefox is looking good to me. I fix a lot of spyware infected machines, and I don't have many repeat fixes on clients I've weined off of using IE.
     
  6. NetRyder

    NetRyder Tech Junkie Folding Team

    Messages:
    13,256
    Location:
    New York City
    I agree that it was a bad idea not to take Win2k users into account.

    Firefox is looking good to me too. That's not the point of this thread, though. Do you enjoy having to code messy workarounds to get your site to display correctly in a browser that's used by the largest majority of people in the world (which is not going to change anytime soon, by the way)? I'd rather hope that the rendering issues in IE are fixed than sit in a blissful bubble thinking "Firefox is fine. Who cares what happens to IE?"

    The sooner it's fixed, the better it is for all of us, IE users or not.
     
  7. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
    I actually use conditional comments on my geffy.co.uk site to include a javascript file called IE7 which fixes certain MSIE rendering bugs. Looks kinda silly til the Javascript kicks in, but it does at least make it readable
     
  8. Khayman

    Khayman I'm sorry Hal... Political User Folding Team

    Messages:
    5,518
    Location:
    England
    Good top melon, I use something similar on my site, checking the browser type and using different style sheets depending.
     
  9. melon

    melon MS-DOS 2.0 Political User

    Messages:
    854
    Location:
    Ásgarðr
    Another useful application of this same non-standard extension is that you can easily use other non-standard extensions for IE, while also using the built-in support that other browsers use.

    The lack of native PNG transparency support is one of the most contentious issues involving IE, while browsers like Firefox support it automatically. However, since IE 5.5, PNG transparency support has been available through another non-standard extension. The catch, of course, is that Firefox won't understand the non-standard extension. But that can be fixed easily through this example code:

    Code:
    <!--[if gte IE 5.5000]>
    <div id="IEPNGFix" style="width:100px; height:100px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');"></div>
    <![endif]-->
    
    <![if lt IE 5.5000]>
    <img src="test.png" />
    <![endif]>
    
    To use "AlphaImageLoader," it must be done within a DIV container, must be used within the "STYLE" tag, and the width and height of the PNG image you want to use must be explicitly specified, or it will not work.

    Unfortunately, "AlphaImageLoader" is only supported in IE 5.5 or greater, so for those browsers below IE 5.5, I will let the crappy muddy background exist, rather than have no image at all. Additionally, the latter statement also works for non-IE browsers like Firefox, which will ignore the <![if]> lines.

    (As a side note, specifying IE 5.5 *must* be expressed as "IE 5.5000" in the code, as that's the official build version. "IE 5.5" will *not* work.)

    Make a transparent PNG sometime, and try that code in both IE 5.5+ and Firefox, and you'll discover that the transparent PNG works flawlessly in both instances.

    For more information about "AlphaImageLoader," go here:

    http://www.msdn.microsoft.com/libra...filter/reference/filters/alphaimageloader.asp

    Melon
     
    Zedric likes this.
  10. j79zlr

    j79zlr Glaanies script monkey Political User

    Messages:
    2,725
    Location:
    Chicago
    You can use that workaround, and I've tried it, but I noticed that older PC's e.g. less than 1GHz would slow to a crawl when browsing my site.
     
  11. NetRyder

    NetRyder Tech Junkie Folding Team

    Messages:
    13,256
    Location:
    New York City
    *Hopes for a fix in IE7* :ermm:
     
  12. melon

    melon MS-DOS 2.0 Political User

    Messages:
    854
    Location:
    Ásgarðr
    Even then, though, we've got to deal with all the people who never update their browser software. :lick:

    Melon
     
  13. NetRyder

    NetRyder Tech Junkie Folding Team

    Messages:
    13,256
    Location:
    New York City
    Yeah, but I'm glad it's being released for XP (there's talk about Win2k at the moment as well). The original plan was to wait until LH for a new version.
    *Keeps fingers crossed*
     
  14. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    Good post! I usually avoid transparent pngs, but now that might change. :)
     
  15. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
    I just use the transparent pngs anyway, feck em, there only msie users :p
     
  16. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    IE7 fixes that as well.
     
  17. Grandmaster

    Grandmaster Electronica Addict Political User Folding Team

    Messages:
    10,574
    Location:
    Santa Clara, CA
    I use this to accomplish the same thing:

    PHP:
        <?php
            $css 
    "ofg.css";

            if (
    eregi("MSIE"$_SERVER['HTTP_USER_AGENT'])) {
            
    $css "ofgie.css";
            }
        
    ?> 
    I was forced to use this method because I just couldn't get
    my site to look nice in both Firefox and IE using one CSS file.
     
  18. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Yep, this does awesome work.
     
  19. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
    I used that as well, then I learnt that MSIE on windows and MSIE on mac render things completely differently, so checked for MSIE and WINDOWS as well
     
  20. is that what windowsupdate is? coz it only opens in IE and not on firefix