Item — HN Reader

To answer some of your direct questions:

"I'm not sure what the author's obsession with JavaScript fixes is"

Well, I'm not sure "obsessed" is the right word. But when I try to find the solution to any given CSS problem the answers seem to fall into three boxes:

a. Put markup in to manage the problem. b. Weird hack. c. Javascript

Of the three Javascript is the most elegant except that it stops working if (duh) Javascript is disabled. So my focus on it is more about discarding it out of hand as being unacceptable (whereas the other two options are merely, as you point out, horrible).

"What's wrong with the button element?"

Thanks for the link. It looks like I'm just wrong on this point (or maybe out of date, but that's still wrong).

"In this case, the author doesn't go far enough." (on forms)

Well, the post was getting a little log (perhaps not by Yegge's standards though) and also I worry about my blood pressure whenever I think about forms and CSS.

"Pretty sure this is what display:inline-block is for."

Ok, probably another place where I'm just wrong. The more of those the merrier from my point of view.

Thanks for the reply - there was some really helpful stuff there.

2 comments

"Of the three Javascript is the most elegant [...]"

Oh, definitely. When I'm doing a personal project I tend to just not bother with niceties like rounded corners for IE users, and as long as the content's still accessible I'm not too bothered. This cuts down on the number of times I need to add junk markup, weird hacks or JavaScript (or, more usually, some combination of the three).

At work, we tend to try to do as much as possible with CSS and HTML, since in the end most DOM manipulations done with JS are still changing CSS-accessible properties. The other day we had a client who wanted the bottom border of several columns with different heights aligned. This isn't possible in CSS (although, of course, it was very simple with tables), at least if one is still supporting IE6, as we are, but a few lines of JavaScript sorted it out pretty sharpish.

In other words, best practice as far as I'm concerned is to leave JavaScript out of the picture as long as possible, at least where styling or layout enhancements are concerned. This means that users without JavaScript (a very small number, admittedly) will get the best possible experience, and more importantly, it means your JavaScript and your styling are as loosely coupled as possible. That's not too important for a small site, but on a big one where you have to maintain it over a number of years, it becomes absolutely vital (in this way it's no different from any other kind of programming).

1. curvy corners are coming in css 3. -border-radius: 5px;

2. vertical-align: center; ?

3. i dont have problems with this

4. never had this problem

5. whatever happened to <input type="image" src="bitmapurl" /> or styling <button>'s?

6. css3

7. You must be a rebel, because it's not that hard to follow simple rules for writing out an X/HTML doc.

8. I completely agree!

9. Sure why not?

10. I've already got a mustang.

I'm curious then - could you explain how you approach CSS based layout for forms? Drop me an email (dave@paperstack.com) if you want to discuss it offline.

I use lists to layout forms, other people use tables. Forms can be a beast! It helps if the designs have been done with the 'web' in mind and not just what looks pretty on paper.