[thelist] Styling in-line elements

Jack Timmons jorachim at gmail.com
Tue Mar 17 15:32:21 CDT 2009

On Tue, Mar 17, 2009 at 3:11 PM, Lee Kowalkowski <
lee.kowalkowski at googlemail.com> wrote:

> This is not something I have a problem with at all.  I think I'm
> inclined to agree with your team, because it does sound like those
> extra DIV elements are only there for their presentational default,
> i.e., presentational markup.  But it could be argued that those extra
> elements allow greater flexibility when styling, because you create
> more options.  This may work to your advantage if you later want to
> redesign your site.

That would benefit, but chances are if we're going through a redesign, we'll
be farting around with the markup, too, although we have done as much as we
can in the way of separation.

> I've no idea how you're laying out forms, but the usual ways
> (http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
> )
> are perfectly do-able with just a label element followed by its input
> element.  I usually end up wrapping all field elements in a <div
> class="field">, along with other related elements like an error
> message placeholder, help icon, formatting hint, date-picker launcher,
> etc.

Thank you for the reference, I quickly went over it and I like the results.
I'll definitely bring it up during our next meeting regarding the website,
and get some feedback (and how we'll implement the label-on-top in our

> It's also commonplace to style links in menus as blocks to maximise
> their clickable region.

I had forgotten about this example...

> It's also common to style unordered lists items as inline, for
> breadcrumb trails, pagination controls, footer links, etc.

And this one, too...

So, the ultimate answer is it's just me getting into a quirky mood regarding
something, and I've sufficiently been grounded regarding the debate.

On a side note, though, regarding my previous example of using labels in the
midst of paragraph elements, what are your thoughts?

You see, we're trying to develop these forms so they hold the user's hand as
much as possible (that's what has been requested), so often there's a nice
explanation before an input element. Perhaps it would be best to both have
the explanation and then a separate label....you know what, that actually
would be better.

-Jack Timmons
Twitter: @codeacula

More information about the thelist mailing list