[thelist] image alignment/layout

[Christian Heilmann]

> My goal is to do this layout using CSS. I'm starting with tables because
> I'd like to see it laid out, and to compare the whole effort after the
> fact.

Why? CSS layout and table layout are a different approach to the same
problem, if you expect them to behave the same way you'll just once
again prove that CSS layout does not allow for as rigid a layout as
tables do. Just let go of the table, first in your head and then in
the page. http://www.wait-till-i.com/index.php?p=172

> Is it evident to anyone why the top half of the logo is floating just a
> bit above the bottom of the cell in FireFox and Netscape? (Opera chooses
> to float the lower right bit *right* a little. Huh. IE makes it look
> like I'd expect.)

Firstly, there is the "images and mysterious gaps" "problem":
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

Secondly, image dimension attributes are not defined with "px" but
simply as integers. Also, white space around img elements in TDs
always caused this kind of trouble.

And thirdly, why bother with XHTML when you "paint" with structure
anyways? Inline style attributes, blank   TDs and visual
attributes like align should be a thing of the past and part of HTML
3.2 web sites back when browsers didn't give us another choice. XHTML
is not only a syntax thing, it is also about modularisation and
separation of structure and presentation.

This layout is dead easy in CSS. The first thing you won't have to do
is to slice the image up and risk these ugly gaps you get now - simply
position the logo as a whole above the lot with absolute positioning.

Sorry to say, but I see this "let's make a table, try to fix it for
modern browsers and then replace the table with CSS that behaves like
a table" approach a waste of time and effort. We do simply not need
table layouts any longer - unless you want to support Netscape 4.x and
MSIE 4 exclusively.

The approach that helps you a lot more - especially in the longer term
when you want to turn this into a CMS template is:

- How do I structure this content to make sense without CSS and Scripting?
- How can I chop the structure up into bits that can become server
side includes (building blocks)
- What is the CSS to make them look the way I intend them to.

A step by step explanation: http://csstoolshed.com/cocking/

HTH

Chris

--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/