myfaces-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Carsten Pieper <carsten.pie...@continentale.de>
Subject Re: [Trinidad] Skinning - can't get browser hacks working...
Date Mon, 11 Feb 2008 13:42:13 GMT

And again...

Browser hacks don't help with skinning icons! Which isn't too surprising
when
you consider how icon skinning things are treated...

For example I have the following:

/* This looks fine in IE6 but not in FF2. In FF2 "margin-top: -12px" would
    have been appropriate. Note: @agent doesn't work for icons... */
af|inputDate::launch-icon {
	content: url(/css/images/dateInput.gif);
	margin-top: -3px;
	margin-left: -9px;
}

Those settings don't end up in the generated .css files but in the rendered
pages  source code :

/jsf-prototype/css/images/dateInput.gif 

Thus, whatever browser hack you might try (e.g. "* html
af|inputDate::launch-icon ...)
- and which well makes it to the generated .css - is overwritten by the
img's 
style-attribute :-(

Has anyone have any clue how to skin icons for different browsers currently?

Thanks, Carsten



Carsten Pieper wrote:
> 
> Myself back again,
> 
> some new knowledge on the topic:
> 
> I tested the browser hacks on a global selector (.AFDefaultFont:alias).
> For
> those, the hacks didn't work as I reported in my first posting.
> 
> I jsut noticed today, that on "normal" selectors, they're working fine.
> Example:
> 
> * html af|panelHeader::level-one {
> 	color: magenta;
> }
> 
> Et voilĂ , a magenta colored heading text appears in IE6.
> 
> Further investigation showed, that the appearance of the ":alias" 
> pseudo-class breaks the browser hacks. It's not only a problem of those
> global selectors (see
> http://myfaces.apache.org/trinidad/skin-selectors.html#Global%20Selectors)
> but of one's own :alias stuff as well...
> 
> The bottom line is, that those browser hacks have to be introduced on
> "feature level". 
> 
> A question to the experts: Has this been done purposely or unconsciously?
> Should this
> behaviour be changed? Or do you feel it shouldn't be touched as browser
> hacks won't be
> needed anymore once http://issues.apache.org/jira/browse/TRINIDAD-495
> (@platform 
> support for skinning icons) and
> http://issues.apache.org/jira/browse/TRINIDAD-799 
> (Add agent version support in skinning) are resolved?
> 
> Thanks, Carsten
> 
> 
> Carsten Pieper wrote:
>> 
>> Hi,
>> 
>> in some cases the nice @agent feature can't help your skinning efforts
>> for
>> different browsers, for example if you want to 
>> differentiate between different versions of Internet Explorer (see this
>> thread:
>> http://www.nabble.com/Skinning-for-specific-%40agent-_versions_---to13572999.html)

>> or if you want to skin icons (see
>> http://myfaces.apache.org/trinidad/devguide/skinning.html, 
>> section Skinning CSS features).
>> 
>> In these cases, I planned to fall back on those nasty browser hacks but
>> they seem to
>> be ignored by the Trinidad skinning (I'm on Trinidad 1.0.5), i.e. I can't
>> see any
>> effects (neither in the rendered pages nor in the generated CSS). 
>> 
>> I tried the "star html hack" (to include CSS in IE <= 6)
>>     * html .mySelector {...}
>> 
>>  as well as the "negation pseudo class hack" (to exclude CSS from IE)
>>      html:not([dummy]) .mySelector {...}
>> 
>> In the above mentioned forum thread Sven gave an example for  
>> star html hack usage in a Trinidad style sheet 
>> (http://www.nabble.com/Skinning-for-specific-%40agent-_versions_---to13572999.html#a13590541).
>> I tried the CSS snippet given there, too, but to no avail...
>> 
>> To give another simple example. Assume that I might want my default font
>> size to
>> be bigger in IE (no, I don't really want that, just to keep the example 
>> simple; in reality I want to skin icons...)
>> 
>> /* general setting */
>> .AFDefaultFont:alias {font-size: 12px;}
>> 
>> /* make it bigger for IE */
>> @agent ie {
>> 	.AFDefaultFont:alias {font-size: 15px;}
>> }
>> 
>> This works fine, as described in the Developer's Guide. However, if I 
>> replace the @agent with the star html hack I see no effects:
>> 
>> /* the star html hack, doesn't work for me here */
>> * html .AFDefaultFont:alias {
>>         font-size: 15px;
>> }
>> 
>> Do you have any ideas? Any hint appreciated!
>> 
>> Thanks, Carsten
>> 
>> 
>> 
> 
> 

-- 
View this message in context: http://www.nabble.com/-Trinidad--Skinning---can%27t--get-browser-hacks-working...-tp15352483p15411703.html
Sent from the MyFaces - Users mailing list archive at Nabble.com.


Mime
View raw message