Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at
Review: YUI Grids for easy cross-browser compatibility

One of the projects I am wrapping up had some requirements that gradually complicated the layout required across the web site. I love working with non-table layouts and while my design was holding up well. The time I had to commit to dealing with the cross-browser compatibility was getting to be a pain and it's just good business to keep the ear to the ground to see if some of the heavy-lifting can be done for my company.

So I decided to take a look at the YUI Grids to see if I could benefit from their layouts.

I usually shy away from anything that promotes 'templates' since there always seems to be that single requirement that disqualifies all templates that will work. The templates, therefore, must be easy to modify. Another side effect of these types of tools I have seen is 'divitis' and I typically cringe when I see a ton of wrappers used. The YUI grids might be accused of this, but the cross-browser compatibility may be worth tolerating some of that. Especially if accessibility is important and time is short.

Here's the layout for most of the pages:


No real rocket science here, except I need the source ordered as shown by the column numbers. The widths of columns 1 and 2 also needed to be different from any of the YUI templates. I looked into the -default grids.css from YUI to find the relevant selectors that would need to be overridden and used css precedence rules to slip in an external stylesheet to meet my needs. So far so good.

Now the next overcoming was having equal-height columns on columns 1 & 2. I have a solution for the holy grail layout but fortunately found someone who already implemented a solution for the YUI grids here using a similar technique. His solution takes advantage of the standardized naming the YUI grids expects and runs when the document is ready. Good, so far no showstoppers.

Many of the pages require a less complicated layout, with only two columns in the body area:


Applying a Layout filter in Monorail makes this a snap as I can simply add a <link/> reference to an external stylesheet that is added to the property bag on demand and is rendered in the default.brail layout. This stylesheet simply removes the width for column 2 and stretches column 1 across. Quick test and all seems to work great.

The front page of the application was completely different but thanks to the ease of manipulating layouts at runtime using Monorail and the ease of modifying the YUI grids library, this wasn't too complex.

Things to keep in mind are:

  1. The grids.css from YUI also relies on other YUI core libraries that monkey with your font scheme and also does a browser default reset. I prefer doing this kind of reset anyway so wasn't affected but if you rely on the default behavior of browsers for layout, they may be different using this tool.
  2. If you need to modify the templates, it is easier to look at the non-minified .css sheets to see where you need to override selector settings.
  3. Leave the YUI library unchanged and use CSS precedence rules to modify.

I was able to integrate the YUI into my layout in about two days and had very few issues to overcome without a steep learning curve. If cross-browser issues are plaguing you current layout, you may want to take a look at what YUI is offering to see if they might help.


Posted 10-20-2007 12:27 AM by Michael Nichols


About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Google Reader or Homepage Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of
Red-Gate Tools For SQL and .NET


SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
NHibernate Profiler
Balsamiq Mockups
JetBrains - ReSharper
Web Sequence Diagrams
Ducksboard<-- NEW Friend!


Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers


Community Server (Commercial Edition)