If..Else Log

Styling FF's middle button click icon

Here's something I stumbled onto accidentally. As many people may be aware, clicking the middle button activates the autoscroll functionality. This allows you to scroll the page by positioning your mouse pointer away from the auto scroll icon.

Now, the way the autoscroll icon is implemented is that FF creates an img element linking to the autoscroll image. This is created as a descendent of the html element which is where I accidentally encountered it.

Therefore, with this knowledge at hand, you might try to style this element via css as follows:

1. html>img{
2. background:#fff url(/your_custom_icon);
3. border: 10px solid green;
4. width:14px;
5. height:22px;
6. }

But this doesn't work!

Hmmm, you'll probably find that there are a few problems.Firstly, the image is covered by the general FF icon and is being tiled. In addition, the border is not being displayed. Fortunately, the second issue provides a clue to addressing the first.

Due to the display order rules, the border is not showing up. To force the border to show up, what we can do is take advantage of the CSS2 !important rule and force this to take precedance.

1. html>img{
2. background:#fff url(/your_custom_icon);
3. border: 10px solid green !important;
4. width:14px;
5. height:22px;
6. }

Aha, we're now getting somewhere. Now, you've probably realised that I snuck the border in there to illustrate a point and that we didn't really want it there. What we do want, however, is for the width and height to be taken into account and for FF to only display our custom icon.

To do this we'll need to apply the !important rule along with a little hack but first, let's have at the custom icon that we're going to use. I've stuck the dimensions on there as well.

What we'll do is set the width of the image to 0. This will "hide" the FF icon. We'll then set the height to match our custom icon and then add a padding to exactly match our custom icon.

What we should then be left with is something like the following:

1. html>img{
2. background:#fff url(/your_custom_icon);
3. padding-right:14px !important;
4. width:0 !important;
5. height:22px !important;
6. }

And there you have it; our own custom autoscroll icons for FF.

Not safe for general consumption

Now a few words of warning:

1. This is obviously a hack and should be treated with all the usual warnings accompanying such techniques
2. It's not particularly useful nor usable. It should be treated in the same manner as colouring scroll bars. The fact that I'm not employing this technique myself should be revealing. I've written this post to illustrate what can be done rather than suggesting that you should.
3. It's perhaps even less useful than coloured scroll bars as the mechanics of it's usage will mean that it'll be seen less often. That said, it's less annoying than coloured scroll bars.

So after all that, what we have is a useless hack. Ahem. Let's move on now, shall we?

And so the weather turns

Moving swiftly on, it's good to see that english weather is back to it's usual best. For those that went to Glastonbury (and two of my friends did), I hope you packed appropriately.

This change of weather puts me in two minds. I like many of the things that happen as a result of warm summer days: being able to play football till late, drinking cold beverages in the shade, summer attire. What I hate is the sticky weather, being stuck in traffic and on public transport, insects and last but not least, pollen. So should I be pleased or annoyed?

I guess what I am is a typical brit. Can't stop talking about the weather and forever complaining about it.

-30-