FAQ
Hi everyone,

I try to style the following part of content:

<table cellpadding="0" cellspacing="0" border="0" style="display: inline;" class="af_navigationPane_bar-inactive-disabled">
<tbody>
<tr>
<td><div class="af_navigationPane_bar-content">Benutzerprofil</div></td>


The CSS definitions are the following:

af|navigationPane::bar-content { color: #c7c9d5; font-weight: bold; }


However the content is not formated and I don´t understand why. Can someone help me? The generated CSS output is the following.


/* Rule 271 of /backoffice/portal/adf/styles/cache/adb-desktop-5n9c7d-ie-6.css */
.af_navigationPane_bar-inactive-disabled .af_navigationPane_bar-content { COLOR: gray }

/* Rule 282 of /backoffice/portal/adf/styles/cache/adb-desktop-5n9c7d-ie-6.css */
.af_navigationPane_bar-content { FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 3px; COLOR: #c7c9d5; PADDING-TOP: 3px; FONT-FAMILY: Verdana }

.af_navigationPane_bar-inactive-disabled { FONT-WEIGHT: bold; CURSOR: default; COLOR: #c7c9d5}

Best Regards, Jan

Search Discussions

  • Matt Cooper at Mar 18, 2009 at 4:30 pm
    Hi Jan,

    In CSS, the selectors are ranked such that the most specific style will take
    precidence over a lesser-specific style. It isn't just the order in which
    the selectors appear in the CSS file (that only counts if the selectors have
    equal specificity). There are many different factors that go in to
    producing a selector's specificity value and you can read more about them
    over at the W3C's CSS spec here:
    http://www.w3.org/TR/CSS2/cascade.html#specificity

    With your selector, you have:

    a.) af|navigationPane::bar-content { color: #c7c8d5; font-weight: bold; }

    but there's another selector that has a higher specificity:

    b.) af|navigationPane::bar-inactive-disabled af|navigationPane::bar-content
    { color: gray; }

    If you inspect the bar-content element in Firefox using the Firebug
    extension <http://getfirebug.com/>, you will probably see both color
    settings listed in the style panel however, the color #c7c8d5 has a line
    striking through it and the color: gray doesn't have a line striking through
    it. This is because the gray color is winning with a higher specificity.

    The first thing that I would try would be to match the same specificty
    weight by making sure that your selector has the same leading text that is
    appearing in the selector that is winning over yours like this:

    c.) af|navigationPane::bar-inactive-disabled af|navigationPane::bar-content
    { color: #c7c9d5; }

    If this still happens to weigh less (e.g. because it appears above the "b"
    definition in the CSS file) then you could try to boost the specificity even
    more, e.g. something like this:

    d.) af|navigationPane::bar af|navigationPane::bar-inactive-disabled
    af|navigationPane::bar-content { color: #c7c9d5; }

    Note that you may want your color to appear in bars that are not just
    inactive and disabled. Let's say that you found "c" to be sufficient for
    inactive and disabled bar content. You may also need to keep your original
    selector for non-disabled and for active items. To do that, you can form
    the definition like this by comma-separating the selectors:

    af|navigationPane::bar-content,
    af|navigationPane::bar-inactive-disabled af|navigationPane::bar-content {
    color: #c7c9d5;
    font-weight: bold;
    }

    Regards,
    Matt
    On Wed, Mar 18, 2009 at 6:37 AM, Zmitko, Jan wrote:

    Hi everyone,

    I try to style the following part of content:

    <table cellpadding="0" cellspacing="0" border="0" style="display: inline;"
    class="af_navigationPane_bar-inactive-disabled">
    <tbody>
    <tr>
    <td><div class="af_navigationPane_bar-content">Benutzerprofil</div></td>


    The CSS definitions are the following:

    af|navigationPane::bar-content { color: #c7c9d5; font-weight: bold; }


    However the content is not formated and I don´t understand why. Can someone
    help me? The generated CSS output is the following.


    /* Rule 271 of
    /backoffice/portal/adf/styles/cache/adb-desktop-5n9c7d-ie-6.css */
    .af_navigationPane_bar-inactive-disabled .af_navigationPane_bar-content {
    COLOR: gray }

    /* Rule 282 of
    /backoffice/portal/adf/styles/cache/adb-desktop-5n9c7d-ie-6.css */
    .af_navigationPane_bar-content { FONT-WEIGHT: bold; FONT-SIZE: 12px;
    PADDING-BOTTOM: 3px; COLOR: #c7c9d5; PADDING-TOP: 3px; FONT-FAMILY:
    Verdana }

    .af_navigationPane_bar-inactive-disabled { FONT-WEIGHT: bold; CURSOR:
    default; COLOR: #c7c9d5}

    Best Regards, Jan

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
groupusers @
categoriesmyfaces
postedMar 18, '09 at 12:38p
activeMar 18, '09 at 4:30p
posts2
users2
websitemyfaces.apache.org

2 users in discussion

Zmitko, Jan: 1 post Matt Cooper: 1 post

People

Translate

site design / logo © 2019 Grokbase