I always do like Arian. Display block and padding on the anchor. Never use JS when CSS has a solution.
On May 1, 2011, at 4:04 PM, Sean McArthur <[email protected]> wrote: > 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
