sugarenia.com

Up till (relatively) recently, I had a major gripe with HTML & CSS. I couldn’t find a proper, efficient, semantic way to center align left floated elements.
Gee, what a mouthful, even writing about it gets me edgy.

Of course there were ways, but I couldn’t sympathise with any of them. I, for example, always stumbled upon this problem while styling pagination links for galleries and image carousels.

Then came the day when display: inline-block became famous and, as by magic, everything changed. After a bit of tinkering, I found an efficient and (mostly) cross-browser way to center elements, without resolving to floats.

You can follow the technique below or skip directly to the witty, quick & dirty demo I’ve come up with. Go on, I dare you.

T3h HTML

So what do we have here? Nothing too fancy, just a simple unordered list:

‹ Previous
1
2
3
4
5
Next ›

T3h CSS, take #1

So we want this list centered, with each element neatly next to its previous. OK, let’s get down to business:

ul	{
	margin: 20px;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

li	{
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

li a	{
	text-decoration: none;
	color: #555;
	padding: 4px 6px;
	border: 1px solid #ccc;
	margin: 0 4px;
}

li a:hover	{
	border: 1px solid #999;
	color: #333;
	background-color: #f2f2f2;
}

Wee! Looks cool. Now the tricky part: let’s start the browser testing…

(5 minutes later)

Phew! Firefox, Safari, Opera and Internet Explorer 8 seem to be working fine with it!

And Internet Explorer 6 and 7… Well…

Let’s say they don’t love inline-block to bits.

T3h CSS, take #2

Hmmm… How about turning display: inline-block to display: inline? Internet Explorer loves display: inline! And maybe a little of this trusty ole jar of hasLayout cream we always have available on our web-des shelf. Let’s add a zoom: 1 declaration to li as and see what happens (I used the star and the star-plus hack to target IE6 and IE7 only, but in real life designs, you really should use conditional stylesheets):

* html li	{ display: inline; }
*+html li	{ display: inline; }

li a	{
	text-decoration: none;
	color: #555;
	padding: 4px 6px;
	border: 1px solid #ccc;
	margin: 0 4px;
	zoom: 1;
}

Tada! Mission accomplished. Pat yourself at the back and go get a cup of tea, you’ve deserved it.

Disclaimer: I don’t claim this will work in older versions of proper browsers (namely, Firefox 2 or Safari 2 or yada yada). Frankly, I don’t care, and neither should you. It works fine for the occasion here and there when you want to center stuff. If you have a better / cleaner solution, I’d be glad to hear all about it in the comments.

I blame my university years for my procrastination curse.

Not that anything (much) was wrong with my academic studies, but the whole mentality of (greek) university oozes procrastination: most of the time, there’s not an everyday reason for you to do stuff. There were projects and exercises, yes, but those could be easily (?) tackled the last two or three days of the deadline. Or not.

Since I’m trying hard to face this aspect of myself, I’ve given a chance to time tracking software. I found that I focus more easily on a task if there’s a visible timer around the screen, ticking away, measuring my attention time. Believe it or not!

My first try was something in the lines of Billings and On The Job for Mac OS X. They’re clearly an overkill since I don’t use the invoicing features for my personal projects (or maybe I should) but I like the fact that I can set timers for tasks and group them into projects. But I’m still on the lookout for a better, more effective, less bloated solution.

So my questions are: Do you use some kind of time tracking device or application? Is it online or offline? Digital or analog?

Do share your experience in the comments.