ReadWriteWeb

Just to let you know I've been re-arranging the furniture on Read/WriteWeb over the past couple of days. I went from a 3-column design to a 2-column one and tidied up the CSS. As well as keeping my web design chops up-to-date, I think the layout is a lot cleaner now. I feel like I can stretch my legs out more in this design. Anywho... time to write some more 2.0 posts.

I've been mucking around with my CSS over the past few days. Gone are the vertical grey lines and greeny colour scheme. I've kept the pacific green colour in the site title though, as a keepsake of the old style. Plus that colour is sort of identified with me now and my favicon uses it.

It's all about the whitespace and I've tried to make that more prominent. The homepage has been modified along those lines - I now use excerpts so people can easily scan the content. That's allowed me to include more links to previous posts on the homepage. I've cut back on the content in the menu too - the blogroll and references now have their own pages.

I've reverted to traditional link colours in the body text, as a nod to the oldstyle Web. The only exception is the linkblog content on the right-hand side of the homepage, which needed to blend in more so I used underlined black text.

Regarding the vertical lines, I think I originally had those mainly to show off my table-less CSS design ;-) Well, that and there were (and still are) 3 distinct columns in my design. But now I've gotten rid of the vertical lines, I think because I wanted to free myself from the box-like constrictions they conveyed. A subtle and psychological change, and my reason for it is a bit artsy-fartsy, but hey it works for me.

There are some other minor mods and I will probably do some more tinkering, but then that's the beauty of style sheets. All it takes to change the design of a whole website is some spanner work on the CSS.

Update: I've gone to a centered layout (boooring!). This new design is All About The Whitespace, so it works better if it's centered. I think I'm done now... maybe a bit more tinkering with the header.

For what it's worth, I've re-validated my homepage to conform to XHTML Transitional. Thanks to the people who left comments and emailed me about issues relating to validation. The two main culprits in validation always seem to be the '&' character and non-closed <br> tags. Joe Lindsay also pointed out an undefined html entity in (ironically) my post entitled Funk. That post title is ironic on so many levels :-) Anyway, in that case I changed the French character é from the entity &eacute; to it's numeric equivalent of &#233;. Reminder to self: remember to use HTML Tidy.

This is a boring post about fixing a couple of tedious Internet Explorer CSS bugs. But I want to record it for my own records and for future Google searchers.

1) The IE Italics bug - in the past I used italics whenever I quoted somebody. However on certain CSS designs, italics breaks the width settings of my page for IE users (90-95% of the population). In my design, it stuffed up the right-hand vertical line. Looked bad.

I found a comprehensive explanation and fix for this bug. It worked. Incidentally, positioniseverything.net is a fantastic resource for CSS designers. It covers a lot of other bugs and workarounds - and best of all it provides practical examples to back up the theory.

2) The second bug I never discovered a name for. But here's a description of it: my main content text is is in the middle column and aligned to the left. However the alignment got nudged a couple of pixels to the right at the point where the content in the left-hand floating menu column stopped and the main content continued on down the page. So the bug was only noticeable when the menu content was shorter than the middle column content. Anyways I fixed it by giving the body tag and all div tags below it height = 100%. I got this tip from a designer at work, who'd fixed the same bug on a project website. Here's his explanation (much better than I could word it):

"Because there is no initial height measurement for the html page you can't dynamically force divs past their contained content to the bottom. The inclusion of the 'height: 100%;' in the body tag gives the [content] div a measurement to calculate its height from. So if I give the [content] div a height of 100% it will fill to the bottom of the page (or any px measurement I care to have). Then give the sidenav div a height of 100% so it will fill to the bottom of the [content] div."

Note this also seems to have fixed some jerky scrolling issues in the Mozilla browser.

So that's my latest round of CSS bug-swatting. Do let me know if you spot other bugs. I haven't even tested the old browsers (smack on the hand with a ruler!), but frankly because this is a personal website I'm mainly concerned with Web Standards-compliant browsers.