woolie t.

This is one of those absurd situations that result in far too much effort and stress (if you ask me). It goes like this: You want to create a layout with a couple columns. Those columns are set inside your “container” with a pretty background color or nice border. Wrap a couple <div> elements, float one left, the other right, and add your border/color. Right? Check it out in IE and things look as you expect. But when you look at the results in Firefox, you’ve lost your background! Or that distinguishing border is now lumped at the top as a single, less-than-appealing line! What happened?

There are countless solutions to this available via the normal searching mechanisms. I have to give credit to my first encounter of the solution I like the best: a “Background height problem” forum post with the solution being the very first response. The <img> element at the bottom of poster’s content could be modified with the “clear: both” style applied to it. The solution also points to this excellent article, “Clearing a float container without source markup“, which goes into some great detail (a must read).

So here’s my quick tutorial on the matter. For this to be worth while, you’ll need to be following along in Firefox. And again, for more details, please read the “Easy Clearing” article linked to above.

»»» but wait, there’s more reading to do »»»

I’m releasing the first of what I hope are many plugins for Wordpress. All of the details are at the new “WP Plugins” page here at wooliet.

If you’re reading this on the wooliet main page (with multiple posts listed), you can see it in action by clicking the link below. If the is the “single post page” display then..well….there’s nothing to see! Just go to Wooliet and find an entry with a link to more content.

(Updated with official WP plugin link)

»»» but wait, there’s more reading to do »»»

I’ve been working on a plugin for Wordpress and have, until now, been using Mootools. I decided that I should try and simplify things by using jQuery, since it is already included with Wordpress.

So let me take you through my links and hopefully summarize what I’ve learned. First though, let me say, I’m assuming that you already know what it means to hook into the Wordpress application flow by adding “actions”. If not, read up.

»»» but wait, there’s more reading to do »»»

GUIMags. Magnets designed like standard GUI controls (text field, combo selection, etc.) which can be written on with the dry-erase markers. The idea is quick layout/design prototyping. It’s one of those “born out of necessity” ideas:

Our lead designer wanted to find a way to keep coming up with great interfaces after carpel tunnel entered his body uninvited. As he pondered a design at home, he used refrigerator magnets as imaginary interface controls, since drawing and clicking was painful.
A journey of ideas and tests later resulted in the birth of GUImags which turned out to not only help hurting arms, but helped speeding up the design process as a bonus.

The site also has tabs for GUIPanes and GUIBoards, both of which are still underwraps.

Not a recommendation or anything, these just looked fun.

»»» but wait, there’s more reading to do »»»

Firebug is a fantastic tool. It works as an add-on to Firefox and can be used for all sorts of fun stuff. It is a javascript debugger (breakpoints, variables and watch expressions). It can also be used to “inspect” whatever web page you happen to be visiting (hover over areas of the page to see its corresponding HTML and CSS). It’ll even profile the javascript.

The original author, Joe Hewitt, open sourced Firebug sometime last year and back in mid-July, John Resig (a well-known javascript guru and Mozilla employee) announced that he was taking over its development. Today he laid out his initial plans:

• Improve the knowledge of Firebug that we have
• Build a runnable set of test cases to prevent regressions
• Track the state of Firebug performance
• Audit and Improve

I can’t wait to see how Firebug evolves now that Resig has reign.

Don’t like the indentation size of list elements in Firefox? I tried padding and I tried margin-left. After much too long, I realized that I failed to try both.

div.links_list ul
{
	margin-top: -10px;
	margin-bottom: 0px;
	margin-left: 5px;
	padding: 0px;
}

Via Wired, here’s the current draft HTML5, representing “the 5th major revision of the core language of the World Wide Web, HTML“. It was published this past Tuesday (1/22) as their first draft. I don’t know if it’s common to have such language included as part of these documents, but close to the opening one starts to get the distinct feeling that reaching this point in the document’s life was not easily accomplished:

The publication of this document by the W3C as a W3C Working Draft does not imply that all of the participants in the W3C HTML working group endorse the contents of the specification. Indeed, for any section of the specification, one can usually find many members of the working group or of the W3C as a whole who object strongly to the current text, the existence of the section at all, or the idea that the working group should even spend time discussing the concept of that section.

Got it…(awkward)

»»» but wait, there’s more reading to do »»»