Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

IE6 PNG Display & Crop Problems

Posted on 2009-04-13
9
Medium Priority
?
464 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 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
Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

 
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

Python: Series & Data Frames With Pandas

Learn the basics of Python’s pandas library of series & data frames and how we can use these tools for data manipulation.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
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

730 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