Latest Article

Button Height and a Broken Box Model

12 Responses

More |

By Rob Glazebrook on March 2, 2010

When I figured out the workaround for line-heights in form buttons last week, I also discovered an interesting discrepancy (feature?) across all major browsers in terms of buttons and the box model. Check out this article for a more in-depth refresher on the CSS Box Model, but here’s a brief summary:

Let’s say I have a div styled like so:

div {
	height: 30px;
	padding: 10px 0;
}

The box model states that the resulting box will take up 30px of vertical space for the div’s contents, plus an additional 10px on the top and bottom for the padding, for a total of 50px vertical space taken up by our div. Read the rest…

The Firefox Input Button Line-Height Bug

I recently ran into a bug in Firefox and Opera when I tried to set the line height of text inside a button (which affects input “submit” buttons as well as the HTML button tag). The bug? The line height can’t be changed!

New Example Page Formatting

I’ve never liked that my CSS Newbie demo pages have no visual consistency. So, I took some time and added a new wrapper. It makes them more consistent and more useful at the same time.

The Simple Secret to Good Dropdown Navigation

Almost every example of good dropdown navigation on the web today relies on a single, simple HTML structure: the nested unordered list. Of course, that means that knowing how to build a good nested unordered list is critical to this entire process.

How To Emulate a Foreach Loop in JavaScript

I have trouble with JavaScript array and array-manipulation. JavaScript lacks a specific foreach contstruct, which trips me up. Here’s how to fake it.

Improve Usability and CTR: Make an Entire List Item Clickable

Larger clickable areas make for greater usability and a higher click-through rate. Here’s how to expand a clickable area to an entire list item using jQuery.

The Best CSS Newbie Articles of 2009

Happy 2010, readers of CSS Newbie! This year, more than a quarter million people stopped by, visiting more than half a million pages. Here are the Top 10 CSS Newbie Articles of 2009.