HTML help and css

[Corona688]

As part of my ongoing to campaign to convert my website (http://burningsmell.org/) from embedded formatting information to style sheets, I've recently realized I've been committing a major boo-boo all along. I've been formatting my pages with tables! I've been slowly converting from tables to css where I can.


The navigation bar was simple to convert from a single-row table to 4 spans, but the main window area has me stumped. is there something brute-simple I've missed, or does css really not have anything as simple and elegant as tables for row and column formatting? The best I've been able to do for the two columns of my mainpage in css was an abomination where images stopped bothering to even stay inside their div and paragraph elements.

[ceptimus]

You can apply style to the table [TABLE], the rows [TR] and column [TD] elements. I assume also the [TH] ones, if any, though I've never tried that. Where a style is present, it overrides the previous ones, but otherwise the underlying ones show through.

If that isn't flexible enough for what you need, you can define your own classes of style, and apply them wherever you want - to individual HTML elements if required.

You could also consider using frames, but some people hate them.

[lisarea]

You're trying to do a multiple column format for contiguous text, right?

I had to do that once, many years ago, and I thought I had some of those files, but I can't find them. I THINK--and I'll try to find them again to make sure--that I actually ended up cheating and using tables for those, because I couldn't find a way to do it otherwise.

It was several years ago, though, so my memory is probably faulty and the CSS information is probably out of date.

But before I go digging around, I want to make sure I understand what you're asking.

[Corona688]

Thanks for the replies. :) Yes, I'm aware I can apply styles to table elements, which is what I've been working at for the last while, but I've been reading that using tables to format the shape of a page is the wrong way to do it, and I can see the reasoning behind that; it hardcodes the shape of the page instead of making it restylable. Also, changing the navigation bar from a table to spans has reduced the number of tags needed to define it by about 50%. I like that!

And no frames; the idea is to REDUCE the number of pages I need to edit to change styles, not increase it ;)You're trying to do a multiple column format for contiguous text, right? Actually no, I'm trying to do a multiple column format for multiple discrete columns of text. Observe the mainpage (http://burningsmell.org/), with one wide pane for general info, and one skinny column containing newsitems. I've been goofing around with various style options for div and and span, but:
Ever tried putting multi-line stuff in a span? It's uuuuu-gleeee.
The only way I've found to get multiple divs on the same line is to make them floating and specify absolute or relative alignments. Very finicky and lets you overlap stuff by accident.
Outside a table, it's hard to get columns to be aware of each other. I get one thin column and one huge long one.But before I go digging around, I want to make sure I understand what you're asking. Very wise. :)

[JoeP]

If I read your posts and think several times, I may get what you mean, but atm I'm thinking why do you want in-line divs? A div is a block-level element and a span is an inline element, but otherwise they're pretty similiar. See here (http://www.w3.org/TR/html4/struct/global.html#h-7.5.3) and here (http://www.w3.org/TR/html4/struct/global.html#h-7.5.4).

I have not done enough with css formatting to really help you, but I found the following URLs gave me hope (and that means I don't know how good they really are but they're on my look at this carefully list):
http://www.alistapart.com/articles/practicalcss/
http://www.glish.com/css/
http://www.csszengarden.com/
http://www.keithjbrown.co.uk/vworks/design/design_2.shtml

And be sure to keep referring back home: http://www.w3.org/Style/CSS/

[lisarea]

Well, I didn't find my whole files, but I did find enough remnants to confirm that back when I was trying to do what you're doing, I did in fact cheat and use tables to format the navigation sidebar and the content. And I vaguely recall trying really hard to avoid that, so I think I'm pretty safe saying that there was at least no way of doing that without tables a few years ago, at least.

[Corona688]

I see. Thank you for your informative replies everyone! I'll just continue to refine my existing tables.

[xouper]

Corona688: ... the main window area has me stumped. is there something brute-simple I've missed, or does css really not have anything as simple and elegant as tables for row and column formatting?
Looking at your main page, no, I don't think you are missing anything. In many cases css does not have anything as simple and elegant as using a table for page layout. In fact, using css to replicate the behavior of tables is not always possible and in any case leads to its own set of problems, compromises, and weird browser incompatibilities.

I know I will get arguments from the css purists, but I have yet to see an example of css that exactly duplicates the behavior of a table. I could be wrong, though. I do not agree with the css purists that using tables violates the principle of separating formatting from content.

What it comes down to is replacing tables with divs. Divs and tables are both used as containers for page layout. Since tables can be thought of as a special kind of nested divs (in the sense they are block elements), what is to be gained by trying to do it the hard with way divs?

They both have their advantages and disadvantages. I use divs when they are the best choice, and I use tables when they are the best choice. And sometimes I use a combination of both.

Just my opinion, which comes with a money back guarantee. :)

[xouper]

Corona688: ... the main window area has me stumped. is there something brute-simple I've missed, or does css really not have anything as simple and elegant as tables for row and column formatting?
I forgot to add - row formatting with divs and css is usually simple and straightforward. It is column formatting that can sometimes be problematic, and that's where tables sometimes have the advantage.

[xouper]

xouper: I do not agree with the css purists that using tables violates the principle of separating formatting from content.
Before someone complains, I will admit that in one sense, this is not strictly true.

For example, if a page is laid out in columns using divs, then they can be swapped right to left by editing the css. I'm not sure that's possible with table columns.

However, if ones truly needs that kind of flexibility to re-arrange content on a page, I might recommend switching to xml instead.

[xouper]

I guess what I'm trying to say is that if you are having difficulty getting the exact effect you want laying out your page using divs and css, and yet using tables would be easier, then as a practical matter, I recommend using tables. There is no shame in doing that, in my opinion.

Even the css purists admit that if you have lots of content that needs to be arranged in tabular format (for example, a data table with 5 columns and 16 rows), then using a table is appropriate. I see no difference between that and using a table to arrange your entire page in rows and columns.

On the other hand, sometimes using divs and css is easier. It all depends on how you are laying out your page. In the example of your main page, I see nothing wrong with the way you are dividing divs into columns by using tables.

As always, Your Mileage May Vary™.

[xouper]

OK, I'll shut up now. :shutmou:

[JoeP]

OK, I'll shut up now. :shutmou:
All that postslutting and still at only XC posts. :violin:

I understand a bit better what corona wants and I'm tending to agree, tables are better for controlling columns. But I have done some messing about separately and sometime soon I may be back with thoughts. Even answers.

[ceptimus]

You could always use :shifty: frames. :runaway:

[lisarea]

You could always use :shifty: frames. :runaway:

Better yet, if it were still supported, you could use flash tags to distract the users from the formatting problems. Man, that was an effective tool back in the day!

Oh, and what about this? (http://www.positioniseverything.net/threecolbglong.html) I am going to confess that I'm sort of in a hurry and didn't even look through the whole thing, but it seems to address the tableless column problem. Whether it's worth it or not I can't tell you.

[Skep]

You could always use :shifty: frames. :runaway:
cep -->http://skeptech.net/emotipad/cache/FlyingBrick.gif

[xouper]

lisarea: Oh, and what about this? (http://www.positioniseverything.net/threecolbglong.html)
While the attached image is admittedly an extreme example, it clearly demonstrates one of the drawbacks to doing columns that way, trying to prevent content from the middle column from overflowing the column boundary. This is not a problem with tables.

http://www.xoup.net/img/squeezed.gif

OK, so I picked a pathological example to make my point, but the point still stands. As fas as I have been able to determine, it is not possible to use divs/css to exactly duplicate the behavior of tables.

This may not always be a problem, of course. But when it is, then I prefer to use a table. Most times I find using divs to be easier, but not always. And in the example cited above, I would just use a table, and the table bigots (if there is such a thing) can go suck rope. :D

Notice also the css hacks required to get those divs to work in IE. I see that as much more problematic than using tables.

Yes, I guess I am an opinionated bastage. :eek:

[SharonDee]

You could always use :shifty: frames. :runaway:
:glare:

:slapface:

Won't someone think of the lowly users?
:signpls:

[Ray]

I learned CSS from the book, HTML Utopia: Designing Without Tables Using CSS (http://www.sitepoint.com/books/css1/), and would highly recommend you read it. It's got a tutorial in the first section, and a reference manual in the back, and seemed to be both highly accurate and easily readable.

As far as examples go, you can check out The Institute for Unicorn Research (http://ipu.secularlife.org/). The reason I picked up the aforementioned book was so I could convert that site from a table-based layout to CSS, so it should provide a good example. You can find the original version here (http://geocities.com/ipuprophecy/ipu.html), if you want to compare them. (Note that the new version also makes use of a preprocessor, and some of the code may not be necessary for sites that don't.)

[xouper]

Ray: As far as examples go, you can check out The Institute for Unicorn Research (http://ipu.secularlife.org/). The reason I picked up the aforementioned book was so I could convert that site from a table-based layout to CSS, so it should provide a good example.
That's a nice looking site. I took a quick look around, including some peeks under the hood, and aside from the home page, I didn't see any pages that have columns. Without columns to deal with, I agree that using divs is preferable to tables. Can you point me to some examples of columns using css?

Also, were you planning to redo the forum using divs/css instead of tables? Now that would be impressive. :D



Edited to add: I've been using divs/css almost exclusively on my own website (http://www.xoup.net/) for several years.

[xouper]

Speaking of forums, I'd love to see one of those css authors code up a forum such as this one without using any tables. Let's see them really put their money where their mouth is. :D

Does anyone know of such a forum that doesn't use tables? I would really like to know.

[Ray]

That's a nice looking site. I took a quick look around, including some peeks under the hood, and aside from the home page, I didn't see any pages that have columns. Without columns to deal with, I agree that using divs is preferable to tables. Can you point me to some examples of columns using css?

Also, were you planning to redo the forum using divs/css instead of tables? Now that would be impressive. :D
The index (http://ipu.secularlife.org/library/scriptures/) of the Holy Scriptures is also in a two-column layout. One thing I forgot to mention is that there was an issue with the gecko engine (used in Netscape and Mozilla browsers), which has a tendency to render one particular attribute differently than other browers (and, as far as I can tell from the standard, incorrectly), so the two column layouts that use it needed this hack in the php.


if (strstr( $_SERVER['HTTP_USER_AGENT'] , Gecko) ) {
echo "\t<style>#right { margin-left: 1%; }</style>\n";
}
The normal code has the margin set to 51%, which is the distance from the left side of the enclosing div block. Gecko engines interpret it as being 51% from the right edge of the last item in the block, however, which pushes everything to the right, so this code overrides that setting.

Hopefully this issue will be resolved soon, but until then, it's something to be considered. (Fortunately, by doing the hack serverside, there are no side-effects on non-gecko browers.)


As far as the forums go, no. I don't have access to the old forum software, and don't have nearly enough time to make that major a change on the software we use now. Besides, forums are one place were tables are arguably used correctly: each post contains several distinct fields: date, poster name, main text, etc. That's the sort of thing that tables make sense for.

[lisarea]

OK, so I picked a pathological example to make my point, but the point still stands. As fas as I have been able to determine, it is not possible to use divs/css to exactly duplicate the behavior of tables.

DANGBLARNIT!

Man, I was really hoping that these things had finally been resolved.

Like I said, I barely even looked at it before, but yep. You're absolutely right. Dang. Blarn. It. All.


Notice also the css hacks required to get those divs to work in IE. I see that as much more problematic than using tables.

In defense of CSS hacks in general, though, at least if you use external stylesheets, once the bugs are resolved, you could update your site with a single change, rather than having to slog through every single page.

I'm still hopeful that, eventually, there will be a real, workable solution that would allow you to entirely separate content from formatting, but I'm not optimistic that it'll happen with HTML, anyway.

True story: A long time ago, I had this supermonster website that I had to update with some dumbassed universal change, and it was so dull and repetitive (and required eyeballing, precluding an easy scripting update), I ended up subcontracting the work to the Little Muffin to do it. I only paid him like ten bucks, too, and made a tidy profit, but still. In my perfect markup world, there would be no web development work so tedious that bad moms like me could go around expoiting eight year old labor like that. There really does need to be some clean, universal solution, allowing content and formatting to be applied and updated universally, and CSS should be taking care of the formatting end of that.

But you're right that it's not.

What I'm trying to say is that the table solution is still wrong and sloppy, but I agree that it's probably all we've got.

[Ray]

A few other considerations:

CSS is designed to be optional: if it doesn't display well, the user should be able to turn it off and have the site remain accessable, if not pretty.
It's probably a lot easier to write a few hacks to make css work in IE than it is to make tables work in speechreaders and text browsers that don't render tables the same way most graphical browsers do.
There are also a lot of things that can be done easily using css that would be impossible to do with tables, and extremely difficult to with tables and complex scripting. See Project Gutenberg (http://www.gutenberg.org/config/) for an example. A non-css approach to that sort of customization would essentially require serving a different version of the page for each design.
It could probably be argued that after all the effort MS and Netscape made, during their little browser war, to get people to write pages that only worked in their browsers, that there's a sort of poetic justice to pages that don't work well in Netscape or IE because they do follow the standards. Unfortunately, practicality generally requires that we go the hack route to cover up the incompetance of the browser programmers. C'est la vie.

[xouper]

lisarea: I'm still hopeful that, eventually, there will be a real, workable solution that would allow you to entirely separate content from formatting, but I'm not optimistic that it'll happen with HTML, anyway.
That is the stated goal of xml. I'm currently experimenting with using xml for the next phase of my website. The content is completely separate from the formatting and in the server-side translation for delivering a page to a client browser, I am free to use whatever html suits my purpose without ever changing the content. With xml and xsl, I can change the entire layout of the whole website by editing just a small number of xsl files.

[xouper]

Ray: A few other considerations:
CSS is designed to be optional: if it doesn't display well, the user should be able to turn it off and have the site remain accessable, if not pretty.
It's probably a lot easier to write a few hacks to make css work in IE than it is to make tables work in speechreaders and text browsers that don't render tables the same way most graphical browsers do.
There are also a lot of things that can be done easily using css that would be impossible to do with tables, and extremely difficult to with tables and complex scripting. See Project Gutenberg (http://www.gutenberg.org/config/) for an example. A non-css approach to that sort of customization would essentially require serving a different version of the page for each design.
It could probably be argued that after all the effort MS and Netscape made, during their little browser war, to get people to write pages that only worked in their browsers, that there's a sort of poetic justice to pages that don't work well in Netscape or IE because they do follow the standards. Unfortunately, practicality generally requires that we go the hack route to cover up the incompetance of the browser programmers. C'est la vie.

I concur. Those are all excellent points.

I'd like to add, though, that I don't see anyone claiming that tables can do what css can do. I am just saying that css cannot always do what tables can do. There are some features missing from css to do that.

[xouper]

As I commented previously, I use divs and css almost exclusively on my own website. However, the following page is a good counter-example.

http://www.xoup.net/faq/watermolecules.php

I use a table it two places. I challenge any css guru to recode that page using no tables, without changing how it looks, and do it with the same amount of code or less. I am certainly willing to be shown wrong. :)

Notice also that I do my bullet list using css instead of the UL and LI tags. I tried a similar approach for the Q and A div at the top, but I couldn't get the effect I wanted, so I reverted to using a table, which seems simpler.

[Ray]

Well, this is how you would do the Q/A using css.


<div class="qa"><img src="img/q.jpg" width="30" height="30" alt="Q"><p id="question">
How many molecules of water are in one fluid ounce?</p></div>

<div class="qa"><img src="img/a.jpg" width="30" height="30" alt="A"><p id="answer">
About 10<span class="sup">24</span>, which is one
<a class="glossary" href="http://dictionary.reference.com/search?q=septillion">septillion</a>
or 1,000,000,000,000,000,000,000,000.</p></div>



div.qa {
float: clear;
margin-bottom: 16px;
}

div.qa > p#question {
font-family: Comic Sans MS, Verdana, Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size: 17px;
line-height: 23px;
}

div.qa > img {
float: left;
padding-right: 16px;
}


You would also remove the various table-related lines from your css file, of course, so the total amount of code would be about the same.

The spacing isn't exactly the same in both versions, but I'm sure you can get it the same by tweaking the values some. The basic layout is identical, however.

I might do the equation later, when I have some more time. That one will be a bit trickier to figure out.

[xouper]

Well, this is how you would do the Q/A using css.

[snip]

You would also remove the various table-related lines from your css file, of course, so the total amount of code would be about the same.

The spacing isn't exactly the same in both versions, but I'm sure you can get it the same by tweaking the values some. The basic layout is identical, however.
Close enough, since as you say I can tweak the margins and paddings, so that is not an issue. This similar to what I have already tried. However, it doesn't work with longer questions:

Here is your proposed css version:
http://www.xoup.net/faq/watermolecules3.php

And this is the table version of the same question:
http://www.xoup.net/faq/watermolecules2.php

I do not want the text of the question flowing back under the image of the letter Q, which is why I reverted to using a table instead of simulating columns with css.

If I try the same technique I used for bullets, it solves the problem of text flowing back under the image:

http://www.xoup.net/faq/watermolecules4.php

But as you can see, the big red letter A gets clipped on the bottom because the div height does not expand to accomodate it. So I am again back to using a table.

I give you much credit for being interested in attempting this, though.

[lisarea]

lisarea: I'm still hopeful that, eventually, there will be a real, workable solution that would allow you to entirely separate content from formatting, but I'm not optimistic that it'll happen with HTML, anyway.
That is the stated goal of xml. I'm currently experimenting with using xml for the next phase of my website. The content is completely separate from the formatting and in the server-side translation for delivering a page to a client browser, I am free to use whatever html suits my purpose without ever changing the content. With xml and xsl, I can change the entire layout of the whole website by editing just a small number of xsl files.

Yeah, but you'll probably still have to deal with legacy HTML issues just to get your content to display at all in most browsers. I've done XML and other SGML implementations, but it was only ever really workable (at least as of a year or so ago) when it was in a packaged release or something where you could bundle it up with the right browser.

You could make it work on paper, to be sure, but in real life implementation, you'd run into a lot of the same browser problems you do with CSS/HTML. Unless you've got a pretty big site where you're pulling the content in dynamically from a backend database or something, the structural problems are still there. And it's not a very clean transition in any case.

I'm not saying you shouldn't do it. Just that there's a lot of work involved to make your content look basically the way it already looked in HTML. It's not the kind of thing you should do unless you like doing it is all.

[xouper]

Solved it (well partially):

http://www.xoup.net/faq/watermolecules5.php

I took Ray's css for the q&a div and added padding-left to the p tags. However, if the image size changes, this will break. Is this better than using a table, which doesn't break if the image size changes?

[xouper]

lisarea: Yeah, but you'll probably still have to deal with legacy HTML issues just to get your content to display at all in most browsers.
Agreed, but the content is completely separated from the formatting, which I had assumed is what you asked. Perhaps I misunderstood. :)

[Ray]

Solved it (well partially):

http://www.xoup.net/faq/watermolecules5.php

I took Ray's css for the q&a div and added padding-left to the p tags. However, if the image size changes, this will break. Is this better than using a table, which doesn't break if the image size changes?
Considering that this will appear as "Q. Question...<br>A. Answer..." in text browers, and the table version will appear as "Q.<br>Question...<br>A.<br>Answer...<br>", I'd say yes. (Especially when you consider that this was just a 10 minute hack to begin with, and that there's probably a better way to do it.)

(As an aside, according to this page (http://www.xoup.net/faq/watermolecules3.php), the solution to this particular css problem is "About 10^24, which is one septillion or 1,000,000,000,000,000,000,000,000.")

[xouper]

xouper: ... However, if the image size changes, this will break. Is this better than using a table, which doesn't break if the image size changes?
I had to laugh at this today, since on certain other of my pages I have divs that I hard coded the width, and if I want to change that width I will need to edit the graphic. I'm speaking here of the blue quote boxes on pages like this one:

http://www.xoup.net/peeves/nearmiss.php

I am soooo busted!! :eek:

But hey, I did it with css instead of a table. :D

[lisarea]

lisarea: Yeah, but you'll probably still have to deal with legacy HTML issues just to get your content to display at all in most browsers.
Agreed, but the content is completely separated from the formatting, which I had assumed is what you asked. Perhaps I misunderstood. :)

Sorry. My bad for being inarticulate.

I know we have the technology to separate formatting from content--in fact, we had that technology with SGML long before there was even a web. The problem isn't necessarily with the standards themselves, but with the vicious cycle of bad user agents and lazy-assed content providers that has created an environment where you have to use endless cheats and workarounds to get around all the bugs and noncompliant "features."

Dang those...those...large immovable men with the arms that turn around in the wind and stuff.

[xouper]

lisarea: I know we have the technology to separate formatting from content--in fact, we had that technology with SGML long before there was even a web. The problem isn't necessarily with the standards themselves, but with the vicious cycle of bad user agents and lazy-assed content providers that has created an environment where you have to use endless cheats and workarounds to get around all the bugs and noncompliant "features."
No argument from me on that.

[xouper]

Ironically, the way I've been doing my website for the past couple of years sometimes has more separation of content and formatting (and has more flexibility) than either css or tables. I use server-side scripting via php.

For example, here's the actual source code for the question and answer part of that watermolecules page:

<?php beginQA(); ?>

<p>How many molecules of water are in one fluid ounce?</p>

<?php middleQA(); ?>

<p>About 10<span class="sup">24</span>, which is one
<a class="glossary" href="http://dictionary.reference.com/search?q=septillion">septillion</a>
or 1,000,000,000,000,000,000,000,000.</p>

<?php endQA(); ?>
The php functions are in an external file shared by all my faq pages. So if I wish to change the Q&A layout from tables to divs/css, or vice versa, I simply edit one file and leave the content files alone. The user's browser never sees the php, just the generated html.

This is why it may not be so difficult to convert my website to xml. I'm halfway there already.

Here's a possible xml encoding of the above:

<qa>

<question>How many molecules of water are in one fluid ounce?</question>

<answer>About 10²⁴, which is one
<glossary href="http://dictionary.reference.com/search?q=septillion">septillion</glossary>
or 1,000,000,000,000,000,000,000,000.</answer>

</qa>
For my content files, that's seems a bit cleaner to me. Using server-side translation of the xml to html, I can make that look just like my pages look now (or almost anything else) and your browser would be none the wiser. But on my end, from the point of view of website maintainance, I will have completely separated content from formating. By using xml in this fashion, I would have far more flexibility in altering page layout than I ever could using just css and divs. Given the extensive use of php throughout my website, I'm almost there now (with a few critical exceptions).

[Ray]

I used a similar approach with the IUR. I store common content in separate files, and include them with php, and also have a few special variables that allow small amounts of content to be inserted into the included files.

For example:

<?php
$title = "Science";
$style = "science.css";
include("header.php");
?>

<h1>Science Proves the IPU</h1>

(content removed for brevity)

<?php include("footer.php"); ?>


Excerpt from header.php

<title><?php echo "The Institute For Unicorn Research - $title"; ?></title>
<link rel="Home" href="http://ipu.secularlife.org/index.php">
<link rel="Contents" href="http://ipu.secularlife.org/sitemap.php">
<link rel="Help" href="http://ipu.secularlife.org/help.php">
<link rel="stylesheet" href="http://ipu.secularlife.org/style/site.css" type="text/css">
<?php
if (isset($style)) {
echo "<link rel=\"stylesheet\" href=\"style/$style\" type=\"text/css\">\n";
}
echo $header_extra;
?>