On 05.10.2010 04:28, Nick Sabalausky wrote:
"Walter Bright"<[email protected]> wrote in message
news:[email protected]...
Stewart Gordon wrote:
The layout breaks in anything but the default text zoom.
The annoying thing about this is everyone says "don't use tables for
layout, use CSS." Except that using CSS for layout DOESN'T WORK RELIABLY.
With tables, I can get 3 columns that are actually 3 columns, not 3
columns that are a side effect of bugs in CSS.
YES!! This is a pet peeve of mine (but then, what isn't? ;) ). I've even
been meaning to write up a little article about it. For styling, CSS is,
umm, acceptable. But it's crap for layout. And every argument I've seen
against using tables for layout has been either extremely minor,
questionable/uncited, or just plain bullcrap.
Speaking of, if anyone has links to well-regarded "why you shouldn't use
tables for layout" information, please post them. Whenever I get around to
doing that little write-up I'd like to try to refute as much as I can. Or be
proven wrong before making a bigger ass of myself. Either way :)
The point in not using the table _element_ for layout is that HTML
should be used to define the _content_ of your page not its appearance.
It's all about what kind of data you have at hand: a heading, a list,
tabular data, a figure with an image, etc. It says nothing about how the
page is supposed to look, it's just the pure content.
After defining the content the appearance is setup with CSS. And there
table layouts are used pretty often (if not always). If you don't care
about older IE versions you can use "display: table" and companions.
Basically these display properties just make elements behave like the
corresponding HTML elements (e.g. "table-cell" maps to the td element).
Prior to that CSS only had mechanisms for defining float layouts (the
"float" property) but these can be used for table layout, too. It's not
that difficult but it's less flexible. All you need is a container with
"overflow: hidden". To create columns inside it just set some child
elements to "fload: left". This will look like this:
-- overflow: hidden ----------------------
| |
| -- float: left -- -- float: left -- |
| | | | | |
| | | | | |
| | | | | |
| | | ----------------- |
| | | |
| ----------------- |
| |
------------------------------------------
This method works quite well, only IE 6 makes some trouble because the
floats trigger some bugs (but if you add a few pixels of reserve space
it will be all right for IE 6). The main drawback of this method is that
the floated boxes are independent of each other, each gets its own
height and with. If you want them to have a consistent layout you have
to assign fixed widths and highs. There are some workarounds for this
(e.g. using a repeating background image on the container) but I suppose
I already talked to much about CSS.
Basically it's all about separation of content and presentation. It's
not always easy (nor always necessary) but if done right you don't have
to touch the HTML code for your next redesign (and the search engines
are very happy about proper HTML code, too).
ps.: I'm usually only reading this newsgroup because I'm somewhat new to
D. But I couldn't resist answering about CSS. ;)
Happy programming
Stephan Soller
