Previous Message
Next Message

CSS-bulleted lists with large icons

Sent by francky on 15 March 2006 03:03

Ingo Chao wrote:

>Leo Breebaart wrote:
>>... 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).
>Since the box of the A has a specified offset to the box of the LI, I 
>think you could place another background-image on a:focus, matching the 
>background-image of the LI
>#main ul li a:focus {
>   background: #eee url('blank-button.gif') no-repeat 0 -6px;
>   text-decoration: none;
>   }
>Works for me in Fx.
Hi all,
Giving the <a>, a:hover and a:focus more padding enables to click on the 
whole button (FF and IE). Then:

    * In Firefox you see the dotted focus-line around the new defined
      padding: a rather big grey-backgrounded rectangle (going across
      the text under the text-link).
    * In IE you see the dotted focus-line smaller: only on the line of
      the <a> (as it was). Perhaps with fine-tuning this can be solved...
    * In both: the background-color #eee (light grey) is showing in the
      whole area when hovering or tabbing > but hiding the button.

See first testpage 

Better than a background color when hovering/tabbing can be a changing 
button-image (txt-underline was already toggled).
See second testpage 

(still IE needs some fine tuning)
(seems FF did not allow the short color notation ?)
(a combined image for the two buttons - - shifting background-position - 
- can avoid a flash when toggling)
(remark the white circle flash in the grey area of the button when 
tabbing: optical illusion "negative after-image" -- don't know the 
English term for it)
(btw: big difference FFand IE in the default sans-serif and serif fonts !!!)


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

Message thread: