Go to previous post:
Mission accomplished.

Go to Electrolite's front page.

Go to next post:
Here’s what a hero looks like.

Our Admirable Sponsors

August 9, 2003

Asking for help. I’ve said before that most of what I know how to do with HTML and CSS is, essentially, “cargo cult programming.” Other, far more technologically advanced sites parachute code onto my primitive island; I then whittle away at it, trying various genuflections and incantations until I get some sort of reasonably pleasing result. Every so often I come across a useful instructional document, and so long as the words aren’t too long I can make out what they’re saying if I read slowly and move my lips.

However, there’s a time for incantations and then there’s a time for straight-out pleading. What I want is a third column on Electrolite’s front page; specifically, an additional (narrow) column to the left of what you’re reading right now. I don’t have a strong preference about how the overall layout should degrade on pre-1024x768 displays, just so long as it degrades gracefully. What I don’t want is to have to start from scratch with somebody’s pre-rolled CSS template, because I’m not sure I’ll ever get everything else back to the way I want it if I disrupt the site’s internal ecology that abruptly. I’ve googled “three column CSS” and tried a bunch of recipes, none of which quite worked (and apologies to anyone who came here in the last couple of hours to find columns wandering all over the screen).

Electrolite’s readers are a savvy lot. My existing CSS style sheet is viewable here; I suspect more than one of you could glance at it and say “Add these four lines, delete these two, fix that margin statement and Bob’s your uncle.” I have nothing to offer in exchange save for worldwide fame and the thanks of a grateful nation. Well, maybe a recent Tor hardcover or two. Okay, three. [08:23 PM]

Welcome to Electrolite's comments section.
Hard-Hitting Moderator: Teresa Nielsen Hayden.

Comments on Asking for help.:

Seth Ellis ::: (view all by) ::: August 09, 2003, 09:28 PM:

Here's the hack-like solution I know.

It looks like your page is organized into two major divs, called "content" and "links." "Content" starts with these elements:

float: left;
width: 70%;

As I'm sure you know, this causes "content" to, well, start at the left and go on for 70% of the screen. Then "links" occupies the other 30% of the screen by default.

Two columns is all you can do with the CSS "float" property. So, to create 3 columns without redoing your whole stylesheet, here's what you can do:

- divide the total page into 2 columns.
- further divide one of those columns into two columns.

There's an example of that here. In the case of your page, a possible solution would be:

- contain both "content" and "links" in another div, called, say, "whole_shebang."
- create another div classification in your stylesheet called "further_goodness", float it left as well, and define its width.
- include this div in your HTML before the "whole_shebang" div.

By the way, if you're adding stuff, would you consider adding a Google search for the blog archives?

Steve ::: (view all by) ::: August 09, 2003, 10:09 PM:

I'm not a CSS guru...however, I've been pretty happy so far with my three column layout. It seems to render ok with both IE and Mozilla (netscape). If you take a look and it seems like what you have in mind I'll take some time tomorrow and modify your style sheet (there's not much change needed) and send it to you to try out.

Graydon ::: (view all by) ::: August 09, 2003, 10:27 PM:

Looks pretty good in Konqueror, too. (Which Electrolite currently doesn't. This may be a side effect of a very beta Konqueror...)

James D. Macdonald ::: (view all by) ::: August 09, 2003, 10:39 PM:

http://themodulator.org/ also looks good in Opera 7.1

Seth Ellis ::: (view all by) ::: August 09, 2003, 11:16 PM:

Steve -

I'm afraid modulator.org is looking a little funky in IE 5 on PC. I'm getting the search & recent entries column overlaying the main content column.

Simon ::: (view all by) ::: August 09, 2003, 11:21 PM:

Patrick, if it matters to you, everything in your right column underneath the header word "WHO" disappeared from my IE5 display a day or so ago and hasn't come back.

Seth Ellis ::: (view all by) ::: August 09, 2003, 11:25 PM:

Oops. I meant themodulator.org, of course.

Steve ::: (view all by) ::: August 09, 2003, 11:54 PM:

Seth,

Thanks for the heads up. I did have the problem you describe with 6.0 in an early version of the style sheetand admit to testing only with 6.0 where it looks just fine at the moment. Which version of 5.x are you using? I'll try to track down a 5.x version and test it.

NB: While a fairly small % of my visitors ride in on 5.x there are enough that I'm surprised one of them hasn't nailed me on this before. Of course, there is always the microsoft support answer: upgrade to the current version....:)

Dave Pentecost ::: (view all by) ::: August 10, 2003, 12:16 AM:

Patrick

I arrived at my 3-column MT layout by the same cargo cult route. And since I'm sitting up here in the Adirondacks listening to the rain, I'll describe the process, so you can have the satisfaction of genuflecting to the blog god until he delivers.

Seth's suggestions are good but I don't think you want both the left and middle columns to be fluid, as in the example he pointed to. The left can be fixed width, and the resolution of the monitor can vary and it'll still look good.

And I think Steve could do it for you (his layout looks good) but you probably want to change your Main Index template also. I'll explain how I did it and you can decide. If you like, email me your Main Index template and I will do it for you, but as you'll see it's not all that complicated.

Ready to genuflect?

First of all, if you are monkeying with your layout and don't want it to show online, copy your Main Index template (all the text), create a new template called Main Index Experiment that ouputs a file called index2.html, and paste the text into that template. Save and rebuild of course. Then you can check on the results of your hacking by looking at http://nielsenhayden.com/electrolite/index2.html and your public site won't be affected.

As for the CSS style sheet, you just have to add 3 new divs to the end of it, for the left column, the middle content, and the right column. Mine look like this (with credit to where I swiped the basic elements):

/* These are CSS elements borrowed from webgraphics.com */


#left {
9position: absolute;
9width: 190px;
9top: 100px;
9left: 10px;
9}

#middle {

9margin-left: 185px;
9margin-right:185px;
9voice-family: "\"}\"";
9voice-family: inherit;
9margin-left: 191px;
9margin-right:191px;
99}
9html>body #centercontent {
9margin-left: 191px;
9margin-right:191px;
9}


#right {
9position: absolute;
9width: 190px;
9top: 10px;
9right: 10px;
9font-family:georgia, Times, "Times New Roman", arial, serif;
9}


Now, you want to change the output file of Main Index Experiment to index2.php. Why? Well, this is really all the PHP I know or need right now - with PHP, you can "call" a separate html file, like a subroutine. It's called an include.

So all I need to do to have a left column is insert this in the template, after the banner code and before the blog content:


(that's in my site, obviously)

You still want to put your middle section and the right column into their new containers, so you enclose those sections of the template in these tags:

9. 9. 9.

and

9. 9. 9.

(As I said, email me your Main Index template and I can do this if you like)


Next you create a new template called Left Column that outputs leftcol.html. Copy bits of your right column tags into it (like sidetitles, etc.) if you are as lazy as me, and edit it for new content. Some folks would make new Middle and Right templates that output middle.html and right.html, then use includes for those also (makes for a compact index and easier editing of each section) but I didn't bother.

And you are done.

Done monkeying that is. If you want to make it public, copy all the text of Main Index Experiment and paste it into Main Index. Make sure that Main Index is outputting to index.php and then save, rebuild, and the world sees the new Electrolite.

I'll see what I can do to make the 3 new divs correct for your site and then email them to you. My right column in The Daily Glyph is screwy because it starts all the way at the top of the page, overlapping the right end of the banner. So it'll take a little tweaking. But not much.

There. Happy to help. I've enjoyed reading Electrolite over the last year or so. And I've got to come out of the Lower East Side to hear your band one of these days!

Saludos
Dave

Dave Pentecost ::: (view all by) ::: August 10, 2003, 12:22 AM:

Damn! If I'm so smart, why didn't I remember about code in MT comments - it disappeared!

Sorry folks. I'm a little bleary. Patrick, I'll email it. And I'll figure it out and send another comment for the rest of you. But at least you see the gist of it.

Dave Pentecost ::: (view all by) ::: August 10, 2003, 01:43 AM:

Okay, I've got it.

Here's the first missing example, about PHP includes:

<! -- left column -->
<div id="left">

<? include('/home/www/gomaya/glyph/leftcol.html'); ?>

</div>

And here's the second, about the new div containers for the middle content and right column:

<div id="middle">
9.
9.
9.
</div>

and

<div id="right">
9.
9.
9.
</div>

In case you need to know, the easy way is to run the html through the Quick Escape tool here:

http://www.accessify.com/tools-and-wizards/quick-escape.asp

and then paste the results back in the comment (or post).

Hope it helps somebody!

Charlie Stross ::: (view all by) ::: August 10, 2003, 06:30 AM:

Before you go with a three column layout, please think long and hard. This will break browsers on haldheld devices like my Palm Tungsten C. Normally, handheld devices have two solutions to displaying multicolumn text gridded out via tables: to ignore the table markup entirely (in which case you usually get the first cell -- i.e. left column -- then the right cell -- i.e. sidebar), or to try to display a tiny window on a huge page. It gets confusing, fast.

I'm a strong believer in content over design, with design in a purely subordinate role. This may not be to your taste. But right now, I can read electrolite on a PalmOS machine (although Making Light is a real pain because the blogroll is on the left, i.e. you've got to scroll through the entire thing before you can get to the content). If you make this change, I won't be able to read it on the move any more.

mark ::: (view all by) ::: August 10, 2003, 07:08 AM:

It's easy these days to get a multicol design without tables (easy if you know how, of course, and if you ignore the whole "browsers suck" bit...), so handhelds (do handhelds support CSS? Tell me "no" :-)) shouldn't have a problem then.

I'll work on a solution now, Pat, that doesn't involve cobbling together :-), and email you.

(BTW, HTML is not programming. I know, it's a bit pedantic for those who aren't web designers. It's kind of a pet hate, I guess... see:
http://www.cs.tut.fi/~jkorpela/prog.html )

Seth Ellis ::: (view all by) ::: August 10, 2003, 07:37 AM:

Steve - It's IE 5.0. Good luck.

Dave - Yowza. That's some code. One thing, though: The example I linked to had columns of equal width (33%), but of course you could just as well define the width of any of them as an absolute (width: 190px, for instance). Fluid columns aren't required.

Mark - I'd be interested in hearing the general solution you have in mind, either here or in email.

Dave Pentecost ::: (view all by) ::: August 10, 2003, 10:20 AM:

If you are concerned about handhelds, give the content section its own middle.html and use a PHP include (as I mentioned some folks would do) in the template. Then a link to that, near the top of the left column, would let Charlie and others bypass the left column and go straight to the posts.

That'd be an easy change to Making Light also.

BTW, Charlie, "Lobsters" was a kick!

dave ::: (view all by) ::: August 10, 2003, 10:25 AM:

Hi,

make all the navigation stuff appear after the content on Lynx (or similar on palms, etc) is simple.

If everything is defined as DIVs, just put the content DIV first, then the various navigation/sidebar DIVs. A compliant browser will do the right thing, and lynx will show the divs in the order they appear in the html.

(check out the website referenced above. It should look fine on Mozilla, funny in IE (although this is to do with other layout issues) and content first in Lynx.

dave

Mary Kay ::: (view all by) ::: August 10, 2003, 11:04 AM:

Simon: I've had that problem. It goes away when I make my window as big as I possibly can get it. I don't understand why this is and whether it is the fault of my browser or some peculiarity in Electrolite's design. However, it only seems to happen with Electrolite and Making Light, so...

MKK

Dave Slusher ::: (view all by) ::: August 10, 2003, 11:29 AM:

I'm farting with my CSS right now too. I'm curious what the upside is to doing the tabular layout entirely in CSS vs. tables. I've seen a few references that make the assertion that CSS is superior, but I don't understand why. For a wag, I might try doing what I'm currently doing as a table with CSS but I'm not sure I get why that is inately better.

Patrick Nielsen Hayden ::: (view all by) ::: August 10, 2003, 01:16 PM:

On the general subject of handhelds, lynx, "links," etc., it occurs to me that a link at the top left to the current monthly archive page--which has no sidebars whatsoever--would largely do the job. Or am I missing something?

Dennis Slater ::: (view all by) ::: August 10, 2003, 02:24 PM:

There is a very good tutorial at http://www.glish.com/css/ that shows examples of various CSS layouts that might be helpful. This is where I started. I use HTML-Kit to try out my HTML before revising my template in blogger. (http://www.chami.com/html-kit/ - free)

You didn't ask for general opinions about your layout. I will volunteer mine for whatever they are worth. I like your layout. It is clean and neat, easy to read, and contains excellent support features that all first class blogs need: comments, trackback, sidelights, recent, and the links. Blogs without comments are deformed from my point of view. If I do not have the opportunity to praise or condemn or interact with fellow travelers I will not waste my time reading what the blogger has to say.

I particularly like your right hand column (you could have guessed that). If you go to 3 columns your informative right hand column is probably going to have to be reduced from 300 pixels to 200 or fewer pixels (on my monitor using a 1024x768 pixel screen resolution) which will make the information in that column now difficult to read.

Eschaton has 200 and 215 pixels (on my monitor) side columns. Eschaton's main column posts and blog begging are very short and lend themselves well to a three column layout. His side columns consist of very short entries. Yours posts are much longer than his and may go on for several screens unless you use smaller font size. I hate blogs that use microscopic font sizes (make quick note: get rid of suspected freeper by reducing font sizes).

My blog is 2 columns with a header. I considered 3 columns but that would have meant that I would have had to find some meaningful content for the 3rd column. Also I was concerned about readability of the main column because I write long posts and I wanted to have pictures.

Side note: A couple of good, easy to use design tools that I like are a caliper used to measure the width and height of pictures, columns etc. and a color picker. Both are free at http://www.iconico.com/caliper/ at http://www.iconico.com/colorpic/index.asp). I used them a lot when I was designing my blog.

James D. Macdonald ::: (view all by) ::: August 10, 2003, 04:03 PM:

The Electrolite triple column looks good, runs fine in Opera 7.11.

Patrick Nielsen Hayden ::: (view all by) ::: August 10, 2003, 04:10 PM:

Jim, if you're referring to our brief tenure with three columns a few minutes ago -- I took it down because while it worked well in Safari and Mozilla, it was choking MSIE. I've been emailed another suggestion which I will try later -- other real life intrudes.

Dave Pentecost ::: (view all by) ::: August 10, 2003, 05:12 PM:

For what it's worth, the solution I gave you works in Mozilla, Safari, and IE with very minor differences in look. And the columns don't disappear when you resize it. I'm holding off on sending revised divs until everyone weighs in.

Eddie Cochrane ::: (view all by) ::: August 10, 2003, 05:24 PM:

Can I second Dennis Slater's recommendation of http://www.glish.com/css/. I use a 3 column layout based on the 3 column stylesheet offered on that site (or at least I will be as soon as I get my site transferred to my new ISP). As for the comment about viewing on a Palm that Charlie mentioned, you could use seperate media type dependent stylesheets. As you're using a link, just add an extra one for the alternate stylesheet with media attribute, e.g.

LINK rel="stylesheet" href="foo1.css" type="text/css" media="screen, print"

LINK rel="stylesheet" href="foo2.css" type="text/css" media="handheld"

The W3C page on media independant stylesheets is at http://www.w3.org/TR/CSS2/media.html#q1
Only just discovered this myself 2 days ago.

hamletta ::: (view all by) ::: August 10, 2003, 05:58 PM:

I'm curious what the upside is to doing the tabular layout entirely in CSS vs. tables.

1. Smaller file sizes.

2. Greater accessibility for readers with handicaps. Someone using a screen reader doesn't get stuck with disjointed information reading across table cells. You can augment this with additional enhancements like skip navigation and access keys for readers who can't use a mouse.

3. The ability to change the look of the whole site by changing a file or two; or provide multiple style sheets and allow readers to select their favorite.

Glish has a great collection of examples, as does The Noodle Incident, and Eric Meyer's css/edge has some funky CSS tricks that I've stolen liberally. Jeffrey Zeldman knows all, tells all; and his Web mag A List Apart is chock-full of tutorial goodness.

Dave Pentecost ::: (view all by) ::: August 10, 2003, 06:00 PM:

Thanks Eddie, good tip. Now I gotta get a handheld!

David Levine ::: (view all by) ::: August 10, 2003, 06:14 PM:

The problem Simon mentions above, that everything in the smaller column vanishes unless the browser window is at least some minimum width, affects me too (and I'm using the latest IE browser). Making Light has had the same problem for some weeks.

The source of the problem seems to be that if the column isn't wide enough to contain the picture, the picture and everything below it vanishes. This is a questionable design decision (possibly even a bug) on the part of the browser implementer, but as with so many things in the web we are stuck working around Microsoft's (and occasionally the Mozilla team's) stupid mistakes.

Please don't force the user to resize their browser window (or, for some users, to buy a bigger monitor) to see all the content.

mark ::: (view all by) ::: August 10, 2003, 08:12 PM:

There's two possible problems for Mary Kay, Simon and David L. One is that IE5 has a bug in its implementation of "float:" which means it'll only scroll as far as the DIV you're floating things around, even if the floating DIV is larger. I think that's fixed in IE6, but in some designs I've seen the floating DIV randomly disappear and reappear upon link mouseovers, which is very odd. The other is that if there's not enough room for the floated DIV and the non-floated "anchor" DIV, the float with disappear below everything. Um, I *think* it's the float (I rarely use "float:", and when I do it's not for layouts -- I don't trust IE's handling of it) that disappears, but it might be the other DIV. One of them gets displayed below the rest of the content, anyway.

Links, Lynx and w3m have three major issues you've got to beware of: 1) they're text-only, so images must be provided with relevant ALT text (or "hidden" (effectively) from text-only browsers with ALT=""), 2) they don't support CSS, so you must use correct HTML if they're going to be able to differentiate one set of text (e.g. headings) from another, and finally 3) they haven't got mouse support, so you don't want to have them spend five minutes navigating with the keyboard just to get to the content. Um, actually I think it's possible to use a mouse in virtual *nix terminals, but my *nix version of Lynx is spitting the dummy ATM (sort of), so I can't check.

The best way to get around "3", that I know of, is to stick the not-main-content DIVs at the bottom of the page (with absolute CSS positioning it won't make a difference where it is), with a link at the top of content/bottom of header saying "skip to navigation". Then at the bottom of the sidebar DIVs, optionally put "back to content". Say for example <a href="#links"> at the top and <a href="#content"> at the bottom. Use CSS (display: none;) to hide these two links from graphical, CSS-supporting browsers.

This way, users of non-graphical-CSS-supporting browsers (especially text-only mouseless browsers) don't have to scroll endlessly through days and weeks of content.

Dave Pentecost ::: (view all by) ::: August 11, 2003, 12:00 AM:

Hello? Maybe the reason mine works is that it doesn't use "float" and still gets the same results. With no bugs. Even IE 5.2 is happy.

In Seth's words, "Yowza. That's some code."

Not that I can claim any credit for it. Just found it. And webgraphics.com doesn't seem to be be online anymore. Just a splash page. Hmmm...

Anyway, I just found (again) the best tutorial for this technique. http://www.glish.com/css/7.asp

They call this 3-column layout the Holy Grail. Has anybody read "The Da Vinci Code"? Will anybody admit they've read it?

Mary Kay ::: (view all by) ::: August 11, 2003, 02:12 AM:

mark: I'm afraid most of what you said is Greek to me. I don't use IE of any version; I use Mozilla. I probably need to upgrade my version of Mozilla, but I still point out that it's only Electrolite and Making Light where this happens. Not that I'm about to quit readnig either...

MKK

Seth Ellis ::: (view all by) ::: August 11, 2003, 09:04 AM:

That's interesting; I usually use a Mozilla browser, and yesterday I looked at the site in IE 5, and I don't get that error either way. Given that, and that people have been saying this problem has only cropped up lately, I suspect that the issue is the sheer amount of content in the main column (according to my browser, the Making Light homepage is 125K of text).

On both blogs, the sidebar comes after the main column in the page's code, and so all the main column has to load before the sidebar is displayed. It may be that your browser just isn't getting to the end of the HTML file for some reason (you click on something?) and then when you resize the window, the page reloads. Or there may be a missing tag somewhere, but then you'd think it wouldn't work for me.

Including only the last two weeks of posts on the home page might be the answer. I don't know a technical solution; maybe more coffee will help.

Dave Slusher ::: (view all by) ::: August 11, 2003, 10:33 AM:

I'm looking at the gish 3 column "holy grail" layout and playing with it in a "test" blosxom flavour (http://www.evilgeniuschronicles.org/cgi-bin/blosxom.cgi/index.test for those masochistic enough to look at it). I think there is a serious problem with this strategy, though, in that everything is pixel based in the CSS. You have a banner, and you tell the columns that they are N pixels from the top. Well, how do you know that this is an appropriate number of pixels? If one of the reasons for doing this style of layout is for greater accessibilty for those with reduced vision, how do you know they don't have the font cranked way up? Maybe 50 pixels is no longer enough for a banner. That's the thing with tables, they are not as adaptable but you know that they will flow with the font size if you change it.

Is there some way to make these 3 columns stick right under the banner without having to specify an absolute pixel distance? Something like a "Start where the other stops" functionality would be nice.

Adam Rice ::: (view all by) ::: August 11, 2003, 10:51 AM:

Dave S--The preferred alternative to px is em as a unit of measure--this makes everything relative to your base font size. It can be tricky to make this work, and on my own site, I've taken a cheap way out by using a graphic (which doesn't change size, of course) for my banner), and used px to position around that, and em for the main text body.

Also strongly recommended is to define a base font size for BODY or HTML, so that "em" has something to scale from. I've seen some web pages where "rootless" em sizing results in really, really tiny text.

Mary Kay ::: (view all by) ::: August 11, 2003, 01:14 PM:

Okay. I don't know what's happened now, but even making my browser window as big as possible, I'm not seeing most of the right column on both blogs.

MKK

Seth Ellis ::: (view all by) ::: August 11, 2003, 01:36 PM:

It just started happening for me on Making Light, since Teresa published her fun summer projects post. I really think it's a file-length issue, though I can't back it up with the technical cause.

Patrick Nielsen Hayden ::: (view all by) ::: August 11, 2003, 01:53 PM:

Actually, it's because she gave a post a name that's one very long word, and it ain't wrapping on the sidebar. We're fixing it now.

Mary Kay ::: (view all by) ::: August 11, 2003, 02:33 PM:

Yay! Both blogs now have everything in place and my windows can go back to normal size. Thank you thank you thank you!

MKK

Dave Pentecost ::: (view all by) ::: August 11, 2003, 03:11 PM:

My last comment, I promise. Yes, both sites work in IE 5.2 but Electrolite still loses the right column at narrower screen widths in Mozilla and Safari, and Making Light loses everything in the left column from the photo down. Who knows?

mark ::: (view all by) ::: August 11, 2003, 07:35 PM:

It's alright, Mary Kay, it didn't make sense anyway, given that I wasn't paying enough attention to what you and Simon reported. Sorry for shooting the mouth off like that :-)

Dave Slusher ::: (view all by) ::: August 11, 2003, 09:29 PM:

Well, I do ike to do things the right way, obey standards, and generally Feel Like I'm On Track. After some of this discussion I gave it my best effort. However, when I pulled up IE and Mozilla and looked at the same CSS side by side, each of which had a number of issues that the other one didn't, I shrieked "Whoa nelly jesus in the morning, my life is too short to try this CSS on every permutation of browers and platform until it is right!" I'm leaving my layout in tables until this is important enough to me to tackle, which has a strong chance of being never.

Patrick Nielsen Hayden ::: (view all by) ::: August 11, 2003, 09:42 PM:

I'm glad to know I'm not the only person who spontaneously cries out "Who nelly jesus in the morning" at faulty Web code. Perhaps we could organize a barbershop quartet.

Dennis Slater ::: (view all by) ::: August 12, 2003, 04:04 AM:

My brain will explode if I try to make my blog conform to every browser's idiosyncrasies. Being a rightwinger makes the blogging life easy for me. I use IE therefore IE is the Truth and the Light as far as I am concerned. Anyone using those other heathen browsers can go to hell or to another blog they can actually read if mine fails to behave properly for them.

