Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Image transparency - IE6Image transparency - IE6
Previous
 
Next
New Post
4/22/2009 9:55 PM
 

Hi,

Anyone have the same problem with image transparency on IE6?

I have a background repeat image with some floating transparency images on top (images need to move with the browser window).
It looks good in Firefox, Safari and IE 7.... but in IE6 the transparency doesn't work :(

Read there is a DNN module that fixes this, but didn't say what module?
Can someone recommend a DNN solution to fix this? or even recommend a module (if exist)?

Thank you!

 
New Post
4/23/2009 11:50 AM
 

anh-
Two things:
(1) Regarding DNN:  It sounds like you are not currently using DNN.  There is nothing specifc to DNN that "improves" image rendering / transparency in IE6.  Also you cannot run a DNN module without DNN.  Implementing DNN to get around an image rendering problem would be like learning a new language to get around a misspelled word.
 
(2) Regarding your image transparency problem in IE6:  Can you give more specific detail on what method of transparency you are using?  For instance, are you using transparent GIF, transparent PNG, transparent Flash, a CSS setting, etc.  Also, does the issue appear only in IE6 or does it also appear in IE7 and IE8?
 
GIF transparancy should work fine in IE6.  Proper PNG rendering in IE6 requires a workaround.  Flash should work fine.  A CSS setting may be hit-or-miss as a number of settings are not supported by or are handled differently in IE than in other major browsers.
 
 
Please provide more info on your particular transparency implementation.
 
-mamlin


esmamlin atxgeek.me
 
New Post
4/24/2009 2:59 AM
 

Thanks for your reply Mamlin.

The image is a transparent PNG.
It works beautifully on IE7 (and every other browser)...
EXCEPT for IE6 :( It displays an light opaque colour (looks terrible as there are many pngs)
I thought of making them all transparent GIFs but the outline is not as smooth and nice as a PNG.... that would be my last resort/attempt to try fix the problem... Hoping there is a better solution out there.

Btw... this is the site SKIN we are referring to.

Can you advise?... thanking you (or anybody else) in advance!

Anh

 
New Post
4/24/2009 12:31 PM
 

As you know IE 6 is quite brain dead when it comes to PNGs. There is some PNG8 support, but PNG32 transparency is non-existent. But there are a number of workarounds. I have had some success with DD_belatedPNG (dillerdesign.com). It supports repeated and positioned background images too which is not normally the case with all of these workarounds that are out there. Even though, I have pretty much abandoned PNGs for IE6, but use them with all other browsers.

Basically, I design a site with PNGs, completely ignoring IE6. Once I have all the images and CSS files in place, I take a look at IE6. I convert all PNGs to transparent GIFs and make the site look reasonable with IE6. It will never look as good as with other browsers, but hopefully eventually IE6 will go away.

Now, to make sure only IE6 uses the GIFs, I use the DNN STYLES skin object. At the bottom of my skin, I add the following:

<dnn:STYLES runat="server" id="StylesIE6"  Name="IE6Minus"
     StyleSheet="css/mainIE6.css" Condition="LT IE 7" UseSkinPath="true" /> 

As usual, the normal skin and its css files will be included by the skin. Then, this statement will pull in my css file (mainIE6.css), but ONLY if this is IE6 or below. Because it's included last, I can use it to override all the normal styles and replace the PNGs with GIFs. Of course, for this to work correctly, I have to isolate all IE6 "stuff" in this css file. This works well for background images. Inline images I generally simply convert to background images so I can css style them.

I find this approach (quickly) produces decent results without any hacks or workarounds. The workarounds usually drag down the performance of the site quite a bit, particularly if you have lots of PNGs. This approach also exploits a nice built-in feature of DNN (the Styles skin object) while keeping 100% within the spirit of the DNN skins. Anyone who follows you who has to maintain your site will thank you.

 
New Post
4/24/2009 2:49 PM
 

I like mikevdm's solution for the reasons he mentioned.  Very direct and easy for others to follow.
 
In the past when I've tackled PNGs in IE6 (actually IE5.5 and IE6) I've either replaced them with Flash for "active" graphics (fancy overlay menus, for instance) or I've used the FILTER workaround which (for IE only) replaces normal PNG references with a FILTER-enabled PNG reference.  You can read more about that here:
 
   http://www.pcmag.com/article2/0,1759,1645331,00.asp

 
If going "GIF only" in IE6 works for you then Mike's solution is a little less complex and, therefore, less likely to break.  If you MUST have PNGs in IE5.5 and IE6 then the solution detailed in the PCMAG link has worked well for me.
 
Good luck!
-mamlin


esmamlin atxgeek.me
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Image transparency - IE6Image transparency - IE6


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out