In light of the many other redesigns recently, I figured it’s about time I actually implemented my redesign that I’ve been developing for the last month or so. I’ve had this design on my homepage for quite a while, but it hasn’t been ready for site wide implementation until now. The main things holding me back were the menu not working in Opera, and having no SSI set up to include the common features, such as the page header, sidebar, footer and the document head section so that I could easily include stylesheet links.

The colour scheme for this actually took inspiration from Dave Shea’s Proton design. I liked the blue and yellow contrast, but I didn’t want to use the exact same colours. So I downloaded a copy of Colour Wheel Pro, and had a play around until I found some nice colours. Though, I do intend to, one day, produce some alternate style sheets with different colour scheme, but the same layout. I also intend to come up with a completely different layout, but that can wait for a while — this one was hard enough.

I didn’t want to use a fixed width design because for many sites that do, I sometimes wish it were slightly wider, or slightly thinner. But, I didn’t want to go for a completely fluid design because I didn’t want it getting too wide for users who don’t understand about line length, and have their window maximised. So, to get the best of both worlds, because I don’t care much about IE, I decided to make the whole content (including main content and side bar) 80% of the width of the window, the further constraints of min-width: 600px; and max-width: 800px;. With a 250px side bar, this makes the main content range from 350px to 550px. Plus, there is a 5% padding on the side of the main content column. This makes the line length vary from 315px to 495px. This is farily close to the recommended measurements in this Daily Flight article.

For the drop down menu, the initial complication I had was to figure out how to get the borders to overlap. The first difficulty was working out the measurements for widths, margins, paddings and borders. The menus are 33%, 34% and 33% of the width, respectively, of the content column and thus stretch the content stretches when you resize your window. The borders are 10px wide on either side. In order to create the overlap, it required a reasonably complicated addition and subtraction of borders and margins in appropriate places and correct positioning to ensure the overall menu was the correct length, in the right position and the borders overlapped exactly. z-index was used to bring the menu currently being hovered to the front, so that it’s borders overlapped the adjoining borders. The rounded corners were achieved using -moz-border-radius. Of course that means it only works in Gecko based browsers, but until CSS3’s border-radius becomes a recommendation and is supported, there’s no point using it. So, they’re just a bonus for Mozilla users — it’s nothing detrimental to others at all.

After extensive testing and failing to achieve the columns using floats and absolute positioning, I realised that I’m not supporting IE fully for this site. (infact, there is only one IE hack in the entire file, to prevent menu overlapping the content). So, the columns were achieved using the display properties: table, table-row and table-cell. The table-row is redundant, but I had to add an extraneous element to get around a strange bug in Mozilla that caused the side bar to move below the content if either contained content wider than the cell. This was a problem when I launched this style on Net Twits because of some preformatted text, using <pre>, in some articles. There are still some bugs, I’m working on them, and most of them seem to be in Mozilla, and can be fixed by doing a refresh of the page. I don’t yet know why.

The side bar style is yet to be completed, but I’ve applied some very simple styles so that I could at least launch It, and get on with the rest of the site. You can expect to see some big changes to the side bar over the next couple of weeks.

My next problem will be ensuring that everything works in Safari. I’ll be getting a Mac soon, but until then, I’m sorry if it doesn’t all work correctly. If you can help, let me know and I’ll apply any fixes you send me if they don’t break any other browser in the process. (If it breaks IE more, I don’t care, as long as the content is still at least readable.)