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
Originally on my Spread Firefox blog. Now moved to Tech Tips
Tag: css
Creating CSS Buttons
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 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:
Your browser shows this as:
Here’s the CSS and HTML used for this version: Moved to Tech Tips.
Simple drop shadows? IE/Win and NS4 don’t think so!
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
New Layout
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