I thought, "that can't be right...can it?" Turns out Dave was right. After looking into it some more, it turns out that overflow:auto and overflow:hidden both work the same way, and that's it.

	.containingElement{ overflow: hidden; }

Of course, IE6 doesn't play along with the rest, so as always, here's the hack:

	* html #container{ height: 1%; }

Use this hack (or one without the * html inside an ie6-only stylesheet) to make ie6 behave correctly.

That's all there is to it.

I have since began using it everywhere, and it works flawlessly. The only time it doesn't work correctly is when you actually need elements to overflow the box (a drop-down menu for example, or any absolutely positioned elements outside of the box). In these cases, I fall back on the trusty clearfix. But for all others, overflow:hidden to the rescue!

Versions

Versions is a Mac SVN client that works very, very well. I had been using svnX, which never really gave me any problems, but after using Versions for about a day, you wouldn't really be able to convince me to go back. Versions has the polish that Mac users have come to expect, both visually, and interaction-wise. I'm able to group all of my repositories in different folders, and working copies show up under their respective repository. All in all, a very nice app that I take for granted now because it works so well.

TextExpander

Most text editors these days have the idea of "clips," or something similar, in which you build a library of code snippets, and them access them in different ways. What TextExpander does is take that functionality and build it into the operating system, so that you can just type a certain code word, and it automatically replaces it with the given text.

This is not only useful for work (I type "rreset" to have it spit out Meyer's CSS reset), but also for normal, everyday typing. I have my address saved, so that if I type the numbers from my address, it replaces it with the whole thing. Same with city ("bll" becomes "Bloomington"), email, lots of things. I use it without thinking, and every time I type the same thing more than a few times, it goes into textExpander. It keeps track of the time it saves you, and I'm over two hours now. Two hours is a lot of typing.

Billings

Any freelancer needs to have a setup that they're completely comfortable with for tracking time, creating/sending invoices, and tracking clients/payments/etc. There are tons of great tools out there, and I've used a number of them. Up until about a month ago, I had been using OfficeTime for time tracking and invoice creating, and a plain spreadsheet for tracking client payments.

A month or two ago, I found Billings 3, and tried it out. Like Versions, Billings is a much nicer app to work with than OfficeTime, which attracted me from the beginning. However, Billings is a much more comprehensive tool for organizing your business than officeTime is. I need to try hard to be organized, so anything that helps me do that is a plus. Billings makes staying on top of the business end of things much easier on me. I can track estimates, time, clients, payments, personal projects, and a lot of other things, all in one place.

Billing's invoice/estimate templating engine is also very extensive. I've been finding it a little difficult to get into it to build custom templates from scratch, but changing small things on one of their many built-in templates is pretty straight forward, and creates nice-looking results. They also export into pdfs, instead of rtfd's (which is what OfficeTime used). All in all a great tool that has already helped me be more comfortable keeping track of things.

Evernote

Put Evernote into the "tools that help dan stay organized" pile. Their slogan is "Remember everything," which is nice for me, because my unofficial slogan is "I forget everything." I use Evernote constantly. I keep article ideas, work notes, javascript tricks i'd like to try sometime, and lots of other stuff in there. It searches instantly, and can capture all sorts of stuff. I've been using it for a couple months now, and have over a 100 notes stored, mostly work-related. Also, like most of the other apps on this list, it has that nice Mac "feel" to it.

Evernote is also useful because it has an iPhone companion app that syncs with your desktop account, so I can take a quick note when I'm away from my computer, and then file it when I get home.

Firebug

If I had to get rid of every app that I use in my business but one, I would keep Firebug. I can't even begin to estimate how much time Firebug has saved me while developing websites, and there really isn't anything that compares. I could write a whole article on it, but I'm just going to leave it at this: if you build websites, you should be using firebug.

Everything this summer went really well. Emily and I are both happy with the house, and being married ain't half bad. It is good to get back to everything, though.

While this post might not be of very much use to you, I thought I'd drop a line, and let you know I've got some articles coming down the pipeline for you, plus I'll be joining a handful of good people at AEA Chicago, and I'm sure I'll have some something to say about that, as well. So stay tuned, and I'll see you soon.

Naked Day promotes the importance of valid, semantic html and a solid page structure in your designs. The bottom line is this: your site should still look good, even if it's naked.

The contest will be on April 5, 2008, and will follow the same 24-hour format that it always has. So get out your coding hats and practice your microformats; CSS Off is back!

Well, this solution offers something new to the world of rounded corners. What it does is this: it crops the content below it, so that anything with a background color or image (headers, paragraphs, even images) automatically get the rounded corner treatment with no extra work. See below:

In this screenshot, the image is a normal, rectangular image. Nothing was done to it, except inserting it inside one of my rounded corners containers. It's easy enough that you can even have your clients do it in their CMSs without the headache of trying to teach them to use the Rounded Rectangle Tool in Photoshop.

This technique solves a very specific issue. There are plenty of ways to render rounded corners that involve less markup, simpler CSS, and less time in photoshop, but none of them (that I am aware of) crop the content below it.

You can view the solution at work here, and I'll try to take you through how it works.

First, The Images

So this part isn't too hard, as long as you can navigate your way around photoshop. Just as a note, it's definitely possible that there are better ways to go about this part in photoshop. If there are, don't hesitate to drop a line in the comments.

First things first: go and download the Super PNG plug-in for photoshop. What this plug-in does is strips out the color information that photoshop usually saves with PNGs, which will help you avoid that little difference you can see between browsers. See here for a more detailed explanation, but this is important.

Once you've got Super PNG running, use the aforementioned Rounded Rectangle Tool to create a rounded rectangle with your desired radius and give it the background color of your container. Edit the layer style to give it a stroke of whatever width you'd like, then rastersize it. Then, decide how much padding you want to be cropped inside your container (I used 2 pixels in the screenshot above). Duplicate your rectangle, and shrink it to fit inside of your desired padding. CMD/CTRL+click on the layer thumbnail to load the selection on the smaller rectangle, then select the larger rectangle and hit delete. You can now throw out the smaller rectangle.

Once this is done, you should have the outline of a container. Now, zoom in to one of the corners, and, using the marque tool, select a square that is just big enough to contain the corner. Copy it, open a new document, and paste it in. Throw out the background, if there is one, and you should have a corner that looks something like this:

Once you've got this, simply save it, then rotate it and save it three more times so that you end up with each corner.

Second, The HTML

Now that that annoying photoshop work is done, I'm going to start referring you to an actual example, located here. Here's the HTML for one box:

<div class="b_greyWhiteStroke">
	<div class="TL"></div>
	<div class="BL"></div>
	<div class="TR"></div>
	<div class="BR"></div>
	<div class="b_innerContainer">
		<h2>This Is A Block</h2>
		<p> Lorem ipsum dolor sit amet...</p>
	</div>
</div>

This is fairly simple. There's a div for the outer container, a div for the inner container, and a div for each border. All of your content will go inside .b_innerContainer, and the corners of this content will automatically be cropped.

Third, The CSS

The CSS for this solution is a little more complicated, but nothing too bad. The basic idea is that you give the border divs position:absolute, place them in the corners, and let them sit on top of everything else, thus cropping it:

.b_greyWhiteStroke{
	position: relative;
	border-color: #dce3e7;
}

.TL, .BL, .TR, .BR{
	width: 6px;
	height: 6px;
	position: absolute;
	background-repeat: no-repeat;
	background-color: transparent;
	z-index: 9999 !important;
}

.TL{
	top:0;
	left:0;
}
.BL{
	bottom: 0;
	left: 0;
}
.TR{
	top:0;
	right:0;
}
.BR{
	bottom: 0;
	right: 0;
}

.b_greyWhiteStroke .TL{
	background-image: url(images/grey_whitestroke_tl.png);
}
.b_greyWhiteStroke .BL{
	background-image: url(images/grey_whitestroke_bl.png);
}
.b_greyWhiteStroke .TR{
	background-image: url(images/grey_whitestroke_tr.png);
}
.b_greyWhiteStroke .BR{
	background-image: url(images/grey_whitestroke_br.png);
}

.b_innerContainer{
	border-width: 1px;
	border-style: solid;
	padding: 2px 2px 8px;
}

.b_greyWhiteStroke .b_innerContainer{
	border-color: #dce3e7;
}

See, that's not too bad, is it? A couple notes here. First, I've separated .TR from .b_greyWhiteStroke .TR. This is so that I can have multiple background-color schemes going with only minor additions to the CSS. So, if i wanted to create, say, and alert box with a yellow border, I wouldn't have to rewrite all the existing CSS, I'd just have to make some additions.

What about ie6?

Ie6, as always, was the big headache here. However, by hacking up Angus Turnbull's IE PNG Fix with a couple of my own modifications, I managed to get it to work. The problem, aside from ie6's refusal to run transparent PNGs, was that the border block wouldn't always line up with the edge of the container. I assume it's some sort of rounding error, but I'm not positive about that. Anyway, the PNG Fix now fixes the transparency, and checks to make sure the borders are where they should be. The only problem here is that this solution doesn't work in ie6 when you use a fluid width. Or, more correctly, it will correct itself when the page loads, but there is a possibility of the borders moving a pixel out of place if user starts manually changing the width of the window. Check out the example page in ie6 to see what i mean. Here is the code to include this fix:

<!--[if lte IE 6]>
<style type="text/css">
	.TL, .BL, .TR, .BR{ overflow: hidden; behavior: url("ie6fixborders.htc"); }
</style>
<![endif]-->

The End

So, there you have it. You can download the entire example here. This solution, for sure, is not the best for all situations. There are tons of smaller and easier solutions out there, and you should use them unless you have this specific need. However, if you do decide you need something like this, I think you'll find it to your liking.

As always, I'm more than open for comments and suggestions for improvement. Hopefully you'll find this solution useful sometime in the future.

The Function

So, here are the functions:

//this function returns the computed pixel value
//of 1em relative to the given element
function getComputedEm(el){
	var tdiv = document.createElement("div");
	tdiv.style.height = "1em";
	tdiv.style.position = "absolute";
	tdiv.style.backgroundColor = "#f00";
	el.appendChild(tdiv);
	var emValue = tdiv.offsetHeight;
	el.removeChild(tdiv);
	return emValue;
}
//this function takes an integer, and a javascript element.
function convertPixelsToEms(pixels, el){
	var emval = getComputedEm(el);
	var value = pixels/emval;
	return Math.round(value*100)/100;
}

The Bookmarklet

And here's the bookmarklet:

pixel2em

Just drag the link above to your menu bar, and click on it in any site. The bookmarklet will appear at the top of the page. It takes a pixel amount, and any css selector you can think of, so it will return the conversion relative to an element. For example, on this site, if you use "body", 16 pixels = 1.14em, but if you use #content p, 16 pixels = 1.23em.

It's probably not perfect, so please let me know if things aren't working correctly. Although, I can tell you right now it's not going to work on ie6, so don't bother trying it there.

The bookmarklet makes use of Dean Edward's cssQuery, a slick little script to retrieve elements based on CSS selectors.

All in all, this was a fun experiment, and I hope you find it useful. Have fun.

That being said, I'm a total n00b when it comes to Twitter. I'm aware of Snitter and Twitterrific, but are there other Twitter clients out there? Which one do you use/which one is best? Also, are there any people out there that I really should add to my "follow" list?

How about terminology? Have I already embarrassed myself by not using the in-lingo when referring to different parts of Twitter? Brad just "nudged" me; I'm not even sure what that means. Is that like first base?

Well, either way, I'm looking forward to trying it out. We'll see what happens.

Read http://dtott.com/thoughts/2009/01/06/clear-your-floats-even-easier/ for an even easier way of dealing with floating elements.

Then come back and read this.

Aside from browser bugs, float clearing can be one of the most frustrating aspects of CSS development. It takes a little bit of patience and thought to set up your floats and clears in a way that facilitates both your design and the flexibility required in a modern website.

The Old Way

While judging the last contest of CSS Off, one of the things that I found myself repeating over and over again was this: "Don't use empty divs to clear your floats!" What I meant by that was that in this day and age, there exist much better, more robust, and more semantically correct ways to properly clear floats that simply inserting <div class="clear"></div>.

The Not Really New Way

Enter the EasyClear method. I'm calling this the "Not Really New Way" because it appeared on positioniseverything.net in 2004, but is still being ignored for the old empty clear div solution.

I'm not going to spend time explaining the specifics of why this solution works; they have gone over the technical aspects of the solution in the article, especially different hacks for different browsers. However, before I explain the best way to use the EasyClear on your sites, there is one part of CSS that needs to be understood, since the entire EasyClear method hinges on it: the :after pseudo-element.

:after - Intrigue and Deception

For a long time, I was confused about the :after pseudo-element. After doing a little testing and research, I figured it out. It's not all that difficult to understand, actually, but I was mislead in the beginning. The w3schools.com's definition of :after is the first that pops on on a quick Google search, so it was the first place I went:

The :after pseudo-element inserts some content after an element.

It turns out that this is completely incorrect. The actual definition (via The W3) is this (emphasis added):

The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content.

The difference between the two definitions is considerable. Content inserted using the :after pseudo-element is inserted not after the element, but instead within the element and after the content. See an example here.

You can use :after to insert just about any content you'd like, and give it most CSS attributes, including display and clear. This is how EasyClear works its magic.

Using EasyClear

Using EasyClear is simple. The only trick is to apply it to the correct element. The element that you are going to apply it to most is the element containing the floated elements. For example, a page with a container that has a background you'd like to extend to include the entire content, and two floated elements:

In this example, you want to apply the EasyClear to #container, since that is the containing element. It will insert a block-level element with the clear attribute set to both, thus clearing the floats inside the element without crufting up your HTML. You can see an example at work here, and here's the EasyClear CSS itself:

/* EasyClearing http://www.positioniseverything.net/easyclearing.html */
#container:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#container
{display: inline-block;}

/* Hides from IE-mac \*/
* html #container
{height: 1%;}

#container
{display: block;}
/* End hide from IE-mac */

As you can see, it's pretty simple to employ, and the results are perfect. The best way that I've found to implement this on larger projects is to keep the EasyClear in one place, at the bottom of your main stylesheet, and simply add elements that you need to clear to the declaration itself, as illustrated here.

Clears For All

So now you never have to insert an empty div into your otherwise perfectly crafted HTML. Go read the article, learn the background, spread the word, and, please, just start using it!

#content{
	width:49em;
	padding: 0 1.5em;
	margin: 0 auto;
	clear: both;
}
#content h2{
	font-size: 2em;
	height: 1.5em;
	margin-left: .75em;
	color: #000;
}
#content h2 a{
	font-weight: normal;
	float: left;
}
#content h3{
	font-size: 1.25em;
	line-height: 1.2em;
	color:#4d9fdd;
}

Pretty standard stuff. I'd break up sections with big comments, and that made it fairly easy to scan. While this format never caused and problems per se, and it was easy enough to implement, it never seemed completely ideal.

When I started working with Sprokets, the other front-end developer there was using one-line css declarations. This threw me for a loop for a while, but I slowly started liking it better and better.

The method I've finally settled on is based on the one-line approach, but with an extra twist: I indent the declarations based on it's place in the HTML document. For example, take the HTML for this simple page:

<body>
	<div id="one">
		<p>text</p>
		<p>text</p>
	</div>
	<div id="two">
		<p>text</p>
		<ul>
			<li>list item</li>
		</ul>
	</div>
</body>

The CSS to access this code would be like this:

body{ properties; }

	#one{ properties; }
		#one p{ properties; }

	#two{ properties; }
		#two p{ properties; }

		#two ul{ properties; }
			#two ul li{ properties; } 

This has worked very well for me so far, and I'm looking forward to trying out on some bigger projects. It allows me to scan through my CSS much more quickly, view comments more easily, and has the added benefit of helping me think through things like descendants and inheritance. Take a look at the CSS for this site to see it in action on a bigger scale.

This method, while new for me, is clearly not revolutionary. However, since I stumbled on it on my own, I thought some of you guys might benefit from it as I have. How do you format your CSS?

It happens, I guess. The problem I ran in to as time wore on without a post was that the longer I went, the more epic the post had to be that finally got me started again. A lot of things have happened, and I wanted to talk about all of them. Obviously, the post that I had in mind kept getting longer and longer.

Well, no more. Partly inspired by Russ Casenhiser (via URN), and partly because I just needed to get going again, I present you with this post: a (mostly incomplete) roundup of most of the things I've wanted to touch on. Some of it may be old news, some of it may be new. Either way, after this post I can get back on the blogging horse again.

iPhoneification

I got an iPhone in late September. I love it. It's one of those purchases where, after a couple weeks, I forgot how I lived without it. I was apprehensive about the keyboard, but it turns out that was completely unfounded. I don't even have to really try to type correctly, because the iPhone's auto-correct is so amazing. The EDGE network isn't as slow as everyone says (it's slow, but come on, people, it's not that bad). The integration between Safari, Google Maps, and the actual phone features is so convenient, it's ridiculous. I haven't regretted buying one for an instant.

"It's Sproket, not socket!"

I joined the Sprokets team sometime a few months ago. This experience has been a revelation for me. I'd never worked with more than one other person on a project before, so coming on board with a team like Sprokets was, while a little intimidating at first, ultimately a huge breath of fresh air. It's allowed me to concentrate on honing my front-end skills, and collaborating with other skilled developers always helps me improve across the board. It also lead me to a new way for me to format my CSS, so watch for a post on that in the future.

