[jira] Commented: (TAP5-876) Arrow icons used by Palette component should be converted to GIFs to look reasonable in IE

["Richard Cross (JIRA)" <ji...@apache.org>]

    [ https://issues.apache.org/jira/browse/TAP5-876?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=12800178#action_12800178 ] 

Richard Cross commented on TAP5-876:
------------------------------------

Not sure exactly what you mean, unless you're referring to the way the disabled arrows are rendered in IE8.  The problem is in this part of default.css

DIV.t-palette-controls BUTTON[disabled] IMG {
    filter: alpha(opacity = 25);
    -moz-opacity: .25;
}

An explanation (and demonstration) can be found here: http://www.quirksmode.org/css/opacity.html and here: http://www.itnewb.com/v/Cross-Browser-CSS-Opacity-and-the-JavaScript-Fade-Fading-Effect

In theory, we should change this to:

DIV.t-palette-controls BUTTON[disabled] IMG {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
    filter: alpha(opacity = 25);
    opacity: .25;
}

Firefox 3.5 no longer supports -moz-opacity, it uses just "opacity".  In fact, replacing this setting allows for transparent icons in both Firefox 3.5,  Safari 4 and dozens of other web browsers.

I could not get the -ms-filter part to work, even though a separate test of a web page using this in the stylesheet (the QuirksMode link above) works for me in IE8.  Is there something else going on under the hood of Tapestry that prevents this style from being applied?

In the end, the only way I could get rid of ugly arrow icons in IE8 was with:

DIV.t-palette-controls BUTTON[disabled] IMG {
}

Unfortunately, this latter solution is the I'll have to go with in order to get a commercial product out of the door (deadline is a couple of days' time!), but maybe someone could look into getting the former solution working?

> Arrow icons used by Palette component should be converted to GIFs to look reasonable in IE
> ------------------------------------------------------------------------------------------
>
>                 Key: TAP5-876
>                 URL: https://issues.apache.org/jira/browse/TAP5-876
>             Project: Tapestry 5
>          Issue Type: Bug
>          Components: tapestry-core
>            Reporter: Howard M. Lewis Ship
>            Priority: Minor
>
> Hate to compromise on this (PNG is the way to go) but they just look awful in IE.

-- 
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.