Sunday, September 04, 2005

CSS layout, CSS 2.1 tables and portals

Much as I appreciate the value of using CSS for layout, I am also aware of how much effort is currently needed (and how much resultant frustration) to convert a table layout web application to pure CSS layout that works in all modern browsers (don’t even talk to me about supporting Netscape 4!).

Recently a colleague of mine described creating CSS layouts for web applications as the holy grail. I’m not sure I’d have put it that strongly but I do take his point. To be fair for premeditated layouts it is relatively straight forward to create CSS layouts, good examples of these are Wiki, Forum and Blog software where you pretty much know in advance what the layout is going to be. CSS is good at static layouts but is generally pretty hard work for the average bod to create dynamic (fluid) web application layouts.

I recently discovered that WestCiv’s Layout Master WYSIWYG CSS layout creation software has just become freeware and it nice for the CSS novice to play with. That said Layout Master does not really help you in creating accessible CSS layouts as absolute positioning and fixed font sizes are generally frowned upon.

I have been recently working with the JSR168 software Apache Pluto and was quite disappointed that the simple portal application that comes with it uses tables for layout. I was disappointed because I otherwise consider this software to be at the cutting edge of technology and it should really be setting a better example as it is the official JSR168 reference implementation. Then again, what choice did it have if it was to work across browsers? In the article Getting your DIVs to behave like TABLEs I discovered my answer, with CSS 2.1 tables I can create table-like layouts easily.

The drawback of CSS 2.1 being that it requires a compliant browser which means Firefox or Opera but NOT Internet Explorer 6. However, I expect Internet Explorer 7 will support CSS 2.1 but I can’t try it out since I use Windows 2000 (grr). Although I should chalk this up as another victory for the far superior browser that is Firefox I suppose. Now I’m not being especially anti-Microsoft here I am simply stating that IE6 released in August 2001 with a single server pack update in 4 years cannot hope to compete with the Firefox browser that is current and constantly being improved. I didn’t make the move to Win2K until 2003 and probably won’t be in the queue to upgrade to Windows Vista until the dust has had plenty of time to settle. I’m not in a hurry to upgrade to IE7, which I understand from recent reviews is no better than Firefox. I'm sure there will soon be Firefox extensions to support any new Microsoft proprietary RSS formats. When I mentioned Microsoft Office 11 move to an underlying XML format my boss quipped that he expected that the XML would comprise of square brackets rather than angle brackets, I hope that he was joking and didn’t have insider knowledge...

5 comments:

Mark McLaren said...

CSS is good at static layouts but is generally pretty hard work for the average bod to create dynamic (fluid) web application layouts.



Huh? Doing good liquid layouts using CSS is, IMHO, easier. Check out RetreatToTheSource.com for an example. Definitely play with resizing the window and enlarging/shrinking the font size to see the dynamics in action. The design is completely em based.



The problem with all of the CSS layouts that I see is that the idiotic "designers" are trying to impose all sorts of control that they are used to having in doing e.g., print designs. I.e., they go to nearly endless lengths to attempt pixel-level control. Hello boneheads, this is the web. :-)




Note: Comment imported. Original by John D. Mitchell website: http://www.artima.com/weblogs/index.jsp?blogger=johnm at 2005-09-05 01:17

Mark McLaren said...

John, that link you provided contains a great example of em based css.



It is however, hideously ugly.



If this is what happens when we take aesthetic control from the "idiotic designers", I think their jobs are pretty safe for a while.
Note: Comment imported. Original by Elliot at 2005-09-05 05:54

Mark McLaren said...

Hi John,



Thanks for your comment, it is a nice change to receive a comment that isn’t advertising online poker.



I looked at your site and the content looks quite static and easily within the reach of what I’d call static (referring to the way the content is produced) CSS design.



This entry was a bit of a Sunday night rant so perhaps I didn't fully get my point across. The kind of site that will have particular difficultly with CSS layout is a portal. Not so long ago I designed a CSS portal interface, http://portal.bris.ac.uk [I’m not saying it is an exemplar or anything] and even with the considerable head start of using Terrence Ordona’s nested div CSS theme it was damn hard work. I don’t wish to blow my own trumpet but I suspect an idiotic designer would spend many days crying over their CSS stylesheets to produce something similar.



My point is that it shouldn’t be that hard. I don't want to have to essentially write a separate stylesheet depending on whether my page has 1,2,3 or 4 columns. Creating a portal design with the benefits of a CSS 2.1 compatible browser means it doesn’t have to be hard and therefore removing CSS layout from the Holy Grail category.



Cheers,



Mark


Note: Comment imported. Original by markmc website: http://content.mark-mclaren.info/ at 2005-09-05 08:40

Mark McLaren said...

Hi



Its quite interesting but could you help me out with my problem in CSS.



I want to manage a stick up footer on the website for IE 5.0 +. with CSS



As you can see 1 on bmw.co.uk



thanks



Imran Hashmi
Note: Comment imported. Original by Anonymous website: http://www.seo-professional.co.uk at 2005-11-02 20:37

Mark McLaren said...

It is achieved via JavaScript.









div#footerstrip {

bottom: auto;

top: expression( ( 0 - footerstrip.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );

}







pre.fixit { overflow-y:hidden;width:100%;padding-bottom:1.5em; }







Mmmm...kludgy.
Note: Comment imported. Original by markmc website: http://content.mark-mclaren.info/ at 2005-11-03 09:31