1 | 2 | 3 | 4 | 5

1 - 5   [22]

CSS Any Order Columns - aka Holy Grail

This post does not relate to any other topics

PIE has published what they are arguing is the Holy Grail of CSS designs - fixed width sides and liquid centre. It actually comes as an appendix to a vast collection of resources on the one true layout, including any order columns.

I have been practicing and voraciously arguing for the acceptance of just these techniques for page layout and sub-content placement in CSS design since my article on CSS negative margins back in July 2004 [NB. At the time of that article a balancing unit was required in certain browsers (e.g. Mozilla 1.5 and below) but this is no longer the case - bar more recent browser bugs]. Despite the obvious semantic benefits and the power they provide for combining fixed, liquid and elastic columns in a single layout little acceptance had been given for these techniques until now.

So it is nice to know that finally with their publication on PIE the use of CSS negative margins instead of manipulation of document semantics might now become a valid and accepted CSS technique by the higher powers.

Thanks to Alex (Robinson) the author of In Search of the One True Layout who has been very gracious to acknowledge my previous work on any order columns (still filtering through to the PIE site at this time of writing). I guess I wasn't as voracious as I had thought in pushing these techniques to the CSS community and my failure to publish my findings on CSS-discuss was in hindsight careless. I should emphasise I had intended to publish an extended article demonstrating further the different combinations and browser/platform compatibilities but simply never found the time to complete it. As I said to Alex I think this was for the best since his article is an excellent resource, well written and expressed in english I could never hope to achieve! Plus of course it has the PIE endorsement.

As a final point of note for the historical records, this site was actually my first implementation of the negative margins technique (of course principally in a two column form) where I wanted content prior to the left hand navigation. While I do not know the exact date I released this design, the Wayback archive confirms the CSS was implemented prior to 27th January 2004 (although slightly scrambled by the archive). Shortly after I saw Ryan Brill's proposal on Mezzoblue and inspired by PIE's own work.

Posted on Oct 26, 2005 at 16:13:49.

Mozilla COL Alignment via DOM Scripting

Also relates to DOM Scripting and Firefox and Co

One of the Mozilla rendering engine's few annoyances is its apparent disregard for the alignment attributes of col and colgroup elements within HTML tables. One might argue this is justified since alignment is a presentational attribute that should be defined with CSS. However, table alignment can be crucial to the visual display of data in a usable format and this should not be dependant on CSS - perhaps one reason why table alignment persists in the XHTML 1.1 Table Module.

Putting this presentation/structure debate aside, a workaround is required if alignment rules are to be defined by column in Mozilla browsers. One solution is to turn to CSS and define adjacent sibling selector rules (or direct adjacent combinators in CSS3 syntax) for table cells as demonstrated in these CSS snippets. However this will only work if the number of columns and columnar alignment is predefined.

The scenario I found myself in earlier today, working on the latest version of my PHP powered CMS, had column alignment and quantity determined on a content module basis with considerable variation. So it was once again time to call on the DOM, and to create those adjacent sibling selector rules dynamically.


function synchronizeColumns(table) {
  var inline = create('style');
  inline.setAttribute('type', 'text/css');
  var rule = "tbody th", 
      rules = "", 
      span, halign, valign, i, temp;
  (function(elem){
   temp = "";
   span = elem.getAttribute('span');     
   halign = elem.getAttribute('align');     
   valign = elem.getAttribute('valign');          
   if (halign != null) {
     temp += "text-align:" + halign + ";";  
   }
   if (valign != null) {
     temp += "vertical-align:" + valign + ";"; 
   }
   i = (span != null) ? span : 1;
   do {
     if (temp.length > 0) {
       rules += rule + "{" + temp + "}\n";
     }
     rule += "+td";      
   } while (–i > 0);
  }).Iterate(table.get('col')());
  inline.appendChild(create(rules,Node.TEXT_NODE));   
  get('head')(0).appendChild(inline);  
}

The rules are declared inline (to override any default alignment rules that may be set for columns, by appending a new style node to the head element. Then it is just a case of iterating through each col element in the table, extracting the corresponding align and valign attributes and building the corresponding rule. The span attribute must also be taken into consideration to ensure the correct attribute values are assigned across each column as this document fragment demonstrates:


<colgroup>
<col align="left" width="50" />
<col span="3" align="center" width="2*" />
<col width="3*" />
<col span="2" align="right" width="1*" />
</colgroup>

So, the do..while loop takes care of appending the correct number of adjacent sibling selectors.

The function described above only loops through col elements which met my requirements. Including colgroup elements is a little more complex since the content model can contain col child nodes or be empty. Since the problem only applies to Mozilla, this would be a perfect opportunity to utilise the supported TreeWalker interface from the DOM2 Traversal and Range specification. For example:


var nodes = document.createTreeWalker(
  table,
  NodeFilter.SHOW_ELEMENT, 
  {
    acceptNode : function(n) {
    return (n.tagName == "COL" || 
            (n.tagName == "COLGROUP" && 
             n.childNodes.length == 0)
           ) ?
      NodeFilter.FILTER_ACCEPT :  
      NodeFilter.FILTER_SKIP;
    }  
  },
  false);

The returned node list will contain all col and colgroup empty elements. This assumes that a colgroup element does not define the alignment for any child nodes - to account for this the acceptNode method would need to be extended further.

Posted on Nov 08, 2004 at 20:20:29. [Comments for Mozilla COL Alignment via DOM Scripting- 2]

Device-Independent Tool Tips

Also relates to Accessibility and DOM Scripting

I have updated the Accessible DHTML Tool Tips experiment to handle both mouse events and keyboard events. It is not perfect, but the use of unobtrusive Javascript and device-independent event handling is a step in the right direction.

Posted on Nov 05, 2004 at 22:19:54. [Comments for Device-Independent Tool Tips- 0]

Wayback When?

Also relates to Web Standards and Peregrinations

My first steps into the world of web development came in 1997 during my time studying philosophy (and other inter-curricular activities!) at Leeds University. Initially this involved the utilisation of Tripod's online web builder tools. Then, my first big breakthrough came on discovering the view source button and my technique rapidly evolved from simple cut and paste to raw coding HTML. From then on web development became a past-time that I dabbled in when occasion allowed as I added first Javascript and then CSS to my arsenal. The target of my experimentation were two websites: Still Stoked Longboard Skates, which first appeared in late 1997; and the Bore Riders Club which arrived in spring 1998.

The current versions of both these sites, initially revamped in Spring 2002, are built to Web Standards on the front-end with content delivery powered by PHP and MySQL. Still Stoked was enhanced for improved accessibility in Autumn 2003, while the currently Flash intensive BRC site is on a long to do list. Now, thanks to the internet archive Wayback Machine, snapshots of some of the earlier incarnations of both these sites are still available to peruse!

Content Warning! All these snapshots demonstrate poor design practice for today's web. Expect explicit use of font tags, multiple table nesting, Javascript rollovers, extensive unmaintainable code and prolonged download duration (especially on 56K Dial Up)!

Still Stoked has actually been through 5 major redesigns and several minor reworkings over the past 7 years before arriving at the current longboard skates for surfers website.

  1. 28th August 1999 Snapshot - full redesign, original build date unknown
  2. 23rd October 2001 Snapshot - full redesign, original build date early 2000

The Bore Riders website has seen 2 major redesigns in its lifetime prior to the current Severn Bore surfing website.

  1. 16th November 1999 Snapshot - original build date unknown
  2. 7th June 2000 Snapshot - minor colour changes including rather cheesy Javascript powered rainbow text!
  3. 17th December 2001 Snapshot - full redesign completed sometime in 2000

While these relics of a pre-standards web (at least from my perspective - standards have been around a lot longer than these archives) show how not to approach web design and development, I still feel quite proud of what I achieved in those years when I dedicated a weekend here or there to coding. It also acts as an indicator of what I have personally achieved since then in the time I have worked full time in this industry. Also these snapshots ignite memories, especially Pegasus (productions), of my past and the evolution of both Still Stoked and the Bore Riders Club, both well established entities today. Thanks to Wayback for keeping alive these dinosaurs that should have been made extinct a long time ago ;)

Posted on Oct 16, 2004 at 22:46:54. [Comments for Wayback When?- 0]

CSS Snippets Volume 1

Also relates to Web Standards

Just noting a couple of useful CSS2 selectors (Standards UAs) and another IE hack to fix rendering:

Binding CSS behaviour of an explicit label and the related form field:

input:hover,label:hover+input,label:hover+br+input {?} 
Displaying update information for inserted content marked up by the <ins> element:

ins[datetime]:before {
  content:'Update: ';
  font-weight:bold;    
}
ins[datetime]:after {
 content: ' [' attr(datetime) ']';
 font-style:italic;
}
ins[datetime] {
  text-decoration:none;
}
Synchronizing Mozilla with IE's rendering of the align attribute for <col> elements:

IE will position cell content based on the align attributes:


<col align="left">
<col align="right" span="4">

For Mozilla a quick selector is required: (Code corrections made - see comments)


td {text-align:right;}
tr:first-child {text-align:left;}

or, slightly more economical:


td {text-align:left;}
td+td {text-align:right;}
Quick fix to IE6 overhang with fieldset backgrounds (relative sizes are arbitary but make the point):

* html fieldset {
  /* \ Not Mac */
  position:relative;clear:both;
  margin-top:1.5em;padding:1em 0;
  /* */
}
* html fieldset legend {
  /* \ Not Mac */
  position:absolute;
  top:-0.8em;left:0.4em;
  /* */
}

All are common-sense really, but someone may find them useful or enlightening!?

Posted on Oct 01, 2004 at 02:12:25. [Comments for CSS Snippets Volume 1- 2]

Breadcrumbs Trail

[ Home ] -> TW Blog -> CSS Design
Site Map

The Severn Solutions website achieves the following standards:

[ XHTML 1.0 ] [ CSS 2 ] [ WAI AA ] [ Bobby AA ]

Page compiled in 0.009 seconds