unified tabs.. why won't it work?

[jk]

in my last thread "seperate styles in tiddlers", i was wondering
why some of my styles didn't take effect. eric said this was
because of "CSS Specificity" in which a more specific rule takes
precedence.

i have another problem that i thought that might apply to, but it
doesn't seem to be the case.

i really would like to know how to style the SideBarTabs
so that the tabs have a unified look with their contents
when selected. in a fresh tw, #eee is the defualt background
color of .tabContents. i tried to override the top-border of
.tabContents by applying a bottom-border of #eee to .tabSelected

when i open the tiddler, this works, but on within #sidebarTabs
itself, the #eee background color of .tabContents goes in
front of the bottom border, not behind. i think this is strange
because i specified the bottom-border last so it should cascade
and take precedence (the rules of specificity also don't seem to
apply here: the css rule in StyleSheetColors is simply
.tabContents-- no descendant selectors that make it more specific.
plus, i added

#sidebarTabs .newClass .tabSelected {
border-bottom: 2px solid #eee;
}

and no change) no matter how specific i am, the background
color of .tabContents takes precendence. however, this is only
in #sidebarTabs. like i said, if i open the tiddler, its o.k,
and i've also gotten this to work by putting the tabs in a
slider in #sidebarOptions.

so, what's causing this and what can i do make it work?

[Ken Girard]

Take a look at:
http://tiddlythemes.com/empties/TiddlySinister.html#StyleSheet
It should give you some ideas.

I often look over the various themes over at TiddlyThemes to figure
out what bit of CSS I need to tweak to make something work.

Ken Girard