Tip for CSS in IE/Mozilla...

[melon]

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:

<!--[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:

<!--[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

 

[NetRyder]

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

 

[j79zlr]

I wouldn't hold my breath, MS is not going to fix IE, my money is on, ever.

We could change the CSS support and many other standards elements within the browser rendering platform. But in doing so, we would also potentially break a lot of things.

Some comic relief:

GS: There you're only look at one dimension, which is the dimension of features. You're saying, "If I can get tabs in Maxthon, well I can go get tabs in Firefox, therefore I am going to switch." But that does away with all of the security stuff that we've just talked about, all those processes, the maturity of IE itself and the IE rendering engine, the compatibility with Internet sites, the compatibility with corporate applications - many of which use custom ActiveX controls that wouldn't run in Firefox in the first place.

IE and security? Maturity of IE?

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

 

[NetRyder]

I think that first sentence allows for a little more optimism when taken in the context of the paragraph it's in.

We could change the CSS support and many other standards elements within the browser rendering platform. But in doing so, we would also potentially break a lot of things. We have to strike the balance of what's okay to break and what shouldn't we break, and how do we roll this out in a way that does a clean break, if you will. Right now we're aiming for Longhorn for that because we think it affords us the opportunity to say, "Okay a few things have changed, if you want your apps to work with Longhorn you may have to make a few changes." Versus just blanket upgrading the installed base with some new features, and "Oh by the way we broke a bunch of stuff."

 

[j79zlr]

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.

 

[NetRyder]

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.

 

[Geffy]

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

 

[Khayman]

Good top melon, I use something similar on my site, checking the browser type and using different style sheets depending.

 

[melon]

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:

<!--[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

 

[j79zlr]

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.

 

[NetRyder]

*Hopes for a fix in IE7* :ermm:

 

[melon]

*Hopes for a fix in IE7* :ermm:

Even then, though, we've got to deal with all the people who never update their browser software. :lick:

Melon

 

[NetRyder]

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*

 

[Zedric]

Good post! I usually avoid transparent pngs, but now that might change.

 

[Geffy]

I just use the transparent pngs anyway, feck em, there only msie users

 

[X-Istence]

IE7 fixes that as well.

 

[Grandmaster]

I use this to accomplish the same thing:

	<?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.

 

[X-Istence]

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

Yep, this does awesome work.

 

[Geffy]

I use this to accomplish the same thing:

	<?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.

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

 

[FishBoy]

Thankfully, IE has a non-standard extension read by IE 5+ and ignored in others, meaning you can create special commands solely for IE.

is that what windowsupdate is? coz it only opens in IE and not on firefix