Bruce Lawson’s personal site

When I was a little boy, my school coat had a label in the back, with room to write my name on. When I hit secondary school in 1974, coats had an extra space for a phone number. In 2005, my six year old’s new coat shows that phones are so last millennium.

Woh!! Teenage - or rather, early twenties, angst. There was half an hour at the end of a long recording session so we quickly did this - and kept it, sandpaper throat, microphone pops and all, due to our being out of time and money. It was a staple of the live set, the rest of the band nicknaming the song “One for the ladies” due to its popularity with the girls in the audience.
Continue reading Song: “Closing My Eyes”

Although my xhtml always validated, there were still presentational elements in the markup: for example, the #header div had an anchor to the home page that was coded

<a href="index.htm"><img src="bruce-logo"
height="xx" width="xxx" /></a>.

That was replaced by

<a href="index.htm"><span>Home page</span> </a>, using the css:

#Header h1, #Header a {display:block; background:url(images/bruce-logo.jpg) no-repeat center;width:auto; height:176px;}
#Header h1 span, #Header a span{margin-left:-5000px;}

That has the added semantic bonus that, on the homepage where has no link to itself (cos Jakob commanded me), the page title is a header, rather than a simple <img> in the header, thus paying me Google dividends.

Similarly, the "ransom note" images for main nav were just a collection of images separated by <br /> tags. That needed to be moved into the css so that the images could be changed on a stylesheet switch. This is a bit more cumbersome. Here’s the xhtml:

<ul id="mainnav">
<li><a id="home" href="index.htm"><span>Home page</span></a></li>
<li><a id="music" href="music.htm"><span>Bruce’s music</span></a></li>
<li><a id="about" href="about.htm"> <span>Who is this wanker?</span> </a></li>
<li><a id="nav-photos" href="photos.htm"><span>Pics and stories</span></a></li>
<li><a id="writing"
href="writing.htm"><span>writing stuff</span></a></li>
<li><a id="links" href="links.htm"><span>links page</span> </a></li>
<li><a id="email" href="mailto:bruce%20AT%20brucelawson%20DOT%20co%20DOT%20uk"><span>send spam</span> </a></li>
</ul>

and here’s the CSS

ul#mainnav {list-style:none; margin-left:0px; padding-left:0px}
ul#mainnav a {display:block;}
ul#mainnav a span {margin-left:-5000px;} /* replace text for main nav buttons */
a#music {background:url(images/music.jpg); width:200px; height:72px;}
a#about {background:url(images/about.jpg); width:184px; height:46px;}
a#nav-photos {background:url(images/photos.jpg); width:200px; height:66px;}
a#writing {background:url(images/writing.jpg); width:200px; height:68px;}
a#links{background:url(images/links.jpg); width:190px; height:77px;}
a#email{background:url(images/email.jpg); width:200px; height:88px;}
a#home{background:url(images/nav_home.jpg); width:200px; height:88px;}

I don’t particularly like all the <span>s there for image replacement, and am toying with the idea of using the Image Replacement—No Span technique, but that requires polluting the CSS with box model stuff for IE5 (do I really give a shit about IE5?), so my internal jury is still out.

I decided to show a message about why Internet Explorer is shite, and a link to get Firefox on the main page, but obviously only wanted to show it to IE users.

Initially, I had a div named #firefox, and defined it in the css as display:none, then overrode that definition with the * html hack that only IE understands. Therefore, non-IE browsers wouldn’t display it, and IE would accept the over-ride, and display the browser upgrade message:

#firefox{display: none;} /*don't show the Firefox ad in good browsers */
* html #firefox {display:block;} /*show Firefox ad to IE */

Thinking about it, though, I realised that I was switching content on and off rather than styles, so should be using the xhtml rather than the css for that, cause xhtml is about content and CSS is for style.

So, I changed the CSS so that #firefox was displayed to all browsers, and surrounded the html code with an IE-only conditional
comment:

<!--[if IE ]>
<div id="firefox">
blah blah blah
</div>
<[endif]--->


The html content is only parsed by IE (and thus takes the default style in the CSS). Non-IE browsers never use that CSS, as they never see the #firefox markup.

Now, the content is controlled by the markup, rather than the CSS. Anally retentive, moi?