[Turias]

I did a search but didn't find these posted before. I have found them incredibly useful, so here they are:

Problem 1: IE sucks at correctly rendering CSS.
Solution: Use Dean Edwards's custom style sheet. Simply by including it in one of your standards-compliant sites, IE will magically display it correctly! :hover will correctly work (thank God!) as well as positioning.


MindFad is gonna love this next one...

Problem 2: IE sucks at displaying PNGs
Solution: Well, IE can do transparencies, but mainly through their own proprietary filters. By including one .htc file on your server and then adding a single line to your stylesheet, your PNG will become transparent in IE by leveraging one of these filters!

Hope that helps some of you as much as it has helped me.




UPDATE: The latest versions of IE7 have PNG support, so you no longer need to use both hacks.

[thePurpleGiant]

Awesome tips!! I have just made this thread a sticky.







..oh wait, I can't do that.

[Edit: It seems I can. I never cease to amaze myself ]

[Millennium]

Originally posted by thePurpleGiant:
Awesome tips!! I have just made this thread a sticky.

..oh wait, I can't do that.

...no, but I can

I can't leave it up here forever, of course, but it's useful enough that I'll buy it a little time so that people can just check it out.

[philzilla]

Originally posted by Millennium:
...no, but I can

I can't leave it up here forever, of course, but it's useful enough that I'll buy it a little time so that people can just check it out.

can you sticky a favicon thread, please? i think i'm going to throw knives at the next person who doesn't search and just asks.

[thePurpleGiant]

Originally posted by philzilla:
can you sticky a favicon thread, please? i think i'm going to throw knives at the next person who doesn't search and just asks.

I was one of those people once

[philzilla]

Originally posted by thePurpleGiant:
I was one of those people once

apply your hand to your face in a rapid manner, please. repeat procedure 10 times.

[derbs]

Originally posted by philzilla:
apply your hand to your face in a rapid manner, please. repeat procedure 10 times.

bwhaha! I'd rather see the next person stabbed in the face with a ceramic shard from a broken toilet.

[philzilla]

Originally posted by derbs:
bwhaha! I'd rather see the next person stabbed in the face with a ceramic shard from a broken toilet.

that's the spirit, man!

[registered_user]

I find that png script to be trying.

I have been having trouble with it, so I put together a simple test page.

It's also incorporating png files from another project I'm working. It uses javascript to swap png files much like a roll over.

Anyway, on VPC the swapped pngs lose transparency. Also, png files used as a background lose transparency. The latter I'm certain is getting past this script, and the former may be due to VPC running java too slowly, or because they elude the script as well.

Does anyone have any further insight into this?

[MrBS]

I used to use the webfx png fixer on my site, but it was kind of spotty. I just re-enabled it and am seeing the same problems. Basically the pngs will sometimes load correctly (with transparency), normally (without transparency) or the behavior gets stuck half way through and just displays the blank.gif. Pretty annoying.

~BS

[Turias]

Funny, I haven't had any problem with the PNG script. I just followed his example page, which works quite well.

[derbs]

I've always used Sleight for displaying PNGs.

http://www.allinthehead.com/retro/69

Still has some limitations though. Doesn't work with PNGs that are background images of table cells etc. but the latest one works with CSS background images

[registered_user]

Originally posted by derbs:
I've always used Sleight for displaying PNGs.

http://www.allinthehead.com/retro/69

Still has some limitations though. Doesn't work with PNGs that are background images of table cells etc. but the latest one works with CSS background images

I have also used sleight in the past. In fact, I've used that on a very similar test page, and I get the same results. NB: this test page doesn't use bgsleight which has its own problems (repeat issues in particular).

I am beginning to think that IE's proprietary alpha loader is simply too memory intensive to be of any practical use.

Has anyone successfully used pngs in rollovers?

[derbs]

I think we're going to have to wait for IE7 before there's a proper solution. surely they'll sort the PNG issue out by then....

[alphasubzero949]

I always thought that the solution to IE problems is to move IE to the trash and empty it.

[Jaey]

How do you make a favicon? (I kid, I kid)

[eevyl]

