JeevesBond — Tue, 14 Feb 2006 23:54:00 +0000

Right, sorry to have taken so long to reply, but have been hectic!

Here's what you need to do:

#pagecontentcontainer {
	background-image:url(content_.png);
	width: 500px;
	height: 234px;
	right: 0;
	position: absolute;
}

'
You see IE is only using the background-image property as a pointer to an image, as soon as that filter is applied the rest of the background CSS flies out of the window. IE has it's own little rules about filters, they behave differently to a normal background.

One of these rules is that the element must be a block-level one (although a float will do). Also IE will also resize the div according to the dimensions of the image - if the "sizingMethod" parameter is set to "image" that is. This means I had to stop the element being a container:

<div id="pagecontentcontainer"></div>

And don't forget to comment out/remove the old div:

<p>QuaverConnections is dedicated to helping your special event go with a bang. 
If you cant find what you are looking for in these pages, drop us a line on the contact page. 
We have over 50 years collective experience in the entertainment and arts industry and are more than happy to help you find a contact if we cannot provide it.</p>        </div>
      <!--</div>-->
[/code]

As it isn't a container, but we still want it to act like a background, I set the position to absolute. Removing it from the document flow.

Am hoping these insructions are clear enough to follow, I've made it work myself and will post files if necessary.

Hope it works!

Renegade — Thu, 09 Feb 2006 09:55:52 +0000

Yes, I have tried that, there is no error on the page when I do.

dk01 — Thu, 09 Feb 2006 08:41:24 +0000

Have you tried removing the image from the design and then applying the png hack? This way we could know if its some sort of png problem or if its a page problem.

Renegade — Thu, 09 Feb 2006 07:11:49 +0000

Well, the other two .pngs don't have any transparency, that's probably why they are showing up right.

dk01 — Wed, 08 Feb 2006 23:32:11 +0000

It's odd because the other two png's show up perfectly. :shrug:

Renegade — Wed, 08 Feb 2006 23:18:13 +0000

JeevesBond, I just tried using your script, still doesn't seem to work:
http://www.quaverconnections.co.nz/

Something I'm doing wrong?

JeevesBond — Wed, 08 Feb 2006 22:04:23 +0000

Yeah, carry on old fruit, it's free for everyone (as long as you leave the credits in there )!

I really should make it work for a class though, that would make more sense. Then you wouldn't have to do anything with the JS, just plug it in. Hmmm.

dk01 — Wed, 08 Feb 2006 19:01:56 +0000

JeevesBond wrote: I wasn't partial to the ALA method for png either (not very semantic), so have written my own (with a lot of help from existing methods), the code's attached, if you're interested.

To be honest I'm not happy with these routines as they should use a class, however all I needed this to work for is an ID.

Instructions for Use
Put attached files in same directory as the page you wish to use the effect on.
Add the following code to your HTML documents :

<script src="event.js" type="text/javascript"></script> <script src="opacity.js" type="text/javascript"></script>

Open the opacity.js with your chosen text editor and go to line 72, where it should say:

var mainobjOpacity = new pngOpacity('main');

The bit that says: 'main' needs to be changed to the id of the div you wish to have transparency on.

This works with background-image (in fact you must supply a background image in the CSS ), it will also remove the grey, you can see it in action at http://www.intermedia-online.com/clients/artisan/

This should do the job.

Looks good to me! Nice little script there Jeeves! Mind if I use it as long I all credits are left in?

dk01 — Wed, 08 Feb 2006 18:57:37 +0000

demonhale wrote: Here is what i mean whats wrong with the gif???

Ah I see now. My mistake. Sorry demonhale.

JeevesBond — Wed, 08 Feb 2006 14:07:15 +0000

I wasn't partial to the ALA method for png either (not very semantic), so have written my own (with a lot of help from existing methods), the code's attached, if you're interested.

To be honest I'm not happy with these routines as they should use a class, however all I needed this to work for is an ID.

Instructions for Use
Put attached files in same directory as the page you wish to use the effect on.
Add the following code to your HTML documents :

&lt;script src="event.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="opacity.js" type="text/javascript"&gt;&lt;/script&gt;

Open the opacity.js with your chosen text editor and go to line 72, where it should say:

var mainobjOpacity = new pngOpacity('main');

The bit that says: 'main' needs to be changed to the id of the div you wish to have transparency on.

This works with background-image (in fact you must supply a background image in the CSS ), it will also remove the grey, you can see it in action at http://www.intermedia-online.com/clients/artisan/

This should do the job.