Archive for the ‘technique’ Category

Preface: The following demo yielded results that basically didn’t work in IE. Although a better man may be able to figure this out, I was not able to dedicate any more time to the subject. So unless you’re ok with that, or can help me get past it, you may want to save yourself some time.

I was recently asked by a client to simply “take that right column content and stick it UNDER the left”. Sounds simple enough, right? But what if you don’t have access to the table? What if all you had were styles you could manipulate to simulate a new row? Well damn. Sucks to be you.

1: Here’s the table structure we’re stuck with. One row. Two cells.

Traditional layout of a 2-column table row

Traditional layout of a 2-column table row

But what the client wanted was for the right hand column to be moved below the left hand column without editing the table. (For the sake of argument you can assume there were classes defined in the TD’s allowing us to have some CSS access.)

This is usually the place where I say “I’ll see what I can do”, knowing there’s nothing I can do. But I spent some time experimenting and the result was a solution that worked just fine…except in IE. Great. Things like this make me want to become a print designer.

2. So here’s my admittedly not very elegant solution.

Manipulated row where second TD falls inline UNDER the first in the same Table Row.

Manipulated row where second TD falls inline UNDER the first in the same Table Row.

I started with some styling of the table cells setting up the parental structure necessary to position the divs nested in each cell.
Table cell one:
<td style="position:relative; height:200px;" id="div-for-td1">
#div-for-td1 { width:960px; position:absolute; left:0px; top:0px; display:block; padding:0; margin:0; }

Table cell two:
<td style="position:relative; height:500px; overflow:scroll; margin-top:-200px;" id="div-for-td2">
#div-for-td2 { height:390px; width:620px; float:left; position:absolute; left:0px; top:210px; }

Basically that’s it. I’ve used the td styling to set up the relative positions, heights and behaviors, while the div id selector dictates the actual position and size.

A few things to note:
First: The second cell holds content of an undetermined height. However because the container is floated it loses its hasLayout property (see: On having Layout), which means that the markup of the page does not respect theĀ  height of the div and the content below it will overlap show through this div. Obnoxious, right? Second: And since a simple clear style or clearfix (see clearfix) didn’t work, i had to limit the table cell’s height and cap the content with an overflow:hidden;
also because I’m basically tricking the browser into ignoring the markup of the table, I had to use the specified height from the first cell as a negative margin in the second cell. Otherwise the browser would apply the height from the first cell to the second as you may expect, creating a 200px gap above the content.

Again, I’m not saying this was impossible. But having spent a fair amount of time on it, I’d say your best bet is to keep it simple and avoid this technique.

  • Comments Off
  • Filed under: technique
  • Little Things: Home Depot's Quicklinks

    Check this out: http://www.homedepot.com

    Beautiful vertical rhythm, hierarchy, varied value, and manicured line breaks make this menu beautiful.

    Beautiful vertical rhythm, hierarchy, varied value, and manicured line breaks make this menu beautiful.

    There are a lot of negative things I could say about HomeDepot.com, like the unintuitive architecture etc. But instead I’d like to mention a VERY minor detail that I think 99% of designers would never think of. Let’s face it, the entire Home Depot experience, virtual or otherwise, is overwhelming. Take a look at the quicklinks on the left hand side of the site. They’re there to give you smarter access to the high-demand product areas of their daunting product selection.The type size hierarchy is gorgeous, the color variance ads a nicely priortized foil to the signature orange they could be over-doing (but they’re not), and the almost retro usage of the link underline is unmistakably usable.

    But here is where I totally geek out. Notice how each category of links has two lines. Now, notice how the first line always ends with a comma. Why is that, you ask? Well whoever designed this menu (props) took the time to add a simple attribute to the links in this definition list to disallow the links from wrapping onto a new line. Essentially, this CSS author added the following attribute to the definition data type selector:

    dd a { white-space:nowrap; }

    This allows each line to end with a complete link. Why would anyone bother doing this? This is the usability quivalent of a print-designer manually setting type to clean up any awkwayd hyphenation. To put it another way, consider the user’s mentality when viewing this list. Am I looking for “Toilets, Tubs & Whirlpools?” or do I just want “Toilets?” Well, without this attribute, “Tubs &” would probably reside on the first line potentially causing confusion about where the which link is which and where each ends. I know I’m making to much of this, but I’d love to think that someday, someone might spaz over my attention to detail like I’m geeking out over this right now.

  • Comments Off
  • Filed under: technique, typography, usability