Originally posted by Turias:
I did a search but didn't find these posted before. I have found them incredibly useful, so here they are:

Problem 1: IE sucks at correctly rendering CSS.
Solution: Use Dean Edwards's custom style sheet. Simply by including it in one of your standards-compliant sites, IE will magically display it correctly! :hover will correctly work (thank God!) as well as positioning.

Well I am having a hard time getting this to work. I apply it and it turns the page all white except the text and images if you want to test (test it out on IE for Win of course):

No IE7 magic for me

Any help much appreciated

[Turias]

Originally posted by eevyl:
Well I am having a hard time getting this to work. I apply it and it turns the page all white except the text and images if you want to test (test it out on IE for Win of course):

No IE7 magic for me

Any help much appreciated

Have you gotten IE7 to work on a simpler page? If so, have you tried to narrow down the problem to anything specific on your site? Try deleting chunks of your HTML code until you find what breaks it.

Once you figure that out, try e-mailing the author. The times I have e-mailed him he's been incredibly responsive.

[Turias]

Just as an update, I've implemented IE7 on my large CMS driven site with div:hovers galore. It works great, except for one thing:

It takes an extra 15 seconds to load each page on IE.

I'm going to e-mail the author and see what he thinks.

[Turias]

Originally posted by Turias:
Just as an update, I've implemented IE7 on my large CMS driven site with div:hovers galore. It works great, except for one thing:

It takes an extra 15 seconds to load each page on IE.

I'm going to e-mail the author and see what he thinks.

I just got a reply from Dean:

Dean Edwards said:
i'm aware of this problem. and have a soultion. expect the next release of IE7 to be a LOT quicker.
regards,
-dean

Excellent.

[wataru]

I thought I'd add my recently gained wisdom to this thread.