Leopardosity

I pre-ordered Leopard, and installed it as soon as I got it. Again, a new Apple product that I love. Leopard gave me Time Machine, Screen Sharing, a new sidebar in Finder, major improvements in Spotlight, and Spaces.
Spaces could use some improvement, especially when you mix Spaces and traditional, cmd-tab application switching, but it's still awesome. I keep all of my chatting applications in one space, Coda in one space, etc. It's nice.

The new sideboard just plain old rocks.

I've also been using Spotlight for launching applications/documents/websites (a la Quicksilver), which turns out to be surprisingly fast and efficient, even for just-downloaded-and-installed applications. It's real cool.

Portfoliofy

Finally, I'm in the process of reworking my portfolio. This site has a distinct lack of Javascript, but I figured since that was a large part of my skill set, I should include at least a little bit on my site. The portfolio is now set up slideshow-style. I'll be working on it more now, and there are some existing issues (it looks a little off in Safari, and I haven't even begun to test it in legacy browsers), but it's fun so far.

So, what now?

I've got some ideas. I'm going to try to start a once-per-week blogging schedule as far as articles go (I know, I know, there is no try, do or do not, etc...), and I'm going to step up my linking. All in all, I'm feeling good about the whole thing.

We'll see what happens.

As you may or may not know, I was one of the judges for this month's contest. Judging was a very rewarding process for me. It's one thing to sneer at someone's code and talk about Standards and best practice and everything, but it's an entirely different thing to have to back it up with reasons. I also strived, when I could, to offer suggestions on how to fix something, instead of just pointing out that it was wrong. It was a very fun experience, and I'm looking forward to helping out on next month's CSS Off.

Again, congratulations, Brad! Cleveland represent!

I'm really excited for the chance to help out with this project. We have a good group of people who are all active in CSS Off as well as the blogging community, so it'll be fun to put all of our heads together and read some code!

Ok so we're all probably huge nerds as well...but I've never been one to deny that about myself(:

Anyway, like I said before, the next contest starts at 12:01 am CST (1:01 am EST) on September 15. That basically means twelve (one) in the morning on this Friday night. I'll see you all there!

What's A Reset?

A CSS reset is a set of CSS declarations designed to strip away all possible default formatting before adding any of your own. Every browser out there has default formatting for every HTML element. The body element in almost every browser has padding, margins, a set font size and color, and a set background color. Headings have margins, padding, different font sizes, and different font weights. Turn of CSS on your browser while viewing a site, and you'll see the default CSS that the browser uses. What the reset does, then, is strip all of that away. Headings, paragraphs, fieldsets, and everything else, set to one font, one size, one weight, and no extra paddings and margins.

But...Why?

Well, there's a few reasons. First, by resetting the CSS, you remove the temptation to rely on browser defaults that may or may not be the same cross-browser. H1s, at least to the naked eye, are pretty consistent across the field. What about fieldsets or dls?
Second, removing that temptation will make you a better CSS coder. By having to explicitly set each attribute on each element you want to use, it forces you to learn what you might normally gloss over.
Third, it will make your code meaner and cleaner. You won't have to set the margin and padding every time you use a ul unless the design calls for it. No more wasting lines and time undoing what the browser does for you.

OK, I'm Sold. What Now?

Go out there and get a reset! If you are a control-freak-ninja-CSS-master, you could write your own, but there's no need for this. Eric Meyer has already done it for us: The Eric Meyer CSS Reset. Is this the only one? No. The Yahoo! User Interface Library has a reset, and I'm sure there are more out there. Eric's is the best. I could go into why, but it's already been done here and here (including the comments). Just go, get the code, and put it above your stylesheets.

Cool!

I concur. Do you concur?

The Little Stuff

First, I went to an all-Helvetica font scheme. My typography was all over the place on the last view versions, and I feel much more comfortable with choosing one font and sticking to it. Second, but related, I moved the title and navigation to their own bar under the opening graphic, and moved the quotes under the section heads to the right of the section heads.

The Grid

The next thing I needed to change was the vertical spacing. I chose 1.5 ems as my baseline height, and went with it. Everything now lies on a 1.5 em baseline grid. You can imagine (or maybe you know from experience) that this seems like it could be a pain. It is. What was my secret weapon? Rob Goodlotte's Syncotype. What it does is place a horizontal grid over the page you're viewing, at any size you'd like. 1em converts to 16px, so I was able to line everything up to a 24px horizontal grid. It's awesome.

The Em

The biggest change, which might not be all that visible at first, is that the entire site (except for a couple borders) is now in ems. The entire structure, the images, and of course the fonts, now resize with the text. The effect is that when you increase font size in your browser, the entire web site zooms. Try it out (cmd/apple + to increase size, cmd/apple - to lower size).

Seems like an easy concept; just divide all of your pixel values by 16, like I mentioned before, and you're set, right? Well, at first, yes. For the overall structure, that's all I had to do. The problems arise when you change the font size of an element. Whenever you change the font size of an element, like a paragraph or a heading, the rest of the attributes of that element are measured against the new font size, instead of the body font size. To get the margin or padding that you want, you have to divide the margin you'd like by the new font size, and that number is your new margin. Ideal margin / new font size = New margin.

I had my calculator program running the entire time.

Inspiration and guidance for this redesign came from Wilson Miner's Setting Type On The Web (on A List Apart) and Richard Rutter's Compose to a Vertical Rhythm (on 24Ways).

It's been a fun (and trying) experiment. Hopefully this version will last longer than a month before I'm fed up with it!

Here's a screenshot of my site in a Firefox tab with my original favicon:

As you can see, it looks fine in the location bar, but you can see the white square of the favicon on the tabs (especially when a tab is not selected). Here's the new version:

Much better! Want to know how to do it?

Go here. I was going to try to explain it, but his step-by-step is really the best way to go about it. Let's see what you can come up with!