Pervasive Smothering

Ooook, this one will be a large update. I guess this has been my first official attempt at theming WordPress. I’ve still got some more work to do. Unfortunately, this theme lacks flexibility in that you have to enter your categories manually using get_links(). I’m going to try to make this the least inflexible and release the code, version by version. This first one is version 0.1.

I’m writing this post because I need feedback. I feel that the theme looks nice enough for now, although the feel doesn’t differ much from the default WordPress theme. I need to change the text color a bit, including colors for the links and sidebar links. This theme is mainly about Compliance… hence the name. It validates as XHTML 1.1. It is served as application/xhtml+xml, but will degrade gracefully to HTML 4.01 Strict and text/html if the browser doesn’t support application/xhtml+xml. The JavaScript used also degrades nicely, in that the Sidebar menu starts expanded and is only collapsed by JS.

This was achieved by using the moo.fx javascript library for the effects, and I also adapted the code that is currently used in their homepage (I lintified it a bit, though. I also used Neil Crosby’s PHP script for serving appropriate MIME types. I also followed Dean Edwards article that shows you how to overcome the lack of support for a common ‘onload’ event in all browsers.

I encountered some weird bugs while adapting the moo.fx script. I’m such a JavaScript newbie to have a say in the matter, but I discovered (or learned it the hard way, for that matter) that Firefox’s way of handling the DOM (like a tree diagram of the html in the doc.) is a bit weird… it counts a line break as a node!!111 (sic). I expected it to ignore any useless whitespace and take only elements into account…

Anyhow, I did some research and found out that, indeed… some browsers behave in a different way when it comes to whitespace. Check out these three references.

Using JavaScript and the DOM allows you to write in a page after it has loaded… it can help you write into a specific section like all those AJAXified pages do. But in this case, it is used to accomplish in a dynamic way what CSS Selectors can do in a static way.

Anyhow, I need to know about browser compatibility… so if any passers-by can give me some feedback… I’ll thank you for that. So far I’ve tested it only on two browsers (IE, and FF).

So far here is the ‘test list’:

• 
• 
• 
• 
  • 6.0 on Windows XP SP2
  • 6.0 on Windows XP SP1
  • 6.0 on Windows ME
  • 5.? on Windows or Mac
• 
• 
• 

Legend: means ‘not tested’, means ‘works ok’, means ‘works, but is buggy’, means ‘totally fails, dude’.

According to QuirksMode, the script shouldn’t be much of a problem, since it manipulates nodes. Though I’m not sure about the moo.fx script.

Well, about IE6 on XP. It renders the page in a buggy way… the text shows up as if it were text in a really low quality jpg image:

A bit off topic, but it needs to be said. While designing the header, I had chosen these set of styles and finally decided upon #3, but I then realised that even though its 2006 now, there isn’t an easy way of distributing fonts needed to render a webpage properly. Bummer.


#header1, #header1 a, .description1{
font-family: Alba Super;
color: #000000;
background-color: #ff6e00;
}

#header2, #header2 a, .description2 {
font-family: Batik Regular;
color: #ffffff;
background-color: #0091ff;
}

#header3, #header3 a, .description3 {
font-family: OldgateLaneOutline;
color: #FFFFFF;
background-color: #000000;
}

#header4, #header4 a, .description4 {
font-family: 'Trebuchet MS', Helvetica, Sans-Serif, Verdana;
background-color: #73a0c5;
color: #ffffff;
}

h1, h1 a, h1 a:hover, h1 a:visited, .description1, .description2, .description3, .description4 {
line-height: 1.2em;
letter-spacing: 0;
text-align: center;
word-spacing: normal;
text-decoration: none;
}

In other news,… I start my final (hopefully) semester as a college undergraduate. By the end of June I will be a Chemical Engineer. Woot!

This means I’ll be once again posting seldomly. Thats too bad, really. I felt like I was getting the hang out of scripting and design. I really wanted to make this theme something and that could be visited even by users in handheld devices. I just finished adapting some tips and styles from CollyLogic about designing for better handheld browsing (also see this for handhelds and CSS). There is still so much more room for improvement, but I’ll leave it like that for now.

After reading a lot to check about good design habits, and the like, I think I can finally say that my blog is not in any sort of HTML Hell for now.

Well, looking back at what I wanted to do during my vacations I can say that I didn’t accomplish the following:

• Make custom section about music and recent tracks using Cache_Lite and either MiniXML and XSLT or XML_Transformer
• Learn Python
• Loose a few kilograms
• Install a couple of cool WordPress plugins
• Do the same for my del.icio.us feed, and for other web services as well, like El Oso did (who btw has a great blog design).
• Finish all those darned drafts I have waiting to be published.

Oh well, enough for now. I guess I’ll just publish this and move on. If I go on a bit more, this might turn into one of my ‘ramblings‘.

Update: I tested the page in Internet Explorer 5.? in a Mac, and also in Safari. Safari passes the test. Unfortunately, Internet Explorer doesn’t. It fails it miserably. Argghh.