Discuss: Sliding Doors of CSS, Part II
by Douglas Bowman
- Editorial Comments
2 Very nice :)
A great technique – I’m sure we’ll see it in use in the future :)
posted at 10:47 am on October 30, 2003 by David
3 Oh man...
If only I had seen this series of articles before my last submission to Dave’s Garden…
Thanks for sharing :)
posted at 11:31 am on October 30, 2003 by Ray
4 Nice push...
…to what CSS has to offer, Doug! Not to mention great work on the graphics for the article, Outstanding stuff.
It would be neat to work in something like Kalsey’s Tabs, with the secondary tabs built in as nested lists…Hmm…
posted at 11:58 am on October 30, 2003 by Mike
5 How about strong for selection purposes?
This has been a great read, definitely a useful tutorial on advanced tab navigation. One thing I’m wondering about is the use of classes/ids to identify the current navigation section. Instead of
<li id=“tab1”>[url=“tab1.html”]<span>Current Tab</span>[/url]</li>
it seems like it would be helpful to provide some highlighting for the stylistically challenged:
<li>[strong][url=“tab1.html”]<span>Current Tab</span>[/url][/strong]</li>
Thoughts? Comments?
posted at 12:08 pm on October 30, 2003 by Michael Landis
6 Re: How about strong...
Michael: It would certainly be possible to insert <strong> in addition to (or in place of) the anchor. This is something I do for the current navigation on Stopdesign. It seems appropriate to emphasize the current tab text with <strong>, especially for cases where users see an unstyled (or stripped down) version in a text-only browser, or a screen reader which might pronounce emhphasized text differently. It would just mean adding a few additional selectors to the style sheet to “conditionalize” a little differently.
Because some of the styling is applied to the list item, I think you’d still need to have some additional way of identifying the “current” list item, whether that be through the original id=“current” method from Part I, or the alternative method from Part II. If all the styles are moved inward one element (as in Example 8a) you could get away without using any IDs.
posted at 01:05 pm on October 30, 2003 by Douglas Bowman
7 Still doesn't work in IE 6/win
The tab still disappears on mouseover with IE 6, in-fact it’s a bit worse now. Sometimes the original tab image doesn’t reappear and your left with nothing but text.
My settings are on “auto” like the article says.
posted at 01:49 pm on October 30, 2003 by Mark Shiel
8 Re: Still doesn't work in IE6/win
In our tests here in IE6/Win it works exactly as described in the article.
Not that that helps you or eases your pain. Perhaps another preference setting is to blame.
Browsers! Can’t live with ‘em, can’t live without ‘em.
posted at 02:57 pm on October 30, 2003 by apartness
9 IE 6/XP Flicker
All of your examples seem to be flickerless on IE6/Win98SE, but on my (home) IE6/XP computer, they flicker with any cache setting. I’m using IE 6 XP (“Gold”) with SP1. The exact version is 6.0.2800.1106.xpsp2.030422-1633. It has all the updates I’ve found applied to it. Is this a flaw in your method, or an obscure bug that has only ever happened to me?
posted at 03:29 pm on October 30, 2003 by Rajeev Sharma
10 great stuff!
This is some really beautiful stuff. I was really impressed with the first, and honestly didn’t see how it could get much better, but you definitely proved me wrong.
posted at 09:01 pm on October 30, 2003 by Andy Triboletti
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)






1 Fantastic
A fantastic article, and it caters for all levels of hacks.
Some people don’t want to add muck mark-up, others don’t mind a little.
I bow down to this ground-breaking CSS expert!!
posted at 09:27 am on October 30, 2003 by Michael Ward