position: relative;

I’m on a mailing list with a group of professional women designers and developers. There’s lots of conversation flowing and it occasionally turns very lively – as it did yesterday when a member posted about her frustration with CSS and continuing attachment to tables. It ignited a veritable firestorm of commentary! It was fun to read, but it did help me clarify a few reasons that I love CSS and think it’s worth the time of any web professional to learn it. Note I didn’t say ‘master’ it, because I don’t think there are a whole lot of people that can do that, but learning? That’s one of the reasons I’m in this profession, because I like to be challenged.

Anyway here are five things that I think are major advantages of CSS over tables:

1. You can put things where you want them. When I was using tables I used to get so frustrated with having to line things up under the cells above them and split cells into more tables and more cells just to get the layout to work the way I wanted it too. With CSS and absolute positioning, relative positioning and floats, I don’t have to think in advance how I’m going to slice up my design to fit – I can put elements where I want them to go. As a designer this was the key reason I switched to CSS in the first place.
2. Shorter code. Now for a small page it doesn’t make a lot of difference as far as the length of code. But I worked on one client’s site (70+ pages) where every page was full of nested table after nested table after nested table. Cleaning up one of those pages – converting it from tables to CSS – often meant a reduction from 1,000 or more lines of code to 400 or less. Over the entire site, that’s a huge difference. The pages load faster, they take up less room on the server. Not a benefit for SEO, but certainly a big one for users with slower connections.
3. Content first may be better for SEO. With tables, the page is read by the search engine in the order it appears in the code and presented that way on the page. But with CSS and positioning, I can put my big headline and block of content up near the top of the page and drop the navigation, header, sidebar and footer to the bottom. That means that Google gets to the meat of the page right away instead of wading through a lot of code.
4. Easier maintenance. Having rewritten the aforementioned table-based site, I can tell you it can be a nightmare trying to keep track of multiple nested divs on a 1,000-line page. Once the site is converted to CSS, maintaining it (either yourself, your client or another web developer) is so much easier, faster, and cost-efficient.
5. Better for your clients. I firmly believe that not providing a client with clean, well-written code is a big disservice. They’re paying you to be a professional and CSS is a professional’s tool (just one of them, but a key one). When you provide a client with a well-built site that allows them to change the entire look and feel of their website experience with just a little work, rather than a redesign, that’s huge.

I will now step off my little soapbox and slide it back under the table.

I know that learning CSS can be tough; I liked the challenge (one of the reasons I’m in this profession) but I certainly wouldn’t call it intuitive. However, taking the stand that one is not going to learn it because it’s just not that important, that I can’t understand at all.

Tables have their place, for display of tabular data, but they were not intended to be a layout device.

I’ve been using Adsense on my blog for awhile now (with little result) and am now in the process of changing that practice. For one thing, I don’t like the limited number of advertisers I have to choose from in the industries I’m interested in. And second, I just don’t like seeing all those obvious Google-based ads.

I’m trying an affiliate program that has (1) a big selection of good companies and (2) not a lot of self-promoting jargon surrounding the ads. And my policy will be that I only host ads for companies and products that I’ve actually used and would feel comfortable recommending to any reader. I’m not interested in hosting mystery ads anymore, so this is how it’s going to be for awhile.  I’ll mix up text and image ads, not have too many running at a time because I’m not interested in being a billboard.

This morning I posted a link to a page I’m working on that has a tricky CSS problem on an excellent women-only mailing list hoping to get some pointers. I just got one, and it started with ‘You have a beautifully-organized CSS file.’

That’s one of the best compliments I’ve received and it’s especially cool coming from another developer that I consider to be of equal caliber. A nice thing to come home to after a few hours of surgical-strike shopping.

This is really good.

I’ve been using a service called MyFax for a couple of years now, and since my account came up for renewal today I was doing some price checking among other services. I decided to stick with MyFax for now, since it’s only $10 per month for sending and receiving, but I did find this nifty tool for Internet fax price comparisons.

I received my email newsletter from Good Experience this morning and wanted to share.

Catalog Choice is, in short, a really good website experience. It has a simple design, comfortable colors and an elegance of purpose – the point of the site is to remove you from catalog mailing lists. That’s it. Sign up, find the catalogs you regular receive, and mark the ones you’d rather not see anymore.

A clear focus, an interface that doesn’t get in one’s way, and an easy to understand series of actions to get to the results. That’s a really well-designed website in my book.
I signed up, we’ll see in 8-10 weeks whether it’s working.

The last post was about making registration marks look superscripted without the use of the tag, which disrupts line spacing. I mentioned that I was having a problem getting my relatively positioned class to work in IE.

The symptom was that the registration mark (®) stayed fixed in the middle of the page when one scrolled. That baffled me until I found out what it was – the IE resize bug.

To fix this, all I had to do was make sure that the containing div for the registration mark (in this case, the main content div for the text part of my page) was also set to position: relative. Easy fix.

When you insert a registration mark (®) into your HTML, it comes in pretty much right in the vertical middle of the line. It looks weird there, as many a client has pointed out to me. They’d like to see it superscripted and I agree that’s where it looks most appropriate.

So you might try superscripting it (^®) but this presents another problem. It also inserts a little bit of extra space above the line that contains it, throwing off the line spacing if it’s tight.

How to have a nicely superscripted registration mark that doesn’t destroy the even spacing of text? Try this – works in FF, Netscape and Opera…

In your CSS file:

span.reg {
position: relative;
top: -3px;
font-size: 10px;
}

And in your (X)HTML:

®

Now in IE6 and 7, what I see when I implement this is that the mark looks fine until I touch the scrollbar – then it (and all the other marks with the same class) stays put on the page (like it’s fixed) while the rest of the content moves. It looks like IE6 and 7 don’t like ‘position: relative;’ in a span tag? I’m not sure. Looking for answers about this issue now.