I suggest Arian's approach. Don't pad the li, pad the A.
On May 1, 2011 12:53 PM, "Arian Stolwijk" <[email protected]> wrote:
> what do you think of:
>
> a {
> display: block;
> padding: 5px;
> }
>
>
> On Sun, May 1, 2011 at 9:45 PM, Rolf -nl <[email protected]> wrote:
>
>> Not really a Moo specific question but just something I've been
>> wondering lately..
>> Often you have navigation elements in some <ul> element with <li>'s
>> and <a> elements in it.
>> Sometimes (eg. for visual/layout/cross browser requirements) it's
>> necessary to use padding in the <li> elements or something. In any
>> case, the complete parent <li> is not the clickable area and what
>> happens is that the user explicitly has to click the <a>/text for the
>> 'button' to work.
>>
>> When applying some javascript/moo magic I can grab all needed <a>
>> elements, get the href and do whatever (eg. use xhr with history).
>> Regarding the buttons I then tend to add the click event to a parent
>> <li> element, because it gives a better experience to the user.
>> I kind of automatically check for a parent <li> element grouped by a
>> <nav> element to "know" it's indeed a button in some navigation block
>> (without the need for an extra css class) when scanning a whole page
>> to apply some stuff.
>>
>> Does this sound familiar or is it just me?
>>
>> My question? ... :) ... Any tips or "this is how I do this" stories? I
>> don't have a button example ready to demonstrate this... but will add
>> one tomorrow when I'm at the office.
>>
>> Cheers
>> Rolf
>>
>> /end #rant
