From: dadaIMC Support <support-AT-dadaimc.org>
Date: 27 Jan 2004 17:16:48 UTC   (11:16:48 AM in author's locale)
To: "dadaIMC Discussion" <dadaIMC-AT-lists.dadaimc.org>

On Jan 26, 2004, at 4:45 AM, Mike Tonks wrote:

> I have received some local feedback about the new dadaIMC site for
> bristol indymedia.
>
> It is suggested we should use valid XHTML and css, which gives much
> greater control over the layout etc, and is much better for
> accessibility.

dadaIMC has slowly been heading that way release-by-release. It does
already use almost-entirely HTML 4.01 STRICT code, and already uses
perfectly valid CSS. I've been trying to maintain a modicum of
backwards-compatibility, at least to NN 4.x, and I've been
understandably wary of making the jump to CSS positioning of any sort
because of the disparate interpretation of positioning values and
behavior across browsers.

There are some big CSS pitfalls when abandoning tables: floating the
columns to the left or right can be problematic, as any background
colors and borders in the center column will "bleed" under the floating
columns in an aesthetically nasty way. Plus, floating the left and
right columns will make the center column (if it's longer than the
sidebars) expand below them at the bottom. We don't want that; we want
immutable columns all the way down to the footer.

If you avoid floats, and use absolute positioning in a
"header/3-column/footer" sort of way, there's a problem with
variable-length content overrunning the footer. See the current
dev2.dadaimc.org/index.php page (DefaultXHTML theme) for an
example of the problem. Basically, the gist is this:

-----------header-----------
| |
----------------------------
------------root------------
| | | |
| c1 | c2 | c3 |
| VL | VL | VL |
| R | A | A |
| | | |
| | | |
| | | |
| | | |
| | | |
----------------------------
-----------footer-----------
| |
----------------------------

VL = Variable-length, R = Relative positioning, A = Absolute positioning

In this scenerio WITHOUT tables, the header DIV is displayed fine. Then
the "root" container DIV is drawn, containing columns c1,c2,c3.

c1 has relative positioning, since it's location in the HTML
corresponds to the position we want. The HEIGHT of the "root" DIV is
governed by the height of c1. The footer is displayed below the root
container (just below the bottom of c1).

c2 and c3 have to use Absolute positioning (the only way to get DIVs to
sit NEXT to each other, rather than stacked), and that means that their
HEIGHT is _not_ used to calculate the height of the "root" DIV. That
means that the footer will be displayed below c1, but c2 and c3 could
have content that bleeds over the footer div.

If you can solve that (in a cross-browser manner), then we may be on to
something.

In theory, I fully support the move to XHTML, but only if/when it is
capable of manipulating the content to achieve the desired layout. The
www.indymedia.org.uk site uses absolute positioning effectively
for its current content, but it would be virtually impossible to put a
footer across the bottom that spanned all 3 columns _in such a way that
it would work no matter which column was the tallest_. It works fine if
the Features are the longest column, but not for the other two. Trust
me, I've been working on it for 2 days!

Certainly MANY other elements of the site could be converted to
XHTML-compliant code, which still gives you the layout flexibility that
you want. But until the basic page structure can be done in pure XHTML
without huge content-overlapping problems, the fundamental table
structure will remain. But hell, I'd love it if someone would prove my
analysis wrong!


> I have made a start on this although my template is not yet complete,
> I have asked for feedback and assistance / advice from the local list
> and I invite input from this list or from anyone around the world that
> may be able to help - please forward on this request.
>
> My sample page is currently here:
>
> bristoldev.ath.cx/template/xhtml_template.html
>
>
> Note that my css file currently uses float to position the columns,
> but there is also the absolute positioning method, as seen at
> www.indymedia.org.uk
>
>
> I am suggesting that we find a best practice XHTML file and a number
> of alternative style sheets, with different arrangements of the
> columns, for example. This could then be merged with the latest dada
> cvs snapshot an included in the next release, so long a spud agrees to
> it :)
>
> In general, all the layout is removed from the html [php] code.
>
> So bye, bye, bye to
>
> <table cellspacing=... >
> <tr>
> <td>.....
>
>
> and welcome <div id="feature">...
>
> I don't know how many table tags I have deleted so far, bit it is a
> lot!
>
> I have found the wc3 validator service to be extremely usefull.
>
> validator.w3.org/check
>
> Cheers,
>
> Mike
>
>
> From: Mike Tonks <mike-AT-bettercode.com>
> Date: January 25, 2004 5:56:43 AM EST
> To: underscore-AT-under-score.org.uk
> Subject: Best Practice XHTML / CSS - layout questions
>
>
> Following on from some excellent feedback I received from this list
> the other week, I have stripped the imc template as far as I can, and
> replaced all the tables with div's.
>
> Both the xhtml and the css now validates, but I am unsure about how to
> manage the columns [left, right, middle column].
>
> Both mozilla and IE render the page differently, and neither is quite
> what I am after.
>
> I have created a "Classic BIMC" stylesheet which is currently set as
> an alternative style sheet.
>
> Would anyone care to contribute some improvements, alternatives or
> suggestions?
>
> bristoldev.ath.cx/template/xhtml_template.html
>
>
> Thanks in advance,
>
> Mike
>
>
>
>
-------------------------------------------------------------------
a.h.s. boy
spud(at)nothingness.org "as yes is to if,love is to yes"
www.nothingness.org/
-------------------------------------------------------------------

-------------
To unsubscribe, send blank email
to dadaIMC-off-AT-lists.dadaimc.org