A few months ago I started using css-based buttons on my website for things like the W3C badges, and on Wednesday I decided to add a Firefox link to pages where I didn’t want to use a graphic.

The basic idea is that instead of a graphic, you use a basic text link with the structure: <a><span>Get</span> Firefox</a> and style it to appear like this: Get Firefox

The span lets you style two regions in the link, and you apply two classes to the the a: one for the general look (borders, padding, font) and one for the specific category (standards/validation, features, etc.)
Here’s the HTML:

<a href="http://www.spreadfirefox.com/?q=affiliates&amp;id=880&amp;t=1" class="btn ff"="Get Firefox! Take back the web."><span>Get</span> Firefox</a>

(Don’t forget to update the link to use your ID!)

And here’s the CSS (cleaned up for readability; I condense it down to one line per rule):

a.btn {
font: 8pt Arial, Helvetica, sans-serif;
padding: 0 .5em 0 0;
border: 1px #000 solid;
text-decoration: none;
}
a.btn span {
border-right: 1px solid #000;
margin: 0 0.1em 0 0;
padding: 0 0.5em;
}
a.ff:link, a.ff:visited {
color: #fff;
background: #009;
}
a.ff:hover, a.ff:active {
background: #99f;
}
a.ff span {
background: #f93;
color: #000;
}

I arrived at this particular stylesheet after quite a bit of cross-browser testing (follow the link at the top to read about the whole process). It works perfectly in:

  • Gecko browsers (of course)
  • IE 5.5 and later
  • Opera 6 and later
  • Safari and (current) Konqueror

IE 5.0 gets everything but the borders. Older versions of Opera get the padding a bit off, and don’t quite get the hover effects right, but otherwise manage OK. Netscape 4 doesn’t recognize the multiple classes, which saves it from some really annoying CSS bugs (if you set padding, margins or borders on a link in NS4, it ceases to be clickable!) I haven’t tried it with Konqueror older than 3.2.

Originally posted on my Spread Firefox blog.

Several months ago, I went on a minor site optimizing kick. One thing I decided to do was replace the validation labels with something smaller, less obtrusive, and directly on the page. I tried to duplicate the look of the classic antipixel-style buttons (like the ones you see on the sidebar here) by splitting a link into two <span> elements, but had so much trouble getting borders and height to match up correctly that I wrote it off completely.

After a while I came back to it, and started with very simple buttons like this:

How the first CSS badges should look

Your browser shows this as:

Valid XHTML XFN Friendly

Here’s the CSS and HTML used for this version: Continue reading

I found myself thinking of A List Apart’s CSS Drop Shadows, and decided I’d modify my writing portfolio to use actual drop shadows instead of the clunky border mess I’ve had for the last few years.

The first thing I realized was that the technique isn’t suitable for large, arbitrarily-sized regions, because you need to have a background image as large as or larger than the area being given the shadow. When you’re trying to apply it to most of the page, you need a multi-thousand pixel image. That’s not only hard to work with, but even if it compresses well it’s still going to take up a lot of unnecessary room in the browser’s memory.

I wanted to keep the markup simple, so I shopped around a bit more and came across a CSS drop shadow example at W3C which was very simple: all you do is put a shadow-colored div behind the area and mess with margins.

Well, that worked great in Mozilla, Opera, Konqueror and Safari. Then, the dreaded Internet Explorer test.
Continue reading

I finally put together a new layout! I tried to do as much as possible in CSS and leave the HTML as little changed as possible, and when I finished I was able to keep the default WordPress layout as an alternate. In theory I ought to be able to plug in any of the submissions from the WordPress CSS Style Competition as alternates as well.

It’s been tested so far on Mozilla, IE 6, Opera 7, and Konqueror 3.2. It doesn’t use anything more complicated than Fahrner Image Replacement, so it shouldn’t cause too many problems. I’ll try to test it in a bunch of other browsers at work tomorrow.

I consider this a first draft – among other things I figure on adding to the main title banner – but it’s something a bit more distinctive than the out-of-the-box layout we ended up with after the upgrade to 1.0.

Updated Feb. 12 and Feb. 13 to describe testing in more browsers and the interesting saga of tracking down a bug in Internet Explorer 5.0: Continue reading