Advanced CSS Accordion Effect

Published December 17, 2008 by saurav.roy.

css accordion technique

A while back, I wrote an article demonstrating how the popular “accordion” effect (as in the image above) could be replicated with nothing more than CSS. There was one caveat, however: the technique didn’t work in Internet Explorer 6 due to the browser’s extremely limited support of the :hover pseudo-element.

Now, IE6’s market share is decreasing day by day – and we’re all undoubtedly thankful. But the browser will continue to maintain a healthy market share for quite some time to come. To that end, I’d like to revisit the CSS accordion technique and make a modification or two that will let it work with IE6.

I’m going to admit up front: these modifications require JavaScript. So what’s the point of having a “CSS” accordion technique that uses JavaScript? Well, all those other accordion techniques out there require JavaScript, and almost all require an entire JavaScript framework. This technique is merely improved by JavaScript – all modern browsers will handle this technique just fine even without JS enabled. Read On…

Internet Explorer Bug Fix: Disappearing Positioned Anchors

Published November 19, 2008 by saurav.roy.

A while back when I was working on developing the jQuery popout tutorials, I ran across a significant and annoying bug in Internet Explorer 6 and 7. Specifically, Internet Explorer does not respect the height and width properties of block-level, absolutely positioned anchor tags if they contain no content (or if that content has been moved or removed).

Instead of your anchors being the size you’ve specified, the size of the clickable area is limited to the size of the content inside the anchor. And therefore, if your anchor is “empty” (either because it’s an empty anchor tag, or you’ve used “display: none” or a negative margin to hide the content), your anchor tag’s clickable area is zero!

Let me explain a bit of what I mean. Let’s say I have a website with a very stylized banner at the top of the page, and I’ve decided to load the banner as a background image. However, in order to play nice with search engines and keep my SEO high, I’m still going to use an <h1> tag for my banner text, and then just hide its content. I also want a portion of my banner to be clickable, so I can let users get back to my homepage that way. Read On…