Previous Message
Next Message

CSS-bulleted lists with large icons

Sent by Leo Breebaart on 14 March 2006 22:10

Hi all,

I have a CSS problem I am hoping to find some advice on. I have
put up a minimal version that illustrates the issue at

What I want is fairly common-place, I think: have an index page
consisting of a list of multi-line items, each with a clickable
icon in front of it.

The catch is that I'd like to specify the icons in CSS, along the
lines of Dan Cederholm's "Clickable Link Backgrounds" article
It almost works, too -- but so close, yet so far...

The problem becomes apparent if you try to focus-cycle through
the links on the page by hitting the tab key. Not only does this
look ugly as sin, but more importantly: only part of the icon is
clickable. Dan's technique only works if the icon is not much
taller than a single line of text (and if you don't change the
background colour on :hover or :active).

So, back to the drawing board. My question: is there something
not too horribly hackish I am missing that would allow me to
achieve CSS-icons after all? And if not, what would you recommend
as the best way of implementing this layout? I have experimented
a bit, but cannot seem to find a way to achieve a similar look
using just lists. A table-based layout will work, I suppose, but
it just really annoys me that I can't find a list-based solution
(even if I abandon the icons-in-CSS requirement) for this surely
very simple scenario.

It'd be wonderful if somebody reading this could point me towards
a solution.

Many thanks in advance,

Leo Breebaart  [EMAIL-REMOVED]>
css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: