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
Solved

IE6 PNG Display & Crop Problems

Posted on 2009-04-13
9
448 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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

860 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