First experiments with DIV Positioning

The new design is almost fully implemented. I used Photoshop 7 and ImageReady 7 to create the base design. I used the CSS layer HTML export format from ImageReady to create the base layers. Heavy text editing and previewing in GoLive 6.0 made the process of refining (and learning) easier.

The inspiration for the current design came directly from Russell Brown and Nick Hodge in New Zealand. The west-coast beaches in the Waitakare Ranges of New Zealand are awe inspiring. Russell took the shot of myself near Lion Rock at Piha that sits on the front page.

I was in the bad habit of using HTML tables as the base construct of web pages. This is based on a historic comfort, a hesitation based on Netscape 4.x’s lack of full CSS1 let alone 2 compliance, the base export out of tools like GoLive and ImageReady producing tables and a general reluctance to persist with learning something new.

Things I learnt on this journey:

• CSS positioning and DIV layers result in smaller, more compact and easier to read HTML. Once you understand that you can nest the DIV layers, and that the positioning can be relative to the enclosing DIV layer (as a box), its easy to position elements. It would be cool if boxes expanded/shrank in relation to their parents to make it easier to implement layouts. This would then make it similar to the Java GridBag et al layout system.
• Implementing a few minor changes to colours and rollover styles was simple. Mungenet already used CSS for font/style type formatting to separate design from content. Adding DIV layers was as simple next step.
• Separating the content from the design also helped implement the new design. By placing the new template into the CMS, the implementation took seconds, not hours or days.
• I only had to add 3 lines to the mungenetengine PHP code to implement a new way of rendering image references for the inline CSS. 8 lines were commented out due to a bug in some regular expressions. No other deeper changes were needed to the code that worked for the previous table design.
• The site will not work in Netscape 4.7 or earlier. In fact, the previous version of Mungenet would not have worked with Netscape 4.7. As I use the br/ tag in its correct XHTML syntax form, Netscape’s parser doesn’t see this and ignores the tag. Some may call me browser elitist, but you need your head read if you are still using Netscape 4.7!
• Opera 6.x and Netscape 6.x interprets the CSS DIV positioning differently. For instance, the next/previous buttons in IE render at the top of the content DIV layer. In Netscape 6.x, they render at the bottom. Overall, rendered in Netscape 6.x this site looks ok, but Opera 6.x needs a little work.
• Whilst largely tested in IE6/NS6 on WindowsXP, I also tested this with Internet Explorer 5.1 on MacOS X. I notice in my logs the odd Internet Explorer 5.0 on Windows 98 passing this site. As Internet Explorer 5.0 MacOS 9 is one of the best and most complete CSS1/2 browser out there, I trust it works ok. Notice I didn’t use the word assume!
• I long for full PNG-24 support including the correct rendering of alpha channels in Internet Explorer. Using transparency as a part of design is something with InDesign 2.0 makes easy for print. Now we need a similar, standardised way in XHTML and PNG-24. Without resorting to Flash SWF or SVG.
• PNG-24 aside, its easy to get some interesting design effects by placing images as background elements of layers: see the navigation piece on the left hand side, and footer at the bottom of this page.

To investigate and complete:

• True W3C HTML conformance. This site presently doesn’t pass the full test due to some tagging issues. Whilst these do not effect the rendering in most popular browsers, I would like to ensure it passes.
• Conditional rendering of elements to permit PNG-24 to Netscape 6/Opera 6 and dumb, single bit transparency in GIFs for Internet Explorer
• Different CSS for Opera 6.0
• Clean up the external CSS and reduce size by removing unused elements and truly inheriting styles.
• Replacing tables that render the navigation pieces into CSS layers

The best resources I found on the web for understanding CSS positioning and layers:

The W3C on Cascading Style Sheets
Discussion at Webmaster World
The CSS Shark

If you are a HTML table jockey, I think its time to make the switch to CSS positioning and layers.