Pragmatism

I've recently been working on implementing a two column layout for Jazz web UIs (reg req'd). I could easily update our current layout's images and styles and be done with it, but while I'm restructuring, I want to clean up some of our current layout's problem areas. Currently, we've got the following "features":

1) Two column layout with equal height columns (one fixed width, one fluid width)
2) Drop shadow and gutters on either side of the layout
3) Sticky footer; make the layout stretch the full height of the window with a footer at the bottom.

CSS hackers everywhere know that these three requirements are tricky to achieve together. The sticky footer was achieved by adding a page wrapper div with 100% height, followed by a footer div with a negative top margin equal to its height. The columns inside the page wrapper were then stretched down to the footer using the One True Layout hack (large negative bottom margin with large positive bottom padding).

Unfortunately, this hack required overflow: hidden on the wrapper, which killed off the possibility of enabling horizontal scrolling on the layout (i.e. what if a table has a zillion columns and is wider than the screen? Sorry, it gets chopped at the edge).

To make things worse, even if I used another mechanism for the equal height columns, DIVs don't expand to fit their contents, so the wide table would just overflow out of the layout, which is ugly.

Another problem area had to do with floats. To achieve the two column layout, I floated one of the columns left, and allowed the other to fill the remaining space (with overflow: hidden to give it its own block formatting context so that the columns drew beside each other instead of overlapping). Unfortunately, anytime the right-most column was forced wider than its auto width, it would wrap below the left column. There were various ways to mitigate this wrapping, but they all precluded horizontal scrolling.

As far as I know, there is no CSS only solution to achieve all of my requirements while mitigating the aforementioned problems (if there is, I'd love to hear it). So I set out to find a happy medium, which led me to tables.

I can hear the groans from the CSS elite (What's your CSS level?). Table layout!! NOOO!! But hear me out.

Tables are expand-to-fit! They're the only HTML element that does this. So I'm using this property to achieve my horizontal scrolling. The great news is that tables expand even if they are set to overflow: hidden, so my One True Layout hack will still work for the equal height columns. I lose my sticky footer, but I can easily achieve that with some simple onload javascript logic that sets the height of the table's one and only cell.

But that still leaves my column wrapping problem. Horizontal scrolling is moot if the column wraps before it scrolls. So how do I fix this? I could split my table into two columns, but my willingness to rely on tables only goes so far. What other ways are there to put divs side by side? For that, I turned to display: inline-block.

Display: inline-block causes the element to generate a block box (like display: block), but to flow relative to its siblings using an inline formatting context (i.e. side by side like display: inline). To make this work on IE, I had to use spans instead of divs, but that's easy enough. By adding white-space: nowrap to the parent of these divs, all wrapping is nixed, and the table cell expands as it should when content forces out the side.

Sounds too good to be true, and it is... Inline-block elements do not fill their available width as block elements do, so inner divs would only be as wide as their contents force them to be.

To fix this, I had to apply a fixed width to this column using JavaScript, and register a resize handler to update the width when the window changes. This is no problem in Jazz Web UI land since these pages require JavaScript to even work (async code loading and dojo-based UI widgets). Even with the fixed width, the table continues to encapsulate overflowing contents.

Take a look at the final result: http://twitpic.com/17wdi

So is it bad that I'm using a table? I don't think so. It's important to be pragmatic in web development. If an element has a property that you need, use it!

Web Technologies Learning Materials

As I browse the web and run across things I think are useful, I add them to my favorites. Here is a list of my favourite favorites.

First -> http://www.gotapi.com/

AJAX/JavaScript:

JavaScript (re)introduction
https://developer.mozilla.org/en/a_re-introduction_to_javascript

Learning JavaScript Basics
http://www.allsyntax.com/tutorials/JavaScript/18/Learning-JavaScript-Basics/1.php

Ajax for Java Developers:
http://www-128.ibm.com/developerworks/library/j-ajax1/?ca=dgr-lnxw01Ajax

AJAX with the Java platform
http://java.sun.com/developer/technicalArticles/J2EE/AJAX/

Mastering AJAX
http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html

CSS:

CSS Tutorial:
http://www.html.net/tutorials/css/

CSS Cheatsheet
http://home.tampabay.rr.com/bmerkey/cheatsheet.htm

CSS Tricks
http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml

Avoiding CSS Pitfalls
http://webddj.sys-con.com/read/45288.htm
*note: this article suggest using a "* html" hack... IE7 now supports a lot
of the issues that the star html hack targets... so use conditional comments to
target IE6 and older (see next link)

Conditional Comments
http://www.quirksmode.org/css/condcom.html

IE HasLayout
http://haslayout.net/haslayout
*very important consideration to make CSS work properly in IE

IE hasLayout

The hasLayout property is a very important consideration when designing for IE. A surprising number of IE rendering bugs are triggered by an element not having layout.

For example, have you ever applied a CSS background-image to a <div> tag, only to find out that IE does not show the background image (floats usually have to be involved to trigger this bug)? Giving the <div> layout will fix this.

Another bug: Ever tried to apply "display: block" to an <a> tag, with the goal of creating a large clickable area? In IE 6, only the text is clickable unless hasLayout is triggered.

hasLayout is triggered by a few CSS styles:

- overflow: hidden (IE7+ only)
- position: absolute
- height
- width
- zoom: 1

Inspecting an element with the IE Developer Toolbar will show you if an element has layout or not.

The best reference for haslayout that I've come across:

Link: http://haslayout.net/haslayout

Avoiding CSS Pitfalls

A great read for anyone who has ever pulled their hair out trying to make their CSS work on older versions of IE. This article provides workarounds for box model, three pixel gaps, peek-a-boo, doubled float margin, flash of unstyled content (FOUC), horizontal centering, and more.

Link: http://webddj.sys-con.com/read/45288.htm