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,029,259 hits

Archive for January 4th, 2010

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…

Posted in Google Web Toolkit | 5 Comments »

%d bloggers like this: