Comments on: Simple CSS Hover Tab Thingy

By: Kids Wall Art

Kids Wall Art — Sun, 08 Mar 2009 01:31:28 +0000

Nice “thingy,” and @chad I’ve been looking for a tool that tests in all of the IEs. Thanks!

By: Chad

Chad — Tue, 03 Mar 2009 14:50:47 +0000

This brings about a good point that I am always bitched at about by my clients. IE6 interoperability. I use a Mac, I code in Coda (flame away if you will) and use MAMP for testing. I recently completed a design for a site and had tested it in Safari, FF2 & 3 IE7 and Opera (even thought it’s only about 2%) and the client screamed at me because one of their biggest customers (roots) uses IE6 still. WTF uses IE6 still!? Jesus. Anyways. Long story short, I found a program called IETester that you can download from Softpedia, to do ie5.5 ie6, ie7 and ie8 beta testing all in one. It’s decent but only on windows of course; so fire up VMware or Parallels and test away!

By: Dan Rubin

Dan Rubin — Fri, 22 Aug 2008 08:44:02 +0000

@lk: no worries, I just have to poke a little fun at those kinds of comments every so often ;)

The main point is that *I* was in a hurry when I coded it up, so thanks for pointing out that it needed fixing. It’s much more useful now that it works in the IEs :)

By: lk

lk — Thu, 21 Aug 2008 23:09:01 +0000

Good job. Didn’t mean to be rude with my terse comment… was just in a hurry I guess.

By: Dan Rubin

Dan Rubin — Thu, 21 Aug 2008 08:20:01 +0000

I’ve updated the post and demo with corrected CSS, so everything now works in IE6/7.

The problem was two-fold: I had neglected to set the list items to float:left;, which IE6/7 both require in order to get the tabs to line up.

That fixed the positioning in the IE duo, but then a strange thing happened: IE6 wasn’t reverting the img elements to their default invisible state of display:none, so once you hovered over a tab, its image stayed put (meaning if you hovered over all the tabs, the 3rd and top-most image would stay visible permanently). While this is obviously a bug in IE6, I didn’t think it warranted either an IE6 stylesheet or an inline hack, so I found another way. That way was using a negative left margin as the default positioning, and then just setting the margin to zero on hover.

The new method works in your standard compliment of browsers (see the update at the very top of the post), so go forth and be fruitful.

By: Pages tagged "simple"

Pages tagged "simple" — Wed, 20 Aug 2008 23:33:23 +0000

[…] bookmarks tagged simple Simple CSS Hover Tab Thingy saved by 4 others lashedtv bookmarked on 08/20/08 | […]

By: Dan Rubin

Dan Rubin — Wed, 20 Aug 2008 16:17:33 +0000

@Nick: I threw this together quickly, and didn’t feel like launching VMWare at the time, so thanks for the note - then again, none of us are really surprised at anything not working in IE6 anymore, are we? ;)

@lk: Thanks so much for your insightful comment.

I’ll fire up XP and take a look at what needs to be tweaked for at least IE7, and maybe IE6 while I’m at it. Wouldn’t want to leave the high percentages out in the cold :)

By: lk

lk — Wed, 20 Aug 2008 16:03:09 +0000

Broken in IE7

By: Nick

Nick — Wed, 20 Aug 2008 16:02:39 +0000

Nice! Floated anchors do not align correctly in IE6. I did not test IE7, but it looks fine in FF3 so I figure its bound to be close. None the less good job

By: Dan Rubin

Dan Rubin — Tue, 19 Aug 2008 21:12:08 +0000

@Lea: :)

@Bridget: Oooo, raising the bar…