Problems with IE

[LampArtPro]

I recently finished my site, and it looks great on Firefox, thanks to the help of several people on this forum. However in Internet Explorer, several spaces appear where I have code for CSS.

This is my site: www.dotswoof.com/home.html

The code I put in was:
<div style="width:953px; height:9px; background-image: url('images/shadow.png'); background-repeat: repeat-x;"></div>

I can't figure out what's wrong, the spacer image is there, as I said the site works fine on Firefox, just not in IE.

[WebJoel]

I've never been a fan of using *png for background-image... too much hassle with IE.

[LampArtPro]

What do PNG's do wrong in IE? Its the only way to get a transparent image in there. Since Gifs add white to their transparent images.

[Dragonkai]

There is a way to handle pngs in IE6.

It's called the iepngfix. There are several ones on the internet.... but this one worked for me:

Go to your css.

For example...

#countries{
background: url("../images/blah.png");
}

Then add this line of text to it, making:

#countries{
background: url("../images/blah.png");
behavior:url('scripts/iepngfix.htc');
}

Now at your webserver make a folder called "scripts"

Put iepngfix.htc file there, plus the gif file. (see attachments)

NOTE: the file is iepngfix.txt you need to change the extension to .htc afterwards.

Note:
This is assuming that you have your directory structure as:

Root->(Name of project)-> "scripts" folder and index.html and "css" folder

This will render the png correctly, albeit using javascript, plus this is not valid css.

However it works, and doesn't affect any other browsers.

Tell me how it went?

[WebJoel]

I'm not sure if iepngfix.htc does it's thing for background-images, was my point. It might, -I have never been able to acheive that so I stopped trying.

You can 'tweak' IEx into thinking it's IE8, which is supposed to handle *png images (and resolve a host of other browser sins pertainant to older IEs...)

Adding this before "</head>"...<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]--> accesses a large, permanant list of 'hacks/fixes' that supposedly heals the woes of IEs past...

This file is about the same as the *htc, except that it is more comprehensive.

[Dragonkai]

Well that method is even easier.... but it does work for background images, that's what I tried it for.