I use a small JavaScript to serve up different stylesheets depending on the browser, because IE sh*ts a brick when it sees position:fixed elements (or is there a workaround I don't know about?). After struggling to maintain said script with it embedded separately in each page of my site, I got wise and made it external instead. Now here's the problem:

My site is XHTML1.0 strict, so I figured now that my <script></script> environment is empty, I should make it <script />. Wrong. This works just fine in Mozilla-derived browsers, but IE and iCab just flake out entirely. I think they decide that the <script> never closes until end of file. Anyway, reverting to <script></script> works for all browsers and validates, so there you go.

I hope this saves someone unnecessary pain.

[Chris O'Brien]

Originally posted by wataru:
IE sh*ts a brick when it sees position:fixed elements (or is there a workaround I don't know about?).

Solution

[m a d r a]

solution -

1. design your site using standards compliant code.
2. check it validates on W3C website.
3. publish site.
4. apply boot to testicles of anyone using internet explorer who tries to tell you the site "isn't working properly", whilst shouting loudly "no. your f**king browser isn't working properly!"

repeat until microsoft release standards compliant browser [or ad infinitum - whichever is the sooner]

[Millennium]

Dean Edwards' awesome IE7 JavaScript/stylesheet/miracle/whateveryouwanttocallit has been updated; it can now handle position:fixed and PNG transparency as well as the other stuff.

[Robbo]

Originally posted by m a d r a:
solution -

1. design your site using standards compliant code.
2. check it validates on W3C website.
3. publish site.
4. apply boot to testicles of anyone using internet explorer who tries to tell you the site "isn't working properly", whilst shouting loudly "no. your f**king browser isn't working properly!"

repeat until microsoft release standards compliant browser [or ad infinitum - whichever is the sooner]

If only this solution worked!
Thank you madra - not only have you made me realise I'm not the only one who wants to do this, you gave me a good chuckle too......

[philzilla]

Originally posted by m a d r a:
solution -

1. design your site using standards compliant code.
2. check it validates on W3C website.
3. publish site.
4. apply boot to testicles of anyone using internet explorer who tries to tell you the site "isn't working properly", whilst shouting loudly "no. your f**king browser isn't working properly!"

repeat until microsoft release standards compliant browser [or ad infinitum - whichever is the sooner]

I APPROVE!

[Avenir]

IE7 doesn't help the box_model problem on IE for Mac though, right? Yeah, I know, everyone should use Safari or something else, but still, I had to check.

[Millennium]

Originally posted by Avenir:
IE7 doesn't help the box_model problem on IE for Mac though, right? Yeah, I know, everyone should use Safari or something else, but still, I had to check.

What problem are you referring to? I'm familiar with many problems with IE's box model, and IE7 fixes these, but I don't know of any IE/Mac issues with the box model.

[Avenir]

Originally posted by Millennium:
What problem are you referring to? I'm familiar with many problems with IE's box model, and IE7 fixes these, but I don't know of any IE/Mac issues with the box model.

I'm not sure if that's exactly what it's called, but there is still a slight problem with padding/margins on this page that works in Safari, is fixed in IE Win with IE7, but still renders funky in IE Mac. In the end, my solution was to just give up on IE Mac, it's only a little bit off.

[Apfhex]

Originally posted by Turias:
UPDATE: The latest versions of IE7 have PNG support, so you no longer need to use both hacks.

I just happened to check out a site I'm building on IE7 earlier, it has one 24-bit transparent PNG, which displayed with a solid gray background (IE5:Mac doesn't have this problem). So I'm going to have to look into the hack anyway, or just JPEG it (more likely).

Edit: Whoops, no, turns out I was using IE6. I was under the impression that XP SP2 actually had IE7?! Whatever...

[projos]

Wow -- that's super! Thanks.

[monkeybrain]

Hi,

I wonder if anyone could take a look at my site here: http://www.morrissey.cattish.co.uk and tell me why it doesn't render right in IE.

I'm using the patch from this thread, but I think the versions of IE I have checked in are not version 7, how can it work with earlier versions?

The problem seem to be that the two boxes that form the menus in the left frame overlap each other, also the frames shows borders - I'd prefer no borders.

I guess using frames makes this more complex, but I have no choice because of the software I use for making the picture galleries.

Thanks a lot for your help

[Millennium]

Originally posted by monkeybrain:
I'm using the patch from this thread, but I think the versions of IE I have checked in are not version 7, how can it work with earlier versions?

IE7. despite its name, is not a new browser or version of Internet Explorer. Internet Explorer version 7.0 is coming, but there are no betas yet and nobody knows what features it will include.

IE7 is a set of JavaScript routines which hook into versions of IE earlier than 7 (which at the moment happens to include the latest version: 6.0.something) and automatically works around many of IE's CSS bugs and limitations. Yes, the name is confusing. It will be changing soon.

[madmacgames]

Has anyone had success with the newer versions of IE7? Versions 0.7.2 and 0.7.3 work great; but anything above version 0.7.3 just absolutely refuses to load in IE.

[Millennium]

Originally Posted by madmacgames

Has anyone had success with the newer versions of IE7? Versions 0.7.2 and 0.7.3 work great; but anything above version 0.7.3 just absolutely refuses to load in IE.

0.8 has been working well for me. It's much faster than previous versions, and the project I work on requires pretty much everything to be loaded.

This said, avoid the ie7-squish file. I've had an awful time getting this one to work; it seems to cause more problems than it solves.

[madmacgames]

Originally Posted by Millennium

0.8 has been working well for me. It's much faster than previous versions, and the project I work on requires pretty much everything to be loaded.

Do you have a site you can post that it is working on? I've tried both the compressed and uncompressed file for the full version 0.8 and neither will load on any page I try in any version of IE I try.

[Cory Bauer]

I see it's been two months since anyone posted in this thread, so I hope I get a response. Is anyone using the latest IE7 (version 9.0) to make .png transparencies display correctly in Windows Internet Explorer? It works, but when used with a png-based rollover, my images stay rolled in Windows Internet Explorer - anyone know how to make them roll and unroll properly? Thanks!

[- - e r i k - -]

I think mine works properly: http://selskapsspesialisten.no

However, despite claims to the otherwise 0.9 still breaks style sheet-switching. Anyone know why?

[cbk1994]

if IE doesn't work, go jump in a lake, and then come back and go get firefox ... Anyway, what's the point of using Internet Exploder? Sorry if this is spam =P