Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

IE6 PNG Display & Crop Problems

Posted on 2009-04-13
9
Medium Priority
?
475 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 43

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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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 1500 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…
Suggested Courses

782 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