Esotropiart

In the world of modern web design using Cascading Style Sheets, there are several layouts notoriously difficult to produce with lean, standards compliant code. Perhaps most notable of these is what is refered to as "The Holy Grail". Some may argue about how many of these details come into play, but a Holy Grail layout should be:

• 3 vertical columns of content:
• 2 fixed width columns on the right and left, and
• stretchy, fluid center column that fills the browser's remaining horizontal space not taken up by either side column
• fully W3C standards compliant CSS and XHTML with no tables
• using only CSS, each column can be re-ordered (eg. the center column can become a side panel, or the left column can become the right column) - and this done without actually changing the content's order in the source XHTML
• a footer beneath is "pushed down" to be directly below the column with the longest content
• any of the 3 columns can have the longest content and thus push the footer down
• the columns can be set to fill or appear to fill the same vertical space and extend all the way down to the footer - by way of a background element or otherwise
• all this must be possible without using Javascript or excessive extra divs or markup
• oh, and it has to work in every browser - even the horrible IE

That said, no I haven't solved the Holy Grail. The last revision of Esotropiart was a fluid layout with great cross-browser success in several of the above mentioned goals. I didn't have need to solve all the issues addressed in the Holy Grail, however, and have never tried to investigate a full solution. There are plenty of coders out there far more intelligent than me doing just that (A List Apart, Position is Everything, Eric Meyer), and I figure it's not worth the hassle until I have an absolute need to employ such a layout in a real world project. There is currently no known solution that addresses all the issues listed above - thus the title "Holy Grail" is well deserved. Later revisions of CSS (W3C recommendations) will most likely solve this and many other banes of the design community. CSS3, for example, will support multiple flowing content columns. Perhaps the greater responsibility lies with browser companies to implement the recommendations W3C comes up with (particularly Microsoft, with their horribly destructive track record).

I regularly use quite a number of advanced CSS layout techniques: some self-invented, and others learned from the masters. The whole 3 column Holy Grail pursuit hasn't really surfaced in my world of design. However, there is another Holy Grail that I personally have more interest in and use for. It is the Holy Grail of Menu Systems. I want a drop-down menu that will:

• be composed of entirely semantic markup - perhaps simple unordered lists or anchors - no tables!
• can be either horizontal or vertical in format
• flyouts will align with their controlling element no matter what - even if the text is resized by the user
• CSS can be used to control the appearance without having to weed through a horrible mess of code
• no Javascript is necessary - just CSS, using pseudo classes (primarily :hover) and context selectors
• menu will function properly with near pixel perfect results in every browser
• any number of hiearchical levels can be added (menus inside menus)
• top level items don't need to be the same width

For a couple years I have - on and off - looked for a decent menu system and even written a couple rudimentary DHTML versions myself. However, none of these has addressed all items on my want list above. It seems to be one of those things where people give up on idealism and use DHTML (Javascript), assuming a workable pure CSS alternative doesn't exist. The problem with the DHTML approach is that very few of them produce indexible links, meaning that search engines will not index pages linked to from the menu - NOT ACCEPTABLE!. Other designers use the latest in CSS technology and produce menus that only work properly in one or two browsers - USELESS. While I'm tempted to use these simpler, idealistic methods and ignore the fact that they don't work in [junk browser] Internet Explorer, that would be unwise. Unfortunately 90% or so of the general population still uses this overrated, blindly accepted Microsoft product, so a menu system must definitely work in IE.

Last week I came across a site I had not seen in previous searches, the author of which is a genius in his own right. Steve Gibson and his research company have come up with the absolute answer to everyone's menu woes. For years, hobbyists and the great minds in the web industry have been trying to achieve some of the finer points contained in my Holy Grail menu demands. No one has truly delivered. The Gibson Research Company has accomplished what no other has been able to. They have created the perfect menu system. It uses no client-side scripting, is composed of simple XHTML unordered lists, and is powered by some genius, yet fairly simple CSS. The menu has been tested to work in basically every modern browser, even many older versions. GRC is offering the results of this noble work to the public domain, meaning that anyone and everyone should use it! Look no further for your menu solutions. Sure, it doesn't fade or have fancy (excessive) sliders or animations, but it will perform masterfully in all browsers.

Please visit the Gibson Research Company site to read about and download the source code. The CSS is very well documented, so you shouldn't have much problem implementing and adapting it for your purposes. Click here to see a demo implementation I am developing for Camp Jonah. Feel free to look at the externally referenced CSS file. I deleted all the components from the stylesheet to include only those controlling elements necessary for my purposes. I obviously altered the visual rules (text and border color, background, etc.) to match my layout as well. Plus, there are a few rules that you won't need because they are elements specific to my layout. I suggest downloading the original CSS file from GRC so you can decide which elements to omit or alter for your needs. Be careful to test in multiple browsers after each change, however. I made a bunch of changes only to find out later that something I did made the menu stop working properly in IE (surprise, surprise, I know). It was something as simple as deleting a border rule (I didn't want the border-top that creates a depressed button illusion) - which makes no sense and shouldn't keep it from working, but that's IE for ya!