Update: The original edit of this post and demo file didn’t work in IE6/7. See the comments for my quick explanation of the fix (the demo now works in FF2/3, Safari 2/3, Opera 9, and IE6/7).
After throwing together a quick little hover/tab widget for my previous article, I thought I’d share how it was made, in case you find a need for it someday.
Bulletproof lists
The widget in question is just a simple unordered list, with each list item containing an anchor and an image—we want the images in this case because I want them to display in my RSS feed and for anyone who can’t (or chooses not to) view the styled version of this site.
Note: Feel free to reference images in the stylesheet rather than inline if that suits your purposes.
See the widget in use in my previous article, or check out this demo.
The code
First, the markup (with URLs truncated to save trees):
Simple, uncluttered, uncomplicated.
Next, the CSS:
ul#hover-tab-thingy {
position:relative;
padding:0;
width:500px;
height:498px; }
#hover-tab-thingy li {
float:left;
list-style:none; }
#hover-tab-thingy li a {
float:left;
padding:9px 21px;
background-color:#eee;
color:#999;
font-size:9px;
text-align:center;
text-transform:uppercase;
border-right:1px solid #fff; }
#hover-tab-thingy li a:hover {
background-color:#f60;
color:#fff; }
li#one a,
li#one a:hover {
background-color:#e5e5e5;
color:#555; }
#hover-tab-thingy li a img {
position:absolute;
left:0;
top:30px;
width:500px;
height:460px;
clear:left;
margin-left:-9999px;
padding:1px;
border:3px solid #e5e5e5; }
li#one a img,
#hover-tab-thingy li a:hover img {
margin-left:0; }
li#two a:hover img,
li#three a:hover img {
border-color:#f60; }
This is all fairly straightforward, so here are the highlights that may help when duplicating this on your own:
- The entire idea is that you have tabs that are each associated with content (images in this case) which are made visible when the user hovers over the tab. There are more things you could do with this, but that’s your job, grasshopper.
- The tabs are floated; the content elements (
imgin this case) clear the floats. - The content elements are set to
position:absolute, so they can appear in the same location for each tab. To accomplish this, theulis set toposition:relative(in short: an absolutely positioned element will be positioned relative to its nearest positioned ancestor—see Doug Bowman’s great write up for more), and it’s probably a good idea if the dimensions of yourul(the container for your content) have a lot in common with those of your content elements. - IE6 has a problem reverting elements that set
display:blockon:hoverto their original state (e.g.display:none). To counter this, use a negative left margin as the default positioning, and then setmargin-left:0;on the hover state, which works in all modern browsers. - The
widthandheightis specific to my example (the dimensions of the images I used), ditto for thepaddingon the tabs and thetoppositioning on theimgelements (to push them below the tabs). Bend them to your will.
Wrap-up
This may be something that you’ll find use for on a regular basis—one of those tiny snippets of reusable “stuff” that you’ll be glad you don’t have to type every time.
Comments
15 responses to “Simple CSS Hover Tab”
I can’t believe you would ruin The Departed like that without warnings of a spoiler.
@Dan: I can’t believe I haven’t customized the colors of the code sample formatting plugin I just installed. You can’t tell me a spoiler is worse than that pink…
The title “The Departed” pretty much said it all.
You mean, everyone dies except Marky Mark.
Now THAT’S a spoiler.
@Lea: :)
@Bridget: Oooo, raising the bar…
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
Broken in IE7
@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 :)
[…] bookmarks tagged simple Simple CSS Hover Tab Thingy saved by 4 others lashedtv bookmarked on 08/20/08 | […]
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
imgelements to their default invisible state ofdisplay: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.
Good job. Didn’t mean to be rude with my terse comment… was just in a hurry I guess.
@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 :)
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!
Nice “thingy,” and @chad I’ve been looking for a tool that tests in all of the IEs. Thanks!
[…] Simple CSS Hover Tab Thingy http://superfluousbanter.org/archives/2008/08/simple-css-hover-tab-thingy/ […]