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:
>  
>
>><http://www.kronto.org/test/>.
>>... 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 
<http://home.tiscali.nl/developerscorner/css-discuss/button-focus-a.htm>.

Better than a background color when hovering/tabbing can be a changing 
button-image (txt-underline was already toggled).
See second testpage 
<http://home.tiscali.nl/developerscorner/css-discuss/button-focus-b.htm>.

(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 !!!)

Greetings,
francky


______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
Previous Message
Next Message

Message thread: