Taming button padding in Internet Explorer

Here's another one of those irritating little CSS issues that comes up from time to time. When you use the <input type="submit" value="Click Me!"> element for a form button, IE always assumes it knows what's best for you in the area of horizontal padding. And if all you want is a simple button, that's fine; but what if you want to kick it WinXP style and have a little icon at the left of the button? You'd think you could just manipulate the left padding for the <input> and drop in your background image positioned to "0 50%", right?

Wrong. For whatever reason, IE ignores your padding rules and does whatever the hell it wants. Until now.

This time, when I discovered that our contractors had dodged this issue by using image buttons with rastarized text – thus removing any hope of applying hover and disabled styles, and locking in their misspellings – I decided the right solution was to switch to buttons. That's when I remembered the previous problems I'd had with button styling.

This time, when I went looking for answers, I found Mr. Kirkland's posting. The workaround turns out to be quite simple, but far from intuitive. I have sent many karma points his way, and this blog posting is my way of ensuring I won't ever lose track of the information.

Checking for installed fonts with @font-face and local()

Checking for installed fonts with @font-face and local()

at www.broken-links.com

Static footers

In one of my current site designs, I have a problem with my footer containing copyright and the questionably ubiquitous “last updated” information. Everything is fine for pages that have enough text to fill at least one screen, but for shorter pages I'd like to have the footer stay more toward the bottom of the window. Why? Because I've used a background image to create a faux column effect, and this image is attached to the body element. When I have a small amount of content, it just looks stupid to have the footer floating there at the middle of the “page”.

I've been wishing I could think of a way to make the footer stick to the bottom of the window, for shorter pages, and to the end of the content, for longer ones. On Boagworld's site, Ed Merritt explains how to accomplish this very thing.

The Highly Extensible CSS Interface ~ The Series ~ Authentic Boredom

Over at Authentic Boredom, Cameron Moll has embarked upon an interesting discussion of how to... well, the title says it all:

The Highly Extensible CSS Interface ~ The Series ~ Authentic Boredom

I say it's a “discussion” because Moll has invited readers to respond with their criticisms and enhancements as the series goes on. Part I is up now, and it looks to be a very interesting series. Check it out.

Taming min- / max-width in Internet Explorer

As most of us who care are probably well aware, Internet Explorer is too stupid (or too lazy) to recognize the min-width and max-width attributes that standards-compliant browsers support. Microsoft's answer? Allow JavaScript in CSS rules.

It's less than ideal – especially if the viewer has JavaScript turned off – but it's a tool worth knowing about. Get the details at Perishable Press.