Solved

IE6 PNG Display & Crop Problems

Posted on 2009-04-13
9
455 Views
Last Modified: 2013-12-08
I have have been supplied with artwork that relies heavily on transparent PNG's. I am having some difficulty with implementing the necessary IE6 hacks:

http://www.thetwobuckclub.com/sponsors/

Firstly, I have tried to use jQuery pngFix directly on the body images by setting a class "pngFix" on the target images. This isn't working.

Secondly, I have used Microsoft DX AlphaImageLoader on selected DIV's, using a conditional stylesheet (http://www.thetwobuckclub.com/__styles/ie.css). However, the images are being heavily cropped (I suspect due to absolute positioning)

Please refer to supplied URL's for code

How can I get
0
Comment
Question by:webstudiointeractive
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
9 Comments
 
LVL 42

Expert Comment

by:David S.
ID: 24134784
I think the problem may have to do with you using AlphaImageLoader on an element that has position:relative. I suggest you add another <div> so you can put those two declarations on separate elements.
0
 
LVL 4

Expert Comment

by:rafe_
ID: 24134818
The png fix I have worked with in the past required the pngs to be background images on divs, and you were not able to use background positioning. Furthermore you could not have links within the divs with background images (but you could counter this by having a container div, one inside it with the background png and another div inside the container on top of the png div with the links and content in it.

Having said that, I know that there are png fixes out there which allow pngs in img tags, ones which let you use background positions, but i'm not sure about the link problem.

I guess what i'm trying to say is just be aware of the limitations of the png fix you are using because that could be where you are running into problems
0
 

Author Comment

by:webstudiointeractive
ID: 24134823
The problem appears to be with elements that have position: absolute. Any ideas?
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 4

Expert Comment

by:rafe_
ID: 24134854
let me fire up the iron horse and look at it in ie6, i'll get back to you
0
 
LVL 4

Accepted Solution

by:
rafe_ earned 500 total points
ID: 24134896
hey there - the problem is that your png images are being cropped by the boundaries of "content-wrapper" ie the png fix cannot place images outside of its parent. It seems that this particular parent places the pngs at the same level as its own parent, which is why the images are being cropped by "content-wrapper" which is two levels up rather than "content" which is its immediate parent. So let's say that the pngs are placed inside the grandparent.

Thus there are three things I'd try

Firstly, on the off-chance that this can be solved really easily, give "content-wrapper" and "content" the property overflow: visible. However I don't think this will work, but worth a try.

Secondly move the pngs into the "content-wrapper" div rather than the "content" div. The only reason this might not work is if the png fix doesn't want to put stuff straight into the body. Give it a try anyway, I wouldn't put money on it working or not working.

If this fails, make another container which contains "content-wrapper" which is as wide as necessary to contain all of the graphics without cropping them. Stick the necessary graphics inside that and if that doesn't work then look at integrating the gradient into the background and making jpgs (this would only work for the site name, and not your little smiley face things).

Hope that helped! Let us know how it goes
0
 

Author Closing Comment

by:webstudiointeractive
ID: 31569764
Thanks rafe, tried all options with limited success.

I have now opted to hide the "mascot" faces in IE6.

Your solution to the gradient in the background of the site name has been used.
0
 
LVL 4

Expert Comment

by:rafe_
ID: 24135094
gutted! Those png-fixes are ridiculously frustrating, better luck next time hopefully!
0
 

Author Comment

by:webstudiointeractive
ID: 24135104
@rafe

Yes, I agree. I think it boiled down to be more of a general IE6 issue, whereby it cuts off negatively positioned (absolute) div's. The idea to create an outer wrapper was good, but forced the page to be ~1300 pixels wide which is too wide.

Thanks for your help.
0
 
LVL 4

Expert Comment

by:rafe_
ID: 24135127
yeah that's no good - take a look at this website: www.comedyfestival.co.nz

It doesn't use the png fix in the header anymore, but the header, as you can see, is wider than the site content - however if you drag the window narrower you will notice that the horizontal scrollbar only appears at the correct site width. You will notice that the header image is in ht html twice - one as a 100% width div with background, and the other is only as wide as the site container with the header just cropped so it sits perfectly on top of the other image. You could use a similar technique - it is probably easier to understand by working through the code of that site
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

622 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question