Jump to main navigation


Category: English

Multiple background images with CSS2

Here's an interesting way to add multiple background images to an element using CSS2. Before anyone gets too excited, since this technique uses generated content it doesn't work with IE6 nor IE7. Maybe IE8 will support generated content, but who knows.

Still it's fun to try, and if you can ignore IE, then this might be useful sometimes. It works in Firefox 2/3 and Opera 9 under Windows XP, at least.

In this article I'll first guide you through a basic example, and then we'll create a nicer box. Read the full text...

Styling table captions with CSS: fixing the width problem

Styling table captions with CSS is not always an easy task. The specific issue I'll be dealing with in this article is the fact that the width of the caption doesn't naturally fit the width of the table. First I'll introduce the problem and then present a cross browser solution. Read the full text...

New (modified) JavaScript syntax highlighter: SHJS

I was having a few problems with the syntax highlighter I was using for the code blocks in this blog, so I decided to look for an alternative. There are a few out there, but my choice went to SHJS. I liked it straight away, although I wanted a couple of features that are not there. So I got my hands dirty and wrote some code to implement them. Here's a description of what I've done, in case someone has similar needs. Read the full text...

Applying CSS to Opera only

[Edit: 080828] This hack targets only Opera 9 and below, but fails in (at least) v9.52. You should not use it unless you're specifically targeting Opera 9 and below.

If you ever need to apply certain styles to Opera only, there is an easy way that I found in Jeff Starr's post, 'CSS Hack Dumpster'. All you need to do is prefix your selector with html:first-child.

For example, let's see how you would add a left margin of 10px to all paragraphs in all browsers except Opera:

p {
  margin-left: 10px;
}

html:first-child p {
  margin-left: 0;
}

This hacks validates and seems reasonably safe. As always, it's a risk to use hacks in your CSS (what would happen if, say, Internet Explorer 12 matched html:first-child? Any websites using this hack wouldn't work correctly in IE12). I'm still going to use it though, it seems quite safe to me.

Image replacement experiment

One of the problems with existing methods for CSS image replacement is that when a user is using a browser with CSS on but images off, the replaced element is not visible at all. There is a solution to that, but it implies using this sort of HTML:
<h1><span></span>Some text</h1>, which I find rather ugly.

Lately I've been playing around with generated content trying to find a solution that solves the above described problem, without the use of any extra markup. Obviously this won't work in IE6, not even 7, but apparently IE8 will support generated content, so why not give it a go? Read the full text...

Whole-Play bugs

I'm still working on milestone 2, and it's taking much longer than I thought, because I'm finding quite a few bugs, which often are not easy to fix. The problem is that the code is getting longer and longer, and even though I'm trying to keep things well organized it's still getting complex and parts of it are a bit messy. Logic errors are quite tricky, because they manifest in very abstract ways, like an unexpected chord happening. Then tracking the errors down to the bit of code that's triggering them is a long (but somehow exciting!) process.

So at this stage, what I need to continue developing is: i) Patience, ii) Focus, iii) Enjoy! Just keep going, I'll get there. :)

Whole-Play update

I seem to be a bit stuck on the harmony analysis task, it's been a long time since I started it, and there's still a lot to do. Well, I didn't expect teaching Chuck some harmony would be particularly easy... Read the full text...

Whole-Play update

I haven't updated for a while, partly because I've been too busy with web work. That doesn't mean Whole-Play development has stopped. It's been a bit slower than I would have wanted, but regular nevertheless.

I keep on working on the Harmony Analyser, which is looking better every week. I think I've been trying too hard to be too precise with it - two too's are too many ;) - and I'm not sure that's a good strategy. It might not be possible, and even if it is, I'd better get something practical going, and leave refinement (or re-designing) for further stages of the project. So today I went to have a cappuccino and a lemon & coconut muffin at the Surf Beach cafe (sounds relaxing for a Sunday morning, doesn't it?), and did some brainstorming, trying to get more specific on what I'm trying to achieve in terms of harmony. I think I've got a better direction now, and I'm ready to start trying out its posssibilities. My aim is to meet the deadline for Milestone 2, which is May 13th.

Also I managed to find a very annoying bug I had introduced a few weeks ago that was driving me crazy, so I'm happy. :)

DynamicToolbar plugin for FCKEditor

DynamicToolbar is a plugin for FCKEditor that allows you to create custom toolbars on-the-fly, without the need to use configuration files. This won't be necessary once FCKEditor reaches v3.0, but for the moment, here's a quick and easy solution. Read the full text...

Whole-Play: Milestone 1

I've finally completed milestone 1, which brings a feeling of progress, acomplishment and excitement about what's to come. At the same time it's been a bit frustrating, because the results were much better in my mind than what they've actually turned out to be. But then, that makes sense, Whole-Play development is still in its very early stages, so there's no reson to worry and many to be positive and excited! Read the full text...

Additional content and navigation

Categories

Main navigation menu