You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by "ced_the.bear" <ce...@caramail.com> on 2005/05/13 11:07:14 UTC
tabbedPane custom style.
Is there a mean to disable default style of tabbedPane tabs.
I refer to this html rendered :
<td style="border-top: 1px outset #CCCCCC; border-right: 1px outset #CCCCCC; border-bottom: 0px none; border-left: 1px outset #CCCCCC; text-align: center; background-color: #CCCCCC; ">
no specified styleClass for active, inactive Tabs overrun the style which is rendered.
If I specify style class I obtain :
<td style="border-top: 1px outset #CCCCCC; border-right: 1px outset #CCCCCC; border-bottom: 0px none; border-left: 1px outset #CCCCCC; text-align: center; background-color: #CCCCCC; " styleClass="myClass">
but the style is prior to the styleClass.
Any help would be appreciate.
Ced
Protek-on: CaraMail met en oeuvre un nouveau Concept de Sécurité Globale - www.caramail.com
Re: tabbedPane custom style.
Posted by Dave Harrison <da...@stacker.me.uk>.
Hi Alfe,
ced_the.bear wrote: Is there a mean to disable default style of
tabbedPane tabs.
Sorry, my bad. I didn't read the question. I was answering the question
"can I insist on my styles being used". Just no one asked it!
Dave.
Re: tabbedPane custom style.
Posted by Alexander 'Alfe' Fetke <al...@xtradyne.de>.
Hi ...
On Fri, 13 May 2005, Dave Harrison wrote:
> 'user "!important" rules override author"!important" rules.'
>
> Whether that's how it is in the real world is another thing... :-(
In fact (IIRC) there are _three_ style sheets involved. The first (lowest
in priority) is the built-in style sheet of the browser. Next comes the
author's style sheet, last and topmost in priority is the user's.
Each can override the higher priorised one(s) by using the
important-declaration, unless the higher priorised _also_ uses it.
The problem we encountered was that some browser's internal style sheet
seemed to have used the important-declaration already, so that only by
using it ourselves we could overrule the browser's. (It might also be
that the browser did not distinguish between its internal and the user's.
In any case, we consider it a misbehaviour of the browser.)
That's just what we think. We might be wrong. Working with old and buggy
browsers without knowing or considering it is standard for many people ;-)
and we have to deal with that fuzzy crap.
Alfe
Alexander Fetke
PrismTech (Germany) GmbH
Schoenhauser Allee 6-7, D-10119 Berlin, Germany
Phone: +49-30-440306-34
Fax: +49-30-440306-78
alexander.fetke@prismtech.com
www.xtradyne.com | www.prismtech.com
* XTRADYNE Security Infrastructure - a PRISMTECH Product Line *
Re: tabbedPane custom style.
Posted by Dave Harrison <da...@stacker.me.uk>.
Alexander 'Alfe' Fetke wrote:
>The "! important" is a way to tell the browser that this adjustment shall
>have priority over a builtin style sheet or similar. Depends on the
>browser whether it is necessary and/or successfull ;-) The given
>configuration works in all important cases we testet (exceptions like the
>not-so-important konqueror exist).
>From the CSS2.1 spec
(http://www.w3.org/TR/CSS21/cascade.html#important-rules):
However, for balance, an "!important" declaration (the delimiter token
"!" and keyword "important" follow the declaration) takes precedence over
a normal declaration. Both author and user style sheets may contain
"!important" declarations, and user "!important" rules override author
"!important" rules. This CSS feature improves accessibility
of documents by giving users with special requirements (large
fonts, color combinations, etc.) control over presentation.
The important bit being:
'user "!important" rules override author"!important" rules.'
Whether that's how it is in the real world is another thing... :-(
Dave.
Re: tabbedPane custom style.
Posted by Alexander 'Alfe' Fetke <al...@prismtech.com>.
Hi ...
On Fri, 13 May 2005, ced_the.bear wrote:
> Is there a mean to disable default style of tabbedPane tabs.
[...]
We are using the following:
bla.jsp:
<x:panelTabbedPane styleClass="tabbedPane"
activeTabStyleClass="activeTab"
inactiveTabStyleClass="inactiveTab"
disabledTabStyleClass="disabledTab"
activeSubStyleClass="activeSub"
inactiveSubStyleClass="inactiveSub"
tabContentStyleClass="tabContent">
Our used CSS layout class file contains the following:
table
{ border-collapse:collapse ! important;
border-spacing:0px ! important;
padding:0px ! important;
border-width:0px ! important;
empty-cells:show ! important; }
td
{ border-spacing:0px ! important;
padding:0px ! important;
border-width:0px ! important; }
th
{ font-weight:normal ! important;
font-size:80% ! important;
text-align:center ! important;
border:2px solid ! important;
border-color:black #ccc #ccc black ! important;
padding-top:0px ! important;
padding-left:5px ! important;
padding-right:5px ! important;
padding-bottom:0px ! important;
background:#d8d9d4 ! important;
white-space:nowrap ! important; }
table.tabbedPane
{ width:66ex ! important;
height:40ex ! important;
vertical-align:top ! important;
border-collapse:separate ! important;
border-spacing:0px ! important; }
td.activeTab
{ background-color:#e0e0ec ! important;
border-top:2px solid #fff ! important;
border-left:2px solid #fff ! important;
border-right:2px solid #aaacae ! important;
border-bottom:0px none ! important;
padding:2px ! important;
height:4ex ! important;
font-size:80% ! important;
horizontal-align:center ! important;
text-align:center ! important;
-moz-border-radius-topleft:20px ! important;
-moz-border-radius-topright:20px ! important; }
td.activeTab input
{ background-color:#e0e0ec ! important;
font-size:80% ! important;
horizontal-align:center ! important;
text-align:center ! important; }
td.inactiveTab
{ background-color:#c8c8d8 ! important;
border-top:2px solid #e3e5e7 ! important;
border-left:2px solid #ebecef ! important;
border-right:2px solid #8a8c8e ! important;
border-bottom:0px none ! important;
padding:2px ! important;
height:4ex ! important;
font-size:80% ! important;
horizontal-align:center ! important;
text-align:center ! important;
height:4ex ! important;
-moz-border-radius-topleft:20px ! important;
-moz-border-radius-topright:20px ! important; }
td.inactiveTab input
{ background-color:#c8c8d8 ! important;
font-size:80% ! important;
horizontal-align:center ! important;
text-align:center ! important; }
td.activeSub
{ background-color:#e0e0ec ! important;
padding:0px ! important;
border-left: 2px solid #fff ! important;
border-right: 2px solid #aaacae ! important; }
td.inactiveSub
{ background-color:#fff ! important;
padding:0px ! important; }
td.tabContent
{ background-color:#e0e0ec ! important;
border-top: 0px none ! important;
border-left: 2px solid #fff ! important;
border-right: 2px solid #aaacae ! important;
border-bottom: 2px solid #aaacae ! important;
vertical-align:top ! important;
padding:20px ! important;
height:100% ! important;
text-align:justify ! important; }
The "! important" is a way to tell the browser that this adjustment shall
have priority over a builtin style sheet or similar. Depends on the
browser whether it is necessary and/or successfull ;-) The given
configuration works in all important cases we testet (exceptions like the
not-so-important konqueror exist).
HTH,
Alfe
Alexander Fetke
PrismTech (Germany) GmbH
Schoenhauser Allee 6-7, D-10119 Berlin, Germany
Phone: +49-30-440306-34
Fax: +49-30-440306-78
alexander.fetke@prismtech.com
www.xtradyne.com | www.prismtech.com
* XTRADYNE Security Infrastructure - a PRISMTECH Product Line *