For my horizontal tab menu, I'm working on markup and css to produce an "active" tab effect. For various reasons, I need to use descendant selectors to trigger the "active" tab rather than add a special selector to the active tab (e.g., id="active"). But, using descendant selectors doesn't work unless I change the selector on an element that is not involved in tab activation. And when I *do* change the selector on the unrelated element, the tabs start misbehaving in Firefox. The details follow.
I have some test pages in which I've inserted a generic version of Eric Meyer's tabbed navbar. Here is the navbar markup (fyi, the tab_wrapper div is local and not part of Eric's tab markup): <div id="tab_wrapper" class="select_tab_1"> <div id="navcontainer"> <ul id="navlist"> <li id="tab_1" class="tab_1"><a href="#" id="active">Item one</a></li> <li id="tab_2" class="tab_2"><a href="#">Item two</a></li> <li id="tab_3" class="tab_3"><a href="#">Item three</a></li> <li id="tab_4" class="tab_4"><a href="#">Item four</a></li> <li id="tab_5" class="tab_5"><a href="#">Item five</a></li> </ul> </div> .... etc. etc. .... ==>Test page #1: using the default navbar and the id="active" approach. The active tab works: http://hul.harvard.edu/oisnew/support/docs-test-active.html The rule that controls active tab is: #navlist li a#active { background: white; border-bottom: 1px solid white; } This rule produces an active tab with a 1px white bottom border on the <a>, which obscures the default 1px black bottom border provided by the <ul>. ==>Test page #2: using descendant selectors instead. Active tab does NOT work: http://hul.harvard.edu/oisnew/support/docs-test-descendant-id.html The rule that controls active tab is: div.select_tab_1 .tab_1 a, div.select_tab_2 .tab_2 a, div.select_tab_3 .tab_3 a, div.select_tab_4 .tab_4 a, div.select_tab_5 .tab_5 a, div.select_tab_6 .tab_6 a, div.select_tab_7 .tab_7 a, div.select_tab_8 .tab_8 a, div.select_tab_9 .tab_9 a, div.select_tab_10 .tab_10 a { background: white; border-bottom: 1px solid white; } ==>Test page #3: uses same descendant selectors as #2. But I discovered thru tweaking that if the <ul> has a class selector instead of id, the active tab works. http://hul.harvard.edu/oisnew/support/docs-test-descendant-class.html However, in Firefox, this arrangement leads to a bug when screen text size increases. As size increases, the ul's height grows out of proportion with the li's and a's and as a result, the 1px black border on the ul is no longer hidden by the active tab's 1px white border. Can anyone help me understand why changing to a class selector on the ul allows the descendant selector to activate the tab? And why the Firefox behavior? FYI, the surrounding layout uses ems in many places to control size. I suspect the navbar ul is inheriting an ems setting from elsewhere in the css, but I haven't found the cause. I've used FF/Firebug and WebDeveloper, but haven't found the culprit. Thanks. --julie ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
