tabbedPane custom style.

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

tabbedPane custom style.

ced_the.bear
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
Reply | Threaded
Open this post in threaded view
|

Re: tabbedPane custom style.

Alexander 'Alfe' Fetke
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
[hidden email]
www.xtradyne.com | www.prismtech.com

* XTRADYNE Security Infrastructure - a PRISMTECH Product Line *
Reply | Threaded
Open this post in threaded view
|

Re: tabbedPane custom style.

Dave Harrison
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.

Reply | Threaded
Open this post in threaded view
|

Re: tabbedPane custom style.

Alexander 'Alfe' Fetke-2
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
[hidden email]
www.xtradyne.com | www.prismtech.com

* XTRADYNE Security Infrastructure - a PRISMTECH Product Line *
Reply | Threaded
Open this post in threaded view
|

Re: tabbedPane custom style.

Dave Harrison
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.