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 <[email protected]> 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
>
