Monthly Archives: October 2006

Bowman’s Super Double-Hover List Menu Extended (to Triple-Hover)

I first saw a menu on www.fastcompany.com, and later learned that Doug Bowman had created this. It was a menu of faces, and what seemed to be a separate menu of names, and no matter which one you highlighted, a hover state appeared on both the name and the face, giving the user visual feedback on their selection. The magic was that it was all done with css, no javascript, and an unordered list.

I don’t know what Bowman called the menu – so I call it “Bowman’s super double-hover list menu”, and the html mark-up went something like this:

<div id="menu">
<ul>
	<li id="one"><a href="#"><em>item one</em></a></li>
	<li id="two"><a href="#"><em>item two</em></a></li>
	<li id="thr"><a href="#"><em>item threer</em></a></li>
	<li id="fou"><a href="#"><em>item four</em></a></li>
	...
</ul>
</div>

It was the inclusion of the <em> tag that made the magic possible.

I thought I would like to add to it. Let’s say instead of just a list of names and faces, what if there was a third element? Perhaps if I just added one more tag, like <strong>, I could include this third ‘list’ (not really a separate list, but the effect seems like it). I did, and it worked. Take a look at the example page to see what I’m talking about.

The html is below. Note the addition of <strong> tags.

<div id="menu">
<ul>
	<li id="aro"><a href="#"><em><strong>Alex Rodriguez</strong></em></a></li>
	<li id="vwe"><a href="#"><em><strong>Vernon Wells</strong></em></a></li>
	<li id="dje"><a href="#"><em><strong>Derek Jeter</strong></em></a></li>
	<li id="vgu"><a href="#"><em><strong>Vlad Guerrero</strong></em></a></li>
	<li id="kro"><a href="#"><em><strong>Kenny Rogers</strong></em></a></li>
	<li id="iro"><a href="#"><em><strong>Ivan Rodriguez</strong></em></a></li>
	<li id="mlo"><a href="#"><em><strong>Mark Loretta</strong></em></a></li>
	<li id="isu"><a href="#"><em><strong>Ichiro Suzuki</strong></em></a></li>
	<li id="dor"><a href="#"><em><strong>David Ortiz</strong></em></a></li>
</ul>
</div>

First I had to create on and off states for all the images:

Then it’s up to the CSS to only show half of the image at any given time. For instance, the images that contain the name are 200×70, and are set to show up in the <em> tag, with the top 35px being an ‘off’ state, and bottom 35px being on the ‘on’ state. We only want to show 35px at a time, not the whole image, so the height of this part is set to 35px.

#menu li a em {
	position:absolute;
	top:0;
	left:460px;
	display:block;
	padding:0;
	background:url("images/name_aro.gif") no-repeat 0 0;
	font: normal 1px/1px Arial,sans-serif;
	text-indent:-5000px;
	height: 35px;
	width: 200px;
	color:#ddd;
	white-space: nowrap;
}

Then for the :hover state, the other half of the image is shown by changing the background-position:

#menu li a:hover em {
    cursor:pointer;
    background-position:0 -35px;
}

Download the zipped example above and feel free to pick apart the css. If you have any questions – feel free to put them in the comments, or write askthecssguy@gmail.com.

Getting the Ultimate Setup for Designing HTML and CSS from Your Employer

I’m working from a MacBook Pro running OS X 10.4. Along with it, my company purchased Parallels and one copy of Windows XP. With Parallels on OS X, I can run a version of Windows XP that has Internet Explorer 6, as well as another version of Windows XP that has Internet Explorer 7 (though I can’t run both versions at the same time). Now, all from one workstation, I have the following browsers at my disposal for testing html and styles:

  • Safari (Mac)
  • Firefox 2.0 (Mac)
  • IE6 (Windows XP)
  • IE7 (Windows XP)
  • Firefox 2.0 (Windows XP)

I realize there are other free browsers I could download and test, but the ones mentioned above are the core set I’m coding for. Down the road, I can probably get my company to purchase a copy of Vista, and run it as a VM on parallels as well.

I was fortunate enough to have an employer that understood the business sense in getting me a MacBook Pro+Parallels+Windows XP as a workstation. In a huge corporation where nearly 99.99% of the staff are using standard issue dell laptops with Windows XP, and an IT group that doesn’t support anything else, I was very surprised to be granted my wish. It just goes to show how far a decent business case and a very understanding manager can take you.

If it helps anyone other designers out there, I wanted to post the letter to my boss that got me the “yes”. Note that it isn’t all that well-written, and it’s very simple.

I’d like to petition for a macbook pro. IE7 will be releasing soon for xp users, and I’m seeing some significant differences between IE7 and IE6 (ft home page for small biz and corp biz are prime examples of completely unreadable messed up layouts in ie7). IE is built so that you can have only one version of IE per operating system. With the new intel macs + parallels, there can be more than one version of windows (and therefore both ie6 and ie7) on the same system, not to mention having mac browsers at the ready. I realize you’ve requested these before and been told no, but if this at all helps the business case, I wanted to throw in my concerns.

That’s a very sincere concern, and true business case to make. I didn’t think I’d get a yes, but it sure didn’t hurt me to ask. Best of luck.


This post was ported from an old host/cms, so many comments were lost. Below are the comments that I found were most helpful regarding this post. Some links or attributions may not be working correctly.


The “one version of IE per operating system” is not quite true: http://browsers.evolt.org/?ie/32bit/standalone. Standalone versions of IE are indispensable when developing cross browser / version compatible sites.

You can use http://tredosoft.com/Multiple_IE to install multiple versions of IE.

Using Conditional Comments

When needing to serve styles to certain versions of Internet Explorer, use conditional comments. Multiple conditional comments can be used.

This following code shows possible usage, with a demo page as well:

<style type="text/css">
p {font:bold 12px/17px arial;}
p.colordependency {background:cyan;}
</style>

<!--[if IE]>
<style type="text/css">
p.hidefromIE {display:none;}
</style>
<![endif]-->

<!--[if IE 6]>
<style type="text/css">
p.hidefromIE6 {display:none;}
</style>
<![endif]-->

<!--[if lte IE 6]>
<style type="text/css">
p.colordependency {background:red;}
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
p.hidefromIE7 {display:none;}
p.colordependency {background:yellow;}
</style>
<![endif]-->