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
Many thanks in advance,
Leo Breebaart [EMAIL-REMOVED]>
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/