jQuery.IFixPNG not working with Blueprint CSS

[chuawenching]

Hi everyone,

I am using the latest Blueprint CSS, jQuery and jQuery.IFixPNG as
below:-

<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></
script>
<script type="text/javascript" src="ie6comp/jquery.ifixpng2.js"></
script>

$(document).ready(function() {
$.ifixpng('images/pixel.gif');
$('img[src$=.png]').ifixpng();
});

It doesn't work in IE6. It makes no difference without applying
jQuery.IFixPNG. Initially I thought it was a problem of
jQuery.IFixPng. Later I tested a new html site without blueprintcss
and it worked successfully.

Why isn't it working with blueprintcss? Any help?

If not, is there a better way to handle transparency PNG for IE6?

Thanks.

[Christian Montoya]

On Aug 21, 8:00 am, chuawenching <chuawench...@gmail.com> wrote:
> Hi everyone,
>
> I am using the latest Blueprint CSS, jQuery and jQuery.IFixPNG as
> below:-
>
> <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></
> script>
> <script type="text/javascript" src="ie6comp/jquery.ifixpng2.js"></
> script>
>
> $(document).ready(function() {
>    $.ifixpng('images/pixel.gif');
>    $('img[src$=.png]').ifixpng();
>
> });
>
> It doesn't work in IE6. It makes no difference without applying
> jQuery.IFixPNG. Initially I thought it was a problem of
> jQuery.IFixPng. Later I tested a new html site without blueprintcss
> and it worked successfully.

I have an idea. Could you try removing the ie.css file from the header
of your page and then see if the ifixpng method works? I think
something in the ie.css is conflicting with this jQuery plugin.

--
Christian Montoya

[chuawenching]

Hi Christian Montoya,

I tried. No difference to IE6. Still the same problem.

I also tried the TwinHelix IEPngFix with Blueprint CSS, it was still
the same problem.

Let me clarify a bit ... basically jQuery.IFixPNG and TwinHelix
IEPngFix do clear off the box surrounding the PNG files. But I can't
overlay my text/inputs on top of the PNG images. It will just go down
the image as if it is like this.

[Image]
[Text]

Rather I want the text to show on top of the Image. My codes as
below:-

Note:
- ResolveClient is for my ASP.NET Testing purpose to get the right
path in MasterPage.
- Mid.png is a tiny vertical image which I will repeat at the
background.
- watermark-building.png is the watermark image
- bottom.png will show the footer stuff.

<div class="span-23" id="mainBody" style="background: url('<%=
ResolveClientUrl("~/images/mid.png") %>') repeat-y center top;
height: auto;">
<div id="hright">
<div id="hrighttop">
<img id="imgWatermark" src='<%= ResolveClientUrl
("~/images/watermark-building.png") %>'
alt="" />
</div>
</div>
My text will be here (suppose to be on top of my
watermark)
<div id="footer">
<div class="span-23" id="imgFooter" style="background:
url('<%= ResolveClientUrl("~/images/bottom.png") %>') bottom center no-
repeat;
height: 77px;">
&nbsp;
</div>
</div>
</div>

Any help?

Thanks.

Regards,
Wen Ching

[chuawenching]

Just to add one more ... the codes i listed above ... works properly
in IE6 without BlueprintCSS references ... basically I copy the whole
div container to another html file without these:-

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css"
media="screen, projection" />
<link rel="stylesheet" href="css/blueprint/print.css" type="text/
css" media="print" />
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/
ie.css" type="text/css" media="screen, projection" /><![endif]-->

Any help will be enlightening?

Thanks.

Regards,
Wen Ching

[banacan]

I just want to say that I have been using IEPngFix.js successfully with BP on at least 5 websites, so I know it works and BP is not the issue.  Are you setting class="iepngfix" on those images you want to have transparency?  Also, do you have blank.gif in your directory?  Is the path correct to iepngfix.js?

http://groups.google.com/group/blueprintcss/browse_thread/thread/d93bf4ecb4a92716/628dd0ec345cd902?show_docid=628dd0ec345cd902

--

[da]

> If not, is there a better way to handle transparency PNG for IE6?

Not sure about 'better' but I've been using Angus Turnbull's TwinHelix
new solution (v2.0 Alpha 3)

http://www.twinhelix.com/css/iepngfix/

It's the only IE6 png fix script that I've found that supports both
tiling and positioning of background transparent PNG images in IE6.

It works with FancyBox with one exception: The 'x' closing icon
dissapears in IE6. Not sure if that was due to my implementation, but
I eventually fixed it by passing in a separate class for the close 'x'
image for IE6 and serving up a GIF for that browser instead.

-Darrel

[chuawenching]

Thanks. I got it working. Just make my watermark img as div background
image. Not sure why before this, works in all browsers except IE6.

However, if compare between the jquery.ipngfix and IEPngFix ... the
latter works better, but it is a bit slow though.

On Aug 25, 8:56 pm, banacan <banaca...@gmail.com> wrote:
> I just want to say that I have been using IEPngFix.js successfully with
> BP on at least 5 websites, so I know it works and BP is not the issue.  
> Are you setting class="iepngfix" on those images you want to have
> transparency?  Also, do you have blank.gif in your directory?  Is the
> path correct to iepngfix.js?
>

> http://groups.google.com/group/blueprintcss/browse_thread/thread/d93b...
>
> --