Greybox IE6 css

[Espen Moe-Nilssen]

Some javascript/style in this post has been disabled (why?)

Hi

I am making a new look for greybox (which looks nice in the browsers I like....)

In IE6 a grey field shows up.

Anyone knows where this comes from (I dont have IE6 installed here)

The url is:

http://www.vestkunst.no/brukere/espen-moe-nilssen/india

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[David Little]

Is it to do with the fact you're using a .png image as the background
for the boxes? IE6 doesn't support PNG alpha transparency. I've just
had a similar problem on something I'm working on. In the end I
changed my image to a GIF which was fine for what I was doing.

Cheers,
David

2008/9/29 Espen Moe-Nilssen <[hidden email]>:

> Hi
> I am making a new look for greybox (which looks nice in the browsers I
> like....)
> In IE6 a grey field shows up.
> Anyone knows where this comes from (I dont have IE6 installed here)
> The url is:
> http://www.vestkunst.no/brukere/espen-moe-nilssen/india
>
>
>
>
>
> _______________________________________________
> UI mailing list
> [hidden email]
> http://lists.plone.org/mailman/listinfo/ui
>
>

--
David Little
www.littled.net

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[vedaw]

PNG 24 should also work. IE6 prefers that over PNG8.


On 9/29/08 7:55 AM, "David Little" <[hidden email]> wrote:

> Is it to do with the fact you're using a .png image as the background
> for the boxes? IE6 doesn't support PNG alpha transparency. I've just
> had a similar problem on something I'm working on. In the end I
> changed my image to a GIF which was fine for what I was doing.
>
> Cheers,
> David
>
> 2008/9/29 Espen Moe-Nilssen <[hidden email]>:
>> Hi
>> I am making a new look for greybox (which looks nice in the browsers I
>> like....)
>> In IE6 a grey field shows up.
>> Anyone knows where this comes from (I dont have IE6 installed here)
>> The url is:
>> http://www.vestkunst.no/brukere/espen-moe-nilssen/india
>>
>>
>>
>>
>>
>> _______________________________________________
>> UI mailing list
>> [hidden email]
>> http://lists.plone.org/mailman/listinfo/ui
>>
>>
>
>

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[David Little]

There's also some variation on this which might help -- it uses IE's
AlphaImageLoader filter
(http://msdn.microsoft.com/en-us/library/ms532969.aspx):

E.g.:

.myclass {
  background: none;
  filter :progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,
        src='http://path/to/my/png')

}

David



2008/9/29 Veda Williams <[hidden email]>:

> PNG 24 should also work. IE6 prefers that over PNG8.
>
>
> On 9/29/08 7:55 AM, "David Little" <[hidden email]> wrote:
>
>> Is it to do with the fact you're using a .png image as the background
>> for the boxes? IE6 doesn't support PNG alpha transparency. I've just
>> had a similar problem on something I'm working on. In the end I
>> changed my image to a GIF which was fine for what I was doing.
>>
>> Cheers,
>> David
>>
>> 2008/9/29 Espen Moe-Nilssen <[hidden email]>:
>>> Hi
>>> I am making a new look for greybox (which looks nice in the browsers I
>>> like....)
>>> In IE6 a grey field shows up.
>>> Anyone knows where this comes from (I dont have IE6 installed here)
>>> The url is:
>>> http://www.vestkunst.no/brukere/espen-moe-nilssen/india
>>>
>>>
>>>
>>>
>>>
>>> _______________________________________________
>>> UI mailing list
>>> [hidden email]
>>> http://lists.plone.org/mailman/listinfo/ui
>>>
>>>
>>
>>
>
>

--
David Little
www.littled.net

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[Espen Moe-Nilssen]

Some javascript/style in this post has been disabled (why?)

Hi

Thanks for all the feedback.

I have done css with AlphaImageLoader before but stopped (years ago) without remembering why.

Is this very very slow / not always working (or maybe it was some mistake I did)?

Den 30. sep. 2008 kl. 11.37 skrev David Little:

There's also some variation on this which might help -- it uses IE's

AlphaImageLoader filter

(http://msdn.microsoft.com/en-us/library/ms532969.aspx):

E.g.:

.myclass {

  background: none;

  filter :progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,

        src='http://path/to/my/png')

}

David

2008/9/29 Veda Williams <[hidden email]>:

PNG 24 should also work. IE6 prefers that over PNG8.

On 9/29/08 7:55 AM, "David Little" <[hidden email]> wrote:

Is it to do with the fact you're using a .png image as the background

for the boxes? IE6 doesn't support PNG alpha transparency. I've just

had a similar problem on something I'm working on. In the end I

changed my image to a GIF which was fine for what I was doing.

Cheers,

David

2008/9/29 Espen Moe-Nilssen <[hidden email]>:

Hi

I am making a new look for greybox (which looks nice in the browsers I

like....)

In IE6 a grey field shows up.

Anyone knows where this comes from (I dont have IE6 installed here)

The url is:

http://www.vestkunst.no/brukere/espen-moe-nilssen/india

_______________________________________________

UI mailing list

[hidden email]

http://lists.plone.org/mailman/listinfo/ui

-- 

David Little

www.littled.net

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[David Little]

Hi,

To be honest, I've not noticed it being slow and haven't had any
problems with it working that I can recall, it's just a little clunky
having to remember to put it in.

David

2008/9/30 Espen Moe-Nilssen <[hidden email]>:

> Hi
> Thanks for all the feedback.
> I have done css with AlphaImageLoader before but stopped (years ago) without
> remembering why.
> Is this very very slow / not always working (or maybe it was some mistake I
> did)?
>
>
>
> Den 30. sep. 2008 kl. 11.37 skrev David Little:
>
> There's also some variation on this which might help -- it uses IE's
> AlphaImageLoader filter
> (http://msdn.microsoft.com/en-us/library/ms532969.aspx):
> E.g.:
> .myclass {
>   background: none;
>   filter
> :progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,
>         src='http://path/to/my/png')
> }
> David
>
>
> 2008/9/29 Veda Williams <[hidden email]>:
>
> PNG 24 should also work. IE6 prefers that over PNG8.
>
> On 9/29/08 7:55 AM, "David Little" <[hidden email]> wrote:
>
> Is it to do with the fact you're using a .png image as the background
> for the boxes? IE6 doesn't support PNG alpha transparency. I've just
> had a similar problem on something I'm working on. In the end I
> changed my image to a GIF which was fine for what I was doing.
> Cheers,
> David
> 2008/9/29 Espen Moe-Nilssen <[hidden email]>:
>
> Hi
> I am making a new look for greybox (which looks nice in the browsers I
> like....)
> In IE6 a grey field shows up.
> Anyone knows where this comes from (I dont have IE6 installed here)
> The url is:
> http://www.vestkunst.no/brukere/espen-moe-nilssen/india
>
>
>
>
> _______________________________________________
> UI mailing list
> [hidden email]
> http://lists.plone.org/mailman/listinfo/ui
>
>
>
>
>
>
>
>
> --
> David Little
> www.littled.net
>

--
David Little
www.littled.net

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[vedaw]

I haven't tried these methods, but they have been documented as possible
options.


/* IE workarounds per:
http://www.solidstategroup.com/page/1592, see #3
http://www.alistapart.com/stories/pngopacity/
http://www.daltonlp.com/view/217
*/

/* FF overide */
#portal-logo[id] {
background-image: url(&dtml-portal_url;/logo.gif) !important;
}


On 9/30/08 2:37 AM, "David Little" <[hidden email]> wrote:

> There's also some variation on this which might help -- it uses IE's
> AlphaImageLoader filter
> (http://msdn.microsoft.com/en-us/library/ms532969.aspx):
>
> E.g.:
>
> .myclass {
>   background: none;
>   filter
> :progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,
>         src='http://path/to/my/png')
>
> }
>
> David
>
>
>
> 2008/9/29 Veda Williams <[hidden email]>:
>> PNG 24 should also work. IE6 prefers that over PNG8.
>>
>>
>> On 9/29/08 7:55 AM, "David Little" <[hidden email]> wrote:
>>
>>> Is it to do with the fact you're using a .png image as the background
>>> for the boxes? IE6 doesn't support PNG alpha transparency. I've just
>>> had a similar problem on something I'm working on. In the end I
>>> changed my image to a GIF which was fine for what I was doing.
>>>
>>> Cheers,
>>> David
>>>
>>> 2008/9/29 Espen Moe-Nilssen <[hidden email]>:
>>>> Hi
>>>> I am making a new look for greybox (which looks nice in the browsers I
>>>> like....)
>>>> In IE6 a grey field shows up.
>>>> Anyone knows where this comes from (I dont have IE6 installed here)
>>>> The url is:
>>>> http://www.vestkunst.no/brukere/espen-moe-nilssen/india
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> _______________________________________________
>>>> UI mailing list
>>>> [hidden email]
>>>> http://lists.plone.org/mailman/listinfo/ui
>>>>
>>>>
>>>
>>>
>>
>>
>
>

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[Shuens]

