David Chandler's Journal of Java Web and Mobile Development

  • David M. Chandler

    Web app developer since 1994 and Google Cloud Platform Instructor now residing in Colorado. Besides tech, I enjoy landscape photography and share my work at ColoradoPhoto.gallery.

  • Subscribe

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 223 other followers

  • Sleepless Nights…

    January 2010
    S M T W T F S
  • Blog Stats

    • 1,033,667 hits

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">
				<td id="roa-message-text"></td>
<div id="right">
	<div id="quick_links"></div>
	<div id="admin_links"></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.

Browser joy…

5 Responses to “Notes on GWT layout with HTML and CSS”

  1. Erron said

    Hmmm…. Have you upgraded to 2.0 yet? Wouldn’t using the UIBinder make this easier, or at least more efficient?

  2. […] Notes on GWT layout with HTML and CSS […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: