Table Free Markup for JSPWiki#

You can test my experiments at: http://memojo.com/. It is in Spanish, but it should not be that different for style.

Purpose#

To isolate markup from HTML generation. I. E. pages, plugins and tags must generate only structural markup, while the presentation information should be in (a set of) stylesheets.

Specifically, using tables to specify the layout of the page is bad, because it will break things like

  • text browsing with lynx or links
  • a Cellular Phone browser
  • a Zaurus or Ipaq browser.
I'd prefer ugly display over unusable pages, anyway.

As navigation information (menus, etc.) is usually always the same, I'd rather have them at the bottom of the page markup, and have css to put it in the left (or right, again I prefer it there, it's less disturbing) of the page.

Status#

I think I will separate two sets of changes:
  1. Patches to have .java files and .jsp templates generating good, style-free code.
    1. I have sent the patches to Janne. I will split them further into small, evolutionary changes.
  2. My fiddlings with stylesheets.
    1. I'm cleaning those, and moving under a notablemarkup directory in my templates stuff. This means other people could test them quickly without spoiling their setup.

We should ensure that changes to plugins or taglibs don't spoil the default presentation. For instance, I had to remove COLOR="" attributes from java code (no longer in HTML 4.01). Then, an entry in the default css file has to be done, defaulting to the same color for the given class.

Also, <u> (underline) is no longer valid HTML, so undefined Wiki pages are shown as <span class="unknownpage">Name</span> and this, in turn, has to be marked with a line like .unknownwikipage { text-decoration: underline; } in the stylesheet.

<u> is deprecated, which means that it's still a part of the standard, but its use is not encouraged.

The Approach#

I'm marking the following main content areas with DIV:

  • pagename is for the WikiPage title and the search box. Inside:
    • a form, class searchbox
  • page is the main body of the WikiPage. Inside:
    • versioninfo at the end of the page
  • navmenu, for the floating menu. It has inside:
    • username
    • menufooter
    • small (version)
    • rss (optional)

Before pagename there are two divs, set to display: none; for browsers that don't know how to show stylesheets:

  • standardsNote to show a small disclaimer, and
  • skipLinks, to jump to navigation

For the display,

pagename
It is set to show the logo in the background inside the h1 element
searchbox
Inside pagename, it is set to width: 12em; float: right; , so it shows to the right of the pagename banner
page
It is set to width: 64%; float: left;
navmenu
It is set to float: right; width: 12.5em;


Test Results#

Konqueror 3.0.5
First experiments: It cannot cope with it. It draws the page right, but it gets destroyed on scroll. I think this version of konqueror simply cannot cope with some of it. I don't use it, though. Other reports?
Mozilla 1.1 (and Galeon)
All right. This is what I'm using for tests. The DOM Inspector is handy when you don't know what you're doing ;-)
MSIE 6.0
To be tested. Some people told me all right. I'll test it when I have access to a Windows machine, somewhere in the future. Meanwhile, I'll have to trust your reports.
MSIE 5.5
I've seen rather horrible results. I need more testing when I can access to it.
MSIE 5.01
Buggy. I found a workaround, thoug.

W3C Validation#

  • Slowly going on. I'm targetting HTML 4.01 Strict for the moment. Once I have it fine, I'll ensure the css validates, and move to xhtml.
  • Most of it validates currently. You'll need patches for proper list elements nesting, and others to avoid using <u> and attribute COLOR.

Back to CategoryDevelopment

Add new attachment

Only authorized users are allowed to upload new attachments.
« This page (revision-10) was last changed on 21-Feb-2003 02:19 by SantiagoGala