[theme-reviewers] Clearing Floats

[Rodrigo Galindez]

Alright, late to the game but since I believe this thread started
because of my last night reviews, I believe I need to clarify (before
I get executed by the gallows too :P)

First: Should we need to make these recommendations? I believe, if we
strive for each theme to have a minimum quality in order to be
submitted to the Free Themes Directory, yes we must. Think of them as
a set similar to the CSS Coding Standards guideline. Also, they are
not, by no means, required points that need to be meet. These are just
suggestions, which at least in my reviews, are by no means points that
theme developers need to tweak in order to pass the theme review
process. They are just hat tips that will educate the curious mind on
current web design practices.

I will try to make these suggestions as much as I can. Another example
that quickly can think about (as I saw it in various themes), are
improper line-heights (unreadable) properties. If, a theme is
considered to be of public use, and it's probably going to be used by
millions, we must educate the theme designer on these visual design
inconsistencies that could affect millions of users (let's face it,
and with all respect to theme designers in this list, it's common fact
that WordPress lacks of quality, as in their visuals, for their
themes).

Second: On clearing float methods:

1. <br />. Don't use it. It's non semantic (because we are adding an
extra element to tackle a pure presentational issue) and it's no
precise. Turns out that we are not 100% guaranteed that different
browsers will apply different dimension to that hard-coded "space".
<br /> clearing floats are like the bees

2. overflow: hidden. Could be used. In my tests (I'm a type geek,
which, like Erik Spierkermann said, it's an incurable if not mortal
disease) it turns out that this method "cuts" the shape of the
letters, and more important, in Safari in the Mac, it cuts off the
default focus behavior of the browser.

Example 1: http://cl.ly/ac01cbb1352acb41b802 (source: youtube.com)
Example 2: http://cl.ly/fedce0ce57193dc8b0d5 (source: rodrigogalindez.com)

3. Self clearing floats. This is, in my thinking, the best method. No
extra markup, no weird behavior in layouts, works in all browsers, and
can be deleted when better clearing float support is added in CSS (or
HTML). Paul Irish's improved self clearing float method (used in his
fantastic HTML5 boilerplate, http://html5boilerplate.com/) looks like
another solution that could be suggested, too.

Hope this helps…

Best,

Rod

On Wed, Sep 1, 2010 at 10:57 AM, Ian Stewart <ian at themeshaper.com> wrote:
> Rather than using an empty div to clear content I like to apply
> "clear: both" to the next element parent element. So, for a post,
> that's often post meta. For a page, usually nothing, sometimes an edit
> link.
> _______________________________________________
> theme-reviewers mailing list
> theme-reviewers at lists.wordpress.org
> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>



-- 
Interaction Designer
clarisapp.com | rodrigogalindez.com