CSS3 box-sizing! Why didn’t anyone tell me!

When something website development based annoys me, I usually just write some sort of hack or fix for it, and do that over and over again until I really get sick of it before I come up with a proper solution.

That point in time arrived today, with respect to the issue of setting a single width to all inputs and textareas in a form, and watching the browser render them all with different widths! It happens and it’s stupid.

“What in shitting crikey are you talking about?!” you may be shouting at the screen. Well I’ll show you, check dis code:

Some css setting input and text area widths, stacked using block labels


label {display:block;margin:1em}
input, textarea {
width:100%;
}

A simple form with a text input, submit button and textarea

This is a text area

I’ve added the red line in to show you, the form elements don’t line up.

This situation can only be described as a shitting bastard

In the past, I’ve just done stupid things like set the submit button to 100% and the text area to 95% and the text input to 98% or used 3 different exact pixel widths. I’ve been a moron about it but it’s got me through.

I got sick of doing that today… so I just googled the problem and almost immediately found the answer.

box-sizing

This is a new CSS3 rule, but it works on IE8+, and recent versions of Firefox, Chrome, Safari and Opera. It’s a good rule, and anyone using IE7 and IE6, shouldn’t be. And you’ll get wonky forms.

But good people, will see nice neat form edges! AND THAT MATTERS TO ME! Look, by changing the CSS slightly:


label {display:block;margin:1em}
input, textarea {
width:100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}

Holy muntpants batman it works! Look at the lovely neat lined up inputs! Yes, the button is maybe a pixel off, but you can’t really see that without that red line there.

Ok, ok there is some vendor specific guff in there, but to be honest that might have gone by now… I stole that code from a year old blog post. Oh and it really does work on IE8.

So I’ve learnt a couple of lessons from this experience.

  1. If somethings naff, try to fix it straight away instead of hacking around it for years
  2. Read more release notes… this CSS3 property has been around for ages

So there you have it, CSS3 box-sizing. Wonderful.

You can have a play here using jsFiddle, which is a wonderful site: box-sizing test

I should also give credit to the guy’s blog post that I found this on and also the official W3C documentation on it


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s