Solved

IE6 PNG Display & Crop Problems

Posted on 2009-04-13
9
443 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
  • 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
 
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript create file issue 4 47
Remove greater than sign 3 42
CSS z-index issue 3 19
Change CSS to show Notification Bar 9 17
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

912 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now