Notes on GWT layout with HTML and CSS
Posted by David Chandler on January 4, 2010
For the GWT app I’m currently working on, I’ve decided to lay out as much of the page as possible using static HTML / CSS and attach GWT widgets to their appropriate DIVs. This approach enables more productive design iteration for the main components of the page, as you can use standard design tools (Dreamweaver, etc., but in my case, just the Eclipse editor and Ctrl+R in the browser). Example:
<div id="main"> <div id="app"> <div id="roa-message-panel"> <table> <tr> <td id="roa-message-text"></td> </tr> </table> </div> </div> </div> <div id="right"> <div id="quick_links"></div> <div id="admin_links"></div> </div>
In my main presenter (see GWT for my overall approach), I attach each view to the corresponding DIV as follows:
In the process of working out the kinks in my CSS, I’ve learned much more than I ever wanted to about the differences between IE and every other browser, but the one that really stinks is the way IE calculates width (not that Microsoft didn’t get it right–just that it’s different from other browsers). Fortunately, there’s a great Wikipedia article on IE’s border box model.
First, I had to fix my HTML to get IE 8 out of quirks mode. I ended up going with HTML 4.01 transitional. Here’s a handy reference for the different DOCTYPES: http://www.w3.org/QA/2002/04/valid-dtd-list.html. The Web Developer Toolbar for both IE and Firefox can do HTML validation, which may help elucidate the reason IE is in quirks mode in the first place.
Then, I was able to remove from my HTML the conditional comment referencing an IE-specific stylesheet. Now I have a single HTML and CSS that works on Firefox, Safari, and IE (except 6). I’m contemplating using the CSS3 border-box and various browser-specific properties described in the above Wikipedia article to make them all work like IE 6. The main reason for this is design convenience, as the older IE border-box model includes padding in the width, which keeps things nice and even for fixed-width layouts and lets you specify padding in relative terms (em or percentage) without having to know the corresponding pixel widths. This way, when users change the font size, the whole layout scales up and down evenly.
An excellent book on CSS for design-challenged folks like me is The CSS Anthology by Rachel Andrew.