PDA

View Full Version : PNG images in IE6..Solutions anyone?


africano
09-26-2008, 01:03 PM
Hi, Ive recently stumbled across a problem! Ive sliced up my design and all was well when I realised I had two png images that dont have transparency in IE6...... If I ry and save them as gifs, they have smudges around the image.

So If I cant use the pngs what other options do I have? Should I try and clean up the smudged gifs? or re-slice my design?

Anyone else come across this problem?

Ricky55
09-26-2008, 02:55 PM
you can use png's see this fix and it works!

http://www.twinhelix.com/css/iepngfix/

Thank Rob Che not me

africano
09-26-2008, 04:06 PM
cheers, it works...But Im afraid not for me!:(

I get the:
Links or form elements within a PNG'd element aren't clickable.Due to an IE bug, if you are putting links within an element with a transparent background, the element must not have a CSS relative/absolute position. Otherwise the links will likely be un-clickable. The script will warn you with a popup alert dialog if this occurs. There is an excellent article on PNG filters and links (http://www.satzansatz.de/cssd/tmp/alphatransparency.html) you might want to read if you are a CSS expert that contains more info and workarounds.will keep looking!

africano
09-26-2008, 04:42 PM
I officially hate IE6!!!!!!

Ive tried a couple of different PNG fixes, but Ive got Links in there and the fixes make em unclickable!!

What can i doż? Should I give up...surrender to IE6.....:x

Ricky55
09-26-2008, 05:37 PM
what do your graphics look like, is transparency the only way, I usually find that you can get round it by slicing or constructing things slightly differently.

Its crap is IE full stop, not just 6 but 6 is worse. I wish we didn't have to support it but its still too popular.

Cary
09-27-2008, 05:54 AM
Can you post a test link to your page so we can see what you have?

The twinhelix method uses an .htc file which may not work correctly with IE6 on Win XP with SP2 unless it's served correctly. The same applies if you use an .htc file to make pure CSS menus work with IE6.

HTC components in XP Service Pack 2 (http://www.hoeben.net/node/33)

Rob_Che
09-28-2008, 09:23 PM
Links or form elements within a PNG'd element aren't clickable.Due to an IE bug, if you are putting links within an element with a transparent background, the element must not have a CSS relative/absolute position. Otherwise the links will likely be un-clickable. The script will warn you with a popup alert dialog if this occurs. There is an excellent article on PNG filters and links (http://www.satzansatz.de/cssd/tmp/alphatransparency.html) you might want to read if you are a CSS expert that contains more info and workarounds.will keep looking!

That's an interesting read. After I posted the twinhelix link (thanks Ricky) I hadn't tried it on a menu. i recenty tried it on a header navbar. WOW - it went crazy in IE6. It was there but wiped out the styling for it and made it unclickable.

As Ricky says... bite the bullet and make a .gif workaround - you'll save yourself a lot of frustrating googling.

Putting a dsiclaimer on your site that you don't support an operating system is completely unacceptable (unless it's Netscape *spit*)

Rob

Ricky55
09-28-2008, 10:00 PM
actually Rob I had this problem with that png fix, where by IE was throwing up an error dialogue saying that positioned elements couldn't be clickable.

I've actually found an alternative solution now and it works fine for me. I'm using it on a wrapper div, I have it repeating and I have links inside that work fine.

This can be downloaded here,
http://allinthehead.com/retro/289/sleight-update-alpha-png-backgrounds-in-ie

The file you want is bgsleight.js you also need a 1px x 1px trans gif.

I have this working so if anyone needs a hand just post on here.

Ricky55
09-28-2008, 10:01 PM
how come you're a team leader btw, dom must have his favourites, I've been around on here for years, wheres my team leader badge?

Rob_Che
09-28-2008, 10:14 PM
I've actually found an alternative solution now and it works fine for me. I'm using it on a wrapper div, I have it repeating and I have links inside that work fine.

Brilliant work Ricky. I will investigate now . . .

how come you're a team leader btw.

I couldn't possibly comment. I'm very sore though.

Ricky55
09-28-2008, 11:53 PM
Does it hurt more when you sit down by any chance?

domedia
09-29-2008, 12:24 AM
how come you're a team leader btw, dom must have his favourites, I've been around on here for years, wheres my team leader badge? A Team Leader is a moderator of the forum actually, it's not product of post count or seniority of course.

africano
09-29-2008, 08:04 AM
Thanks for all the feedback guys. Ive got two pngs, I dont know why but if I save em as gifs, they appear smudged...there is like a color smudge around the image. Thats why I went the .png way.

Ive got links inside so as Ive said I have some problems with the first method used, Iam now trying out the method Ricky55 suggests.

The x.gif that has to be used, do I make this myself...what is it a blank, transparent gif?

Cheers, see if It will work for me!

africano
09-29-2008, 08:19 AM
Ummm, the javascript is doing something strange for me...Its working some what, but its stretching the two png images and it doesnt detect the links...any ideas rickyy55?

africano
09-29-2008, 11:35 AM
here is a link to another thread, Ive put up a TEST page of the design, the two png images are on their so the problem is visible.

http://www.dreamweaverclub.com/forum/showthread.php?p=145677#post145677

domedia
09-29-2008, 01:08 PM
Where do you want this handled africano? We're not going to talk about the same thing in 2 threads :)

africano
09-29-2008, 01:10 PM
Where you feel its more apropiate. Sorry didnt mean to double thread!:)

You can delete whichever one you think isnt in the right place,

My apologies!
africano

Ricky55
09-29-2008, 05:39 PM
you need to give the element in question

position: relative
and or
height: 1%

Ricky55
09-29-2008, 05:41 PM
Dom, I knew it was a moderator I was just wonder why a select few had been chosen for the job?

I would have very much appreciated being a moderator.

africano
09-29-2008, 05:44 PM
Hi ricky55: Are you talking about the IE6 Fix for the .pngs?

you need to give the element in question

position: relative
and or
height: 1%

Will this fix the clickable issues as well as the stretching?

cheers.

domedia
09-29-2008, 06:15 PM
Dom, I knew it was a moderator I was just wonder why a select few had been chosen for the job?
I would have very much appreciated being a moderator.
A little off topic here, but I'll try my best :)
Selecting and inviting is based on many factors; typically activity, friendliness and knowledge in some areas. It's not typically something you ask for and then you're taken into consideration, and the decision on inviting new team leaders is not done by a single person.

Ricky55
09-29-2008, 08:19 PM
Africano have you got this working now?

africano
09-30-2008, 07:31 AM
Hey ricky55, no png images are still not working. My main problem is that I have links in both png elements and I dont know how to fix the issue.:(

Ricky55
09-30-2008, 05:15 PM
I've just done a site and this had png's for the border and this was also the wrapper div which contains many links and it works fine.

Could you show us a link?

Have you ensured that your path to the script is correct in the head of your document?

Also you need the script and 1 pixel square transparent gif in the same folder.

Then you need to make sure you set position relative and give your div an height if it doesn't already have one.

have you done all of the above.