Category: HTML

CSS vs. Tables

CSS, HTML, Old Blog Comments Off

At the Barnes&Noble the other day, I came across this Eric Meyer book on CSS and skimmed through it a bit. ‘turns out, there’s this great big controversy over laying out websites using CSS instead of tables.

I’ve been away from the “web development scene” a bit since I started my new job last May. I knew that CSS was da bomb y’all and it could do a lot of powerful things that nobody was using it for, but I just didn’t realize how much of a movement this has become.

I feel like a dinosaur. I’m an old school html hacker, using tables to do a stylesheet’s job. I’m inefficient, redundant, and out dated. Soon I’ll need to include special loser-denoting tabs in my html to tell the browser how lame and antiquated my web development skillz are (a la Doctype tags).

I’m not so convinced that I’m going about things incorrectly though. I basically agree with what this guy has to say.

This whole CSS vs Tables issue became even more relevant for me when I downloaded FireFox 1.0 and took a look at my site in that browser. The table cell on the right-hand side of the page was all scrunched-up-like. Even though I had code that looked like this…

<tr>
<td width=575></td>
<td width=175></td>
</tr>

…the right sidebar was only as wide as the longest word in the cell. I even did the trick where you put a 175 pixel-wide spacer image in the cell. This would make sure that the cell was “at least” 175 pixels wide, but it was often much wider. Actually, the biggest problem wasn’t that I couldn’t get the cell to be exactly 175 pixels wide. It was that the size of the cell seemed random. On some pages it was too narrow, on some it was too wide. I want one size, folks… 175 pixels like the code says. How comes IE can get this concept, bug FireFox can�t?

So I googled the problem. And I wasn’t too excited when the first couple of sites that came up gave the answer of “just switch to an all CSS layout and this problem will go away.” Nah, I didn’t buy it. I want a table cell 175 pixels wide. There’s got to be a way for me to tell the browser that. I put “width: 175px” all over the place in my stylesheet, but no change.

I searched some more. After about 30 minutes, I found a real explanation of what was going on. You can read into it more at this w3 site. In general, the problem is in the table rendering method. IE calculates every cells size before rendering a table. FireFox, on the other hand, looks at the just the first row and estimates the rest. The result is that FireFox renders tables much faster since they don’t need to wait for the entire table to load before writing data to the screen. However, FireFox also drops the ball by not noticing things like “width=175” in a cell on the third row.

There is a “fix” though… at least for my site. CSS has a “table-layout” attribute. To the main table class, I added the following CSS code “table-layout: fixed”. This didn’t turn FireFox into IE or anything, but it at least let me know that both IE and FireFox would render the table in the same way. Specifically, according to these rules (from the earlier w3 link):

    1. A column element with a value other than ‘auto’ for the ‘width’ property sets the width for that column.
    2. Otherwise, a cell in the first row with a value other than ‘auto’ for the ‘width’ property sets the width for that column. If the cell spans more than one column, the width is divided over the columns.
    3. Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

Now in both IE and FireFox, my website looked the same though still “wrong”. The left section of my third row now took up 50% of the table and the right side took up the remaining 50%. The size of the page “columns” is based on just the first row. Since my first row contains just one cell, my table looked like a one-column table. When the third row was rendered, it was just split in half. The width of the third row had been “divided over the columns”. To fix this, I setup a dummy first row with my wanted division. I added to the top of my table the following row:

<tr height='1'> <td width='575' height='1'></td> <td width='175' height='1'></td> </tr>

Now I have a two-column table. When the render-er gets to my fourth row now it splits it up like it did the first row (575 … 175). And the result is what you now see on my site: the requested table division with an added 3 pixels of gray at the top. It’s possible that adding this row would fix the problem without altering the table-layout attribute in CSS. But like I said before, it’s good to know which algorithm your browser is using to render tables rather then leaving it up to whim.

I hope this can help anyone else out there with a similar problem. Now back to the original topic… I like CSS and all, but I hope people don’t go too overboard with this thing. If it ain’t (that) broke, don’t use some other broke-ass piece of technology to get it done.

Making the Blog Part 1

HTML, Old Blog, PHP Comments Off

I created this website to give myself an outlet for my creative urges. I imagined myself writing fictional masterpieces weekly and creating scores of compiled computer games, all of which I would upload to this site. Well, that’s only partially happening. I’m actually encouraged with my progress. However, as is common with a lot of blogs (I assume since I’m not really that big of a blog-o-file), I find myself mostly writing about my writing implement.

The situation may be special for me since I’ve written this blog “software” myself. I’m so proud of this accomplishment and each new feature that I add, that it is sometimes difficult to set those feelings aside and think of other “content” to put here.

I also started thinking about the random lack of focus this site empowers and how that it would be very difficult for me to create something here that will be consistently interesting to people other than myself. This is why I created different “topics”. I imagined people visiting my site because they were interested in me (my family) or interested in my poetry (sick minds) or interested in my games (the extremely bored). Overall though, I always really understood that this blog/site is more than anything self-fulfilling. I’m most interested in venting this stuff for my own good. As of now, whether or not anyone else takes notice is secondary.

Despite all that, and in an effort to produce some genuinely useful content, I’m going to start a series of posts entitled “Making the Blog”. The idea is to talk in detail about the various aspects of building this beast from the ground up. Even though there are numerous commercial products like those from six apart, books on blogging, and even open source options, I feel that if you are capable, building your own blog from scratch can be very satisfying. I feel much more ownership over this production and the words scrawled here than I would have otherwise. You can too.

So, if you’ve written some code before, dabbled in PHP and mySQL, or know a little html, you might be interested in this feature. I hope to provide anyone interested with the code and understanding necessary to make your own blog like mine (in PHP).

Undoubtedly, as I add new features to my site, I will expand on the “Making the Blog” series by bragging about and explaining the newest goodies. Excuse and ignore me if you must since blog software is already available. Excuse me if someone else has already created a feature like the one I describe here. You can, as always, consider this exercise another one of my masturbatory self-indulging mind dumps. But I truely hope I can produce something useful with this.

Thanks.

– Making the Blog Part 2