mark ::: (view all by) ::: August 12, 2003, 07:28 AM:

Well, at the moment I've got it working in IE6/Win, Moz1.4/Win, Opera7/Win, and Safari/MacOSX.

I can assume from that that all/most derivatives of Gecko and KHTML also have no problems.

Unfortunately, IE5/Mac causes the right-hand side of the middle column to go vanishing under the right-hand column. If anyone knows anything about the idiosyncracies of IE5/Mac and CSS2, please contact me by email.

Kynn Bartlett ::: (view all by) ::: August 13, 2003, 01:09 PM:

I really should write up something about this.

I just spent about an hour yesterday getting the new Shock and Awe layout to work effectively in Windows IE.

Other browsers worked just fine on standard code.

You can view the new stylesheet at http://shock-awe.info/styles/sa.css -- let me know if the site itself has any problems in your browsers.

--Kynn

Kynn Bartlett ::: (view all by) ::: August 13, 2003, 01:12 PM:

Hamletta wrote:
Someone using a screen reader doesn't get stuck with disjointed information reading across table cells.

While I obviously believe it's good to be concerned with users with screen readers and other people with disabilities, it's important to note that disjointed text from table cells has not really been a problem for years.

Older screen readers couldn't handle it. All modern screen readers do. And older screen readers are as likely to have problems with CSS layouts as with HTML layouts.

--Kynn

Seth Ellis ::: (view all by) ::: August 13, 2003, 02:23 PM:

Hey! It's working! Is this the final solution? I mean, in a CSS way? It looks clean, works fine.

Congratulations to whoever brought IE to heel.

Jon Hansen ::: (view all by) ::: August 13, 2003, 02:47 PM:

And it also looks nice in Netscape 7.1. Fabulous!

Kynn Bartlett ::: (view all by) ::: August 13, 2003, 03:21 PM:

Okay, my post on three-column layouts via CSS -- as implemented on the Shock and Awe site -- has been posted on my technical blog, .

You can read it at http://www.maccessibility.com/archive/000792.php.

By the way, I agree that the new Electrolite site looks marvy! There are several ways to get three-column layouts reliably in CSS.

--Kynn