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
<http://www.kronto.org/test/>.
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
("http://www.simplebits.com/notebook/2004/07/18/clickable.html";).
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 PROTECTED]>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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/