On Tue, Sep 30, 2008 at 12:33 PM, Espen Moe-Nilssen <[hidden email]> wrote:
> Hi
> Thanks for all the feedback.
> I have done css with AlphaImageLoader before but stopped (years ago) without
> remembering why.
> Is this very very slow / not always working (or maybe it was some mistake I
> did)?

"small"(?) limitation exists with the AlphaImageLoader, in particular
IE6 has a problem with garbage collection when it comes to CSS filters
(and number of leaks, the worst of which are related with JScript),
so, too many filters can drive you to slowness... other problem is the
cursor doesn't allow you to click the links inside of an element with
the filter applied (there is a work around for that).
in some projects I used this script
http://labs.unitinteractive.com/unitpngfix.php, (in most cases ) works
very well, very fast to deploy and see if is suitable for you.

I notice in your css code a possible error(for ie6), you have this:

<div class="box">
    <div class="frame">
        ....
    </div>
</div>

".box"  have a fix width (160px), the child ".frame" don't; ie6 set
blocks to 100% width by default and ".frame" have the shadow of the
image like background, so the shadow always is going to have a width
of 160px...
with a quick workaround (in your ie fixes and just for ie6) like:

.frame {
    width: 0.1%;
}

you can fix that...


regards...
Q.
--
Senior designer - Plone integrator
www.menttes.com

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[RobZoneNet]

I believe IE likes PNG8 over PNG24. But who cares. There is a easy way of doing this. I needed to figure it out for my theme I did for the Plone Conference. I wrote up the solution:
https://weblion.psu.edu/trac/weblion/wiki/IePngFix

This solution uses IEFixes so that only IE browsers see it. It also uses the ie6 hack '* html' so that only ie6 implements it.  It works for all images that could be on my site amongst other things. :)

On Tue, Sep 30, 2008 at 3:18 PM, Silvestre Marcelo Huens <[hidden email]> wrote:

On Tue, Sep 30, 2008 at 12:33 PM, Espen Moe-Nilssen <[hidden email]> wrote:
> Hi
> Thanks for all the feedback.
> I have done css with AlphaImageLoader before but stopped (years ago) without
> remembering why.
> Is this very very slow / not always working (or maybe it was some mistake I
> did)?

"small"(?) limitation exists with the AlphaImageLoader, in particular
IE6 has a problem with garbage collection when it comes to CSS filters
(and number of leaks, the worst of which are related with JScript),
so, too many filters can drive you to slowness... other problem is the
cursor doesn't allow you to click the links inside of an element with
the filter applied (there is a work around for that).
in some projects I used this script
http://labs.unitinteractive.com/unitpngfix.php, (in most cases ) works
very well, very fast to deploy and see if is suitable for you.

I notice in your css code a possible error(for ie6), you have this:

<div class="box">
   <div class="frame">
       ....
   </div>
</div>

".box"  have a fix width (160px), the child ".frame" don't; ie6 set
blocks to 100% width by default and ".frame" have the shadow of the
image like background, so the shadow always is going to have a width
of 160px...
with a quick workaround (in your ie fixes and just for ie6) like:

.frame {
   width: 0.1%;
}

you can fix that...


regards...
Q.
--
Senior designer - Plone integrator
www.menttes.com

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

--
Rob Porter
http://robzone.net/

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[Lars Löwenadler]

RobZoneNet wrote:

I believe IE likes PNG8 over PNG24. But who cares. There is a easy way of
doing this. I needed to figure it out for my theme I did for the Plone
Conference. I wrote up the solution:
https://weblion.psu.edu/trac/weblion/wiki/IePngFix

This solution uses IEFixes so that only IE browsers see it. It also uses the
ie6 hack '* html' so that only ie6 implements it.  It works for all images
that could be on my site amongst other things. :)

Hi all, I have tried the WebLion IE png fix - as linked above - but I can't get it to work. I'm working in the ZMI; should the code be pasted into a DTML Document or a DTML Method? I've tried both with no success. Also, should the name (Id) typed in ZMI really be iepngfix.htc.dtml or should I drop the last .dtml (as I'm creating a DTML Document or Method)?

I've pasted the CSS code in my custom CSS file (still in ZMI), and as far as I know I've typed the path correct to call the DTML ___ ... so I really can't figure out why nothing happens when viewing the site in IE6.

Thanks,
Lars

[Espen Moe-Nilssen]

Some javascript/style in this post has been disabled (why?)

"along the same line":

check out product: "EasyASPile"

(... but its time to leave IE6 behind)

There are some hacks you can do without the IEFix file

(google for IE hacks)

It could be something like this, if I remember right 

#mydiv {

background-image: nice-image;

_background-image: ugly-image-for-IE;

}

try swapping order of the two linesif this doesnt work, maybe

#mydiv {

_background-image: ugly-image-for-IE !important;

background-image: nice-image-for-normal-browsers;

}

Espen Moe-Nilssen

_______________________________________________

Author of Subskins III , build your own theme for Plone. Try it at:

http://subskins.medialog.no

Den 17. aug. 2009 kl. 15.17 skrev Lars Löwenadler:

RobZoneNet wrote:

I believe IE likes PNG8 over PNG24. But who cares. There is a easy way of

doing this. I needed to figure it out for my theme I did for the Plone

Conference. I wrote up the solution:

https://weblion.psu.edu/trac/weblion/wiki/IePngFix

This solution uses IEFixes so that only IE browsers see it. It also uses

the

ie6 hack '* html' so that only ie6 implements it.  It works for all images

that could be on my site amongst other things. :)

Hi all, I have tried the WebLion IE png fix - as linked above - but I can't

get it to work. I'm working in the ZMI; should the code be pasted into a

DTML Document or a DTML Method? I've tried both with no success. Also,

should the name (Id) typed in ZMI really be iepngfix.htc.dtml or should I

drop the last .dtml (as I'm creating a DTML Document or Method)?

I've pasted the CSS code in my custom CSS file (still in ZMI), and as far as

I know I've typed the path correct to call the DTML ___ ... so I really

can't figure out why nothing happens when viewing the site in IE6.

Thanks,

Lars

-- 

View this message in context: http://n2.nabble.com/Greybox-IE6-css-tp1125958p3458918.html

Sent from the User Interface & Design mailing list archive at Nabble.com.

_______________________________________________

UI mailing list

[hidden email]

http://lists.plone.org/mailman/listinfo/ui

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[vedaw]

Have you considered trying the EasyasPiIE plugin for Plone?

http://plone.org/products/products-easyaspiie

It's based on the same technology.


On 8/17/09 6:17 AM, "Lars Löwenadler" <[hidden email]>
wrote:

>
>
> RobZoneNet wrote:
>>
>> I believe IE likes PNG8 over PNG24. But who cares. There is a easy way of
>> doing this. I needed to figure it out for my theme I did for the Plone
>> Conference. I wrote up the solution:
>> https://weblion.psu.edu/trac/weblion/wiki/IePngFix
>>
>> This solution uses IEFixes so that only IE browsers see it. It also uses
>> the
>> ie6 hack '* html' so that only ie6 implements it.  It works for all images
>> that could be on my site amongst other things. :)
>>
>
> Hi all, I have tried the WebLion IE png fix - as linked above - but I can't
> get it to work. I'm working in the ZMI; should the code be pasted into a
> DTML Document or a DTML Method? I've tried both with no success. Also,
> should the name (Id) typed in ZMI really be iepngfix.htc.dtml or should I
> drop the last .dtml (as I'm creating a DTML Document or Method)?
>
> I've pasted the CSS code in my custom CSS file (still in ZMI), and as far as
> I know I've typed the path correct to call the DTML ___ ... so I really
> can't figure out why nothing happens when viewing the site in IE6.
>
> Thanks,
> Lars

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[Lars Löwenadler]

Thanks for the replies. I'm already familiar with the _ hack (at least in theory). Unfortunately I don't think it's sufficient in this case, I really want the .png transparency.

As much as I wanted to implement the IE alpha hack manually (i.e. no product), the product you suggest surely did the trick. It didn't know about EasyAsPiIE before. It works great, except that it messes up some CSS (in IE6 only). I should be able to fix that though. Anyway, IE6 transparency problem now resolved thanks to the product!

(Yes indeed, I also think it's time to leave IE6 behind, but I'm afraid some significant part of the users don't...)