Above the Fold: The Blog

As documented yesterday, I managed to get the ‘acorns’ in the left-hand navigation bar fixed but had to take them out of the right-hand bar because I couldn’t replicate the trick. A little midnight musings brought the answer.

The code for the left-hand navigation elements is adapted from gavlinne’s original suggestion on the webdev journal:

div#nav-left ul#nav {
padding: 0;
margin: 0 0;
list-style-type:none;
}

div#nav-left ul#nav li {
margin-left : 25px;
float : left;
}

/* Hide hack from IE5/Mac \*/
* html div#nav-left ul#nav li {
margin-left: 12px;;
}

div#nav-left ul#nav li a:link,
div#nav-left ul#nav li a:visited,
div#nav-left ul#nav li a:hover,
div#nav-left ul#nav li a:active {
color : #813817;
text-decoration : none;
display : block;
padding : 7px 5px 7px 35px;
margin: 0;
background: url(images/acorn01.gif) no-repeat left center;
}

div#nav-left ul#nav li a:hover,
div#nav-left ul#nav li a:active {
text-decoration : underline;
}

This all forced IE to see the ‘acorns’ my specifiying all the states of the a: tage and works perfectly well for a single-level navigation bar. In this blog, the right-hand navigation bar has multiple layers and for once IE displayed them as I intended when using this code, but Firefox didn’t. That’s actually a sign of IE playing up rather than Firefox, because Firefox quite rightly got confused by the float:left and sent things everywhere. The code above had an extra layer of ‘ul li’ added to anything that originally stated ‘ul li’, but there was nothing clearing those floats so the first layer of the list confused itself.

The trick was a slight adaptation below (in bold):

div#nav-right ul {
padding: 0;
margin: 0 0;
list-style-type:none;
}

div#nav-right ul li {
clear: both;
padding-top: 20px;
}

div#nav-right ul li ul {
padding-bottom: 20px;
}

div#nav-right ul li ul li {
margin-left : 25px;
float : left;
padding-top: 0;
}

/* Hide hack from IE5/Mac \*/
* html div#nav-right ul li ul li {
margin-left: 12px;
}

div#nav-right ul li ul li a:link,
div#nav-right ul li ul li a:visited,
div#nav-right ul li ul li a:hover,
div#nav-right ul li ul li a:active {
color : #813817;
text-decoration : none;
display : block;
padding : 7px 5px 7px 35px;
margin: 0;
background: url(images/acorn01.gif) no-repeat left center;
}

div#nav-right ul li ul li a:hover,
div#nav-right ul li ul li a:active {
text-decoration : underline;
}

That was the only adapatation needed and it worked like a dream. A little bit of fiddling with padding to ensure that the category headings don’t bump into each other, and the navigation is now working as intended in IE6, Firefox and Opera.

Although I suspect that it still explodes nicely in IE7.

With a little help from a friend, I managed to fix the acorns in the left-hand menu! It turns out that IE gets thoroughly confused occasionally and needs some elements specified in the CSS down to the nth degree before it will work properly. Sadly, I haven’t been able to replicate the same trick on the right-hand menu so I’ve done a little hacking around so that the right-hand menu has no acorns. Poor, deprived menu.

The acorns are still there in all other sensible browsers, though.

That trick also doesn’t work with the blog post titles, so they’re still being hacked around to work dully in IE and work in full, maple-leaf glory in Firefox, Opera etc.

One day, Microsoft will release a browser that actually does the same things that other browsers do and we’ll be able to junk all the hacks. Until that day, we just have to find new ways to work with the ‘undocumented features’.

Having a day off is always pleasant, although I always seem to end up doing useful things regarding websites rather than curlcing up in an armchair with a book. Ah, well.

In that useful things category, I have PHP-ed Above the Fold. It now has navigation, headers and footers neatly seperated out and modularised, making page creation that little bit simpler. A couple of ifs and switches allows me to feed titles and h2#id values into the header, personalising each page, and differenciate between different levels of navigation with ease. All that I now need to supply is a couple of variables and the includes and all of it is taken care of.

Maybe editing pure PHP files isn’t as “clever” as using a template class would have been, but for something this small it didn’t seem worth digging out the PEAR classes. Maybe when I start designing some new web apps for this site. Hmm

I also took the time to add a page for the Larren Art site. This lanched a couple of weeks ago and I’m very happy with the end result. You can read more about the design process in the Larren project page.

I am still humming and hawing about including a link to my fannish website on my CV. On the one hand, it’s host to my biggest and best web app - PHP/MySQL backbone, accessible, simple to use and surprisingly popular. It’s got login facilities for registered users and differing levels of access for the admin.

On the other hand, it’s fannish and doesn’t really feel “right” for a CV that’s supposed to be relatively serious.

When I graduated from university I was filled with excitement and, in my own opinion, the kind of knowledge that employers should have been desperate to grab. Unfortunately there were around twenty million other IT graduates with the same kind of enthusiasm and knowledge, all of them much better at selling themsevles through CVs and interviews than little old me. But I did find a job. No the perfect job by any stretch of the imagination, but a good job with a blue chip company that will look good on my CV. In many ways, this job has been the real test of what I learnt through university.

The world definitely does not work in the clean, whizzy ways that unversity convinced me it would. My job as an analyst has turned out to require a lot more software development than I’d expected (phew!), but we are primarily data analysts so many of the principles that I learnt in unversity don’t fit with my department’s work methods. In fact, most of my colleagues have maths degrees. The strange thing is that I’m learning just how valuable some of methodology taught at uni was. Planning out a project and using standard coding conventions just isn’t something that’s done in my department. User requirements before beginning the project? Pah! Modelling the tool before building it to make sure that it does what people want? Never going to happen. Re-working the entire project after finishing because the internal customer actually wanted something different? Every day occurance.

I do what I can with my work, trying to make my code readable without random ‘x’ variables appearing for no apparent reason and using sensible commenting, but as time goes by I’m realising just how sensible many of the techniques taught at uni were.

Take databases as a random example. My courses at uni emphasised the importance of good indexing and using primary keys. Our data warehouse uses multi-set tables as standard in all commonly accessed tables, which means that indexing is often a joke. You try your best to write good SQL using the indexes, but the primay index on those tables does not identify one record. Whenever I’m creating tables in our little hidden corner of the warehouse I go with what I know and try to index correctly because it actually does make a difference in query efficiency when you’re dealing with tables containing millions of rows rather than the few hundred rows that I played with at uni.

And I seem to recall despairing over ever understanding grouping properly at uni, yet now I write queries with half a dozen table joins, derived tables, grouping all over the place and even the odd HAVING declaration with no problems at all.

I guess you really never learn to do things properly and confidently until you actually do them for real.

I’ve been wandering around in the backend of this blog and discovered that it’s really very cool. The template system is incredibly powerful and uses PHP, giving me a chance to play around a little more in PHP. It’s also heavy on the CSS, something that I’ve really been getting stuck into over the last eighteen months. I’ve built a site from the ground up using PHP and a MySQL database, but this should be interesting because it’s a case of taking advantage of PHP functions that already exist.

I’ve already been able to customise this template slightly, makign the text re-sizable in IE, although the subheadings on the sidebar don’t have quite as much top margin as they should. Drat IE and it’s non-standardisation! But I’ve had a look at the codex and can see how I can sort the Blogroll links by name, although I’ll need to sit down and back-up the current template before I do anything extensive to it. Never hurts to be careful

That, of course, is why I didn’t lose an entire day’s worth of work when the power went out at work today. Obsessive saving and version numbered back-ups. Learnt from four months of working on flaky Windows NT computers with frequent visits from Dr Watson.
I’m being dull and techy already. Must remedy that.