Discuss: Sliding Doors of CSS, Part II

by Douglas Bowman

21 Previous post obsolete

Sorry, didn’t realize that only example 8a has the additional spans.

posted at 06:15 am on October 31, 2003 by std

Wow, I guess we’ve found a really wierd bug in IE6/XP. I tried it with another browser of the exact same version (6.0.2800.1106.xpsp2.030422-1633), and the flicker did not occur. The browser’s cache setting is set to “Automatically”. Maybe it has something to do with a plugin. I’ll test it later when I get home. Here’s a list of my plugins:
-Google Searchbar (the newest one)
-Download Accelerator Plus (toolbar not showing)
-Yahoo! Companion (newest version)
-Some XML/XSLT extension I downloaded of the net

For other people with the flicker, what plugins do you have?

posted at 08:21 am on October 31, 2003 by Rajeev Sharma

23 Flicker problem may also be a server problem for I

Great follow-up article, can’t wait until I see someone like amazon use these techniques.
Anyway, I was working on a site (http://www.axonodesign.com/) using pixy’s rollover effect and had the flicker problem still occur after changing my settings in IE6. The problem however was on the Apache server I was using still causing it to flicker. What I did was for Apache servers 1.3.6 and later. I use these lines in the into the httpd.conf or .htaccess file. to disable Vary headers
for the IE browser

BrowserMatch “MSIE” brokenvary=1
BrowserMatch “Mozilla/4.[0-9]{2}” brokenvary=1
BrowserMatch “Opera” !brokenvary
SetEnvIf brokenvary 1 force-no-vary

It worked after that with no flicker.

posted at 09:03 am on October 31, 2003 by Blakems

24 Re: Flicker problem may also be a server problem f

Blakems said: “can’t wait until I see someone like amazon use these techniques”

I think someone else will renew it’s tab method first
;-)

btw, outstanding article: thanks to the ALA staff!

posted at 11:03 am on October 31, 2003 by Emilio Vanni

25 Current State

Awesome article, Doug.

I just wanted to note a variation on the current state that may be useful to some.

Here, since we regularly use includes for our navs (for consistency) it isn’t possible to just class an <li> as current… each page would need it’s own nav.

To get around this, we class the <body> of each page instead, then reference the different styles thusly…

body.home ul.nav{
}

body.aboutus ul.nav{
}

Works like a charm, and only requires one markup of the list.

posted at 11:54 am on October 31, 2003 by Jay Jones (JabezStone)

26 There should be no spaces around the child selecto

If there are any spaces around the child selector, IE5.0 (Windows) will apply the style rule, so:

li > a{color:green;} /* green in IE5.0 */
li>a{color:green;} /* default in IE5.0 */

For the rest, great article!

posted at 12:06 pm on October 31, 2003 by Anne

27 Apple Tabs

Oh, I forgot, we will see this method used on apple.com first, before amazon. ;)

posted at 12:19 pm on October 31, 2003 by Blakems

28 RE: Flicker problem may also be a server problem f

I’ll try that on my Apache (real) server. However, for the IIS server running on my home machine, is there any way to to do this? Global.asa maybe?

posted at 01:32 pm on October 31, 2003 by Rajeev Sharma

29 Flicker fix not working!

Hmm… I uploaded to my test (friend’s) server, and the fix isn’t working. I put the exact thing you wrote in the .htaccess files for those directories. Maybe it’s just my machine. Please try these:
http://www.treespasm.com/rajeev/tabs/v1/ex10a.html
http://www.treespasm.com/rajeev/tabs/v2/v2.html
Does it work for other people?

posted at 01:52 pm on October 31, 2003 by Rajeev Sharma

30 Flicker problems etc

I’m using IE 6 on IE with all patches too. Matching the version numbers with those others with problems. Plugin wise i don’t have the same, mainly IE spell and flashget.

Tested on machine at work. WinME with IE 6 works fine, tested on our XP machine and it does not!

posted at 02:42 pm on October 31, 2003 by Mark Shiel