Blue Angel

Holy Grail 3 column layout without using float

blueangel — Fri, 18 Feb 2011 23:07:44 +0000

Yes. You read the post title correctly. It is not a mistake. The technique outlined below exists, and it’s cross-browser compatible (with the obligatory tweak or two for our dear friend Internet Explorer, of course). No more pesky clearing of floats. It’s CSS layout nirvana. And it’s here today.

First, the markup (borrowed from here)

<div id="header">header</div>
<div id="container">
	<div class="sidebar">
		<h1>sidebar</h1>
		<ul>
			<li>link one</li>
			<li>link two</li>
		</ul>
	</div>
	<div id="content">
		<h1>content</h1>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend.</p>
		<p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit.</p>
	</div>
	<div class="sidebar">
		<h1>sidebar</h1>
		<ul>
			<li>link one</li>
			<li>link two</li>
		</ul>
	</div>
</div>
<div id="footer">footer</div>

Strictly speaking, the wrapper div isn’t needed, except in my example outlined below, I’m using a modified version of the Man In Blue’s excellent FooterStickAlt to ensure a full-page layout, even with the smallest amount of content. It’s also a handy element to have around should you wish to use a full-length background to ensure the appearance of equal height columns with varying content height.

Now normally, the next step would be to float the sidebars and the center column, right? And then clear the float on the container div, right? No sirree, we’re going to be using the oft-overlooked display: inline-block which, ever since Firefox 3 was released, became a viable option for site layout. But I suppose front-end developers have gotten used to using floats to achieve multi-column layouts, even though it’s not really the right tool for the job. If you think about it, floats are really for image elements and pull quotes, designed to have text “float” around it.

The W3C defines an inline-block element as an element that behaves like a block element when it comes to padding, borders and margin, and its descendant elements all see it as such but behaves like an inline element to its sibling and ancestor elements. Neato.

Let’s start off slowly with our CSS:

body {
	width: 960px;
	margin: 0 auto;
}
#header, #footer {
	background: orange;
}
#content, .sidebar {
	display: inline-block;
	vertical-align: top;
}
#content {
	background: pink;
	width: 60%;
}
.sidebar {
	background: yellow;
	width: 20%;
}
#footer {
	background: blue;
	color: #FFF;
}

Of course, no self respecting CSS technique would exist if it didn’t break IE in some way or another, so without further ado, here is what’s needed to get Redmond’s browser to behave:

* html #header, * html #footer {
	height: 7.5em;
}
#content, .sidebar {
	display: inline;
	zoom: 1;
}

If you are super keen to try out this technique and you’ve copied & pasted the above code and run it in your browser, you’re probably wondering why the elements aren’t lining up neatly like they should. And rightly so. That is because inline elements are affected by white space within the HTML document. And therein lies the rub.

But all is not lost. There are basically two approaches to solving this… “fixing” the HTML by removing the white space between the inline-block elements, or adding a smidgeon of additional CSS to achieve the same effect. Admittedly here I wasn’t the one who invented this method – I found it here and decided to try and see if instead of only using it for image galleries and horizontally centred navigation, it could be used for laying out an entire page.

Basically, what we’re going to be doing, is removing white space in our parent element (in this case, #container) and putting it back in each of the child elements (each of the elements that have display set to inline-block). A little bit of experimentation led me to see that most browsers will be happy with eliminating word-spacing, but Webkit-based browsers (essentially Safari and Chrome) needed to have letter-spacing removed instead.

#container {
	word-spacing: -4px; /* IE, Firefox, Opera */
	letter-spacing: -4px; /* Webkit */
}
#content, .sidebar {
	word-spacing: normal; /* IE, Firefox, Opera */
	letter-spacing: normal; /* Webkit */
}

At this point, everything should be working quite nicely. You can stop at this point, and have a fully working layout.

Adding the sticky footer is an added bonus. Here’s what you’ll need:

html, body {
	height: 100%;
}
html {
	background: green;
}
body {
	width: 960px;
	margin: 0 auto;
}
#container {
	word-spacing: -4px; /* IE, Firefox, Opera */
	letter-spacing: -4px; /* Webkit */
}
#content, .sidebar {
	word-spacing: normal; /* IE, Firefox, Opera */
	letter-spacing: normal; /* Webkit */
}
#header, #footer {
	min-height: 7.5em;
	background: orange;
	width: 100%;
}
#content, .sidebar {
	display: inline-block;
	vertical-align: top;
	padding: 9em 0;
}
#content {
	background: pink;
	width: 60%;
}
.sidebar {
	background: yellow;
	width: 20%;
}
#header {
	margin-bottom: -7.5em;
	position: relative;
	z-index: 10;
}
#container {
	position: relative;
	z-index: 0;
	min-height: 100%;
}
#footer {
	background: blue;
	color: #FFF;
	margin-top: -7.5em;
}

And add this in your IE CSS for IE 6 (because it doesn’t understand min-height, and instead interprets height to behave like min-height):

* html #container {
	height: 100%;
}

And that should be that. Comments welcome.

My mobile phones over the last 14 years

blueangel — Sun, 14 Nov 2010 21:20:31 +0000

I recently upgraded my mobile phone. Some might say this is hardly newsworthy; for me, however, it was quite a big deal because for the fist time in about a decade, I’d be moving away from the Finnish mobile giant Nokia. I’d been a devout fan of the Espoo-based handset manufacturer since I owned my trusty Nokia 6110. Over the years I migrated from handset to handset, each time upgrading ever so slightly to something a little better, a little more advanced. I’d like to share my experiences in owning these handsets.

Alcatel One Touch Easy

My very first handset was, in fact, not a Nokia. It was the quintessential brick mobile phone. Hefty, sturdy, and with minimal functionality, my Alcatel One Touch Easy was my first foray into the world of mobile telephony. I never managed to quite figure out how to send an SMS, but at least I could make and receive calls with relative ease. To be fair, the coolest features of the phone was the little aerial which one would ceremoniously pull out when answering a phone call, and the fact that the 25 phone numbers you needed to know were pre-programmed into the phone memory. To this day I’m still not quite sure what happened with this phone.

Nokia 6110

Next up was my very first Nokia – the 6110 I mentioned earlier. Man, I loved this phone. I could easily send SMS messages, I could change my operator logo, and above all, it was pretty to look at. That wonderful blue/green/purple metallic cover was just the coolest!

Nokia 3210

Next up was the Nokia 3210. Equally sturdy, with a slightly larger screen and a space for a few more contacts on the SIM card.

Nokia 7110

After that, I got the Nokia 7110. The extractable antenna made a not-so-welcome return, as did the slider. Using this phone, I experimented with WAP sites for the first time, but all things considered, it wasn’t all it cracked up to be, which explains why I only ever did it once.

Nokia 6310i

Next up was my Nokia 6310i. A very smart phone for it’s time with its sleek silver design, it had a beautiful light blue backlit LCD display, with 32 shades of monotone blue shades, instead of the usual single green backlit LCD display all the previous phones had. It had Java and much more storage capacity, a handy voice recorder which you could use to record conversations. I very much liked this phone.

Nokia 6820

Next up was my first foray into what many now consider to be a “smartphone”. My very first phone with a full colour display and a full QWERTY flip-out keyboard and a camera! Although the display was quite small and the pictures were horrible quality, the immediacy of being able to take a photo and send it to someone halfway across the country via something called a “multimedia message” or MMS for short, was just phenomenal. Or, at least, the idea of it was. In reality I had to wait quite a while before anyone else I knew also had a phone which could actually receive a MMS… After a few weeks with this phone, I was turning into a real power texter, with the ability of using both thumbs to type enabling me to churn out messages rapidly and accurately.

Nokia N70

My next upgrade phone was the fantastic Nokia N70. At least, that’s what I thought for a while. It was everything the 6820 wasn’t – wonderful big screen, a much better camera, a much improved user interface. Except for the QWERTY keyboard which I admittedly missed quite a bit. The ability to download and install applications (like Opera Mini, Mxit, etc) was also quite nifty. The built-in music player and FM radio was also quite awesome. However, after a while the slowness of the user interface started annoying me.

Nokia N95 8GB.

Nokia N95 8GB

What a phone! All the annoyances of the N70 were nowhere to be seen on this phone. It truly felt like an evolution. More speed, more features, more megapixels on the camera, more everything. Admittedly, in the two odd years that I used this phone, I’d become slightly jaded about the concept of a smartphone, with the rise of Android powered phones, and the iPhone which was released shortly after I upgraded to the N95. I was very happy with this phone, nonetheless. My only gripe would be that almost none of the really cool applications I read about on the Internet were available for this phone because, like many other Nokia’s before and after this phone, it runs on Nokia’s own Symbian operating system – which means applications either have to be Java-based (which means they’ll be slow) or a seperate, Symbian version of said applications have to be coded. And for most companies, this isn’t a viable option. And this left me wanting.

HTC Desire

I’d decided early on that my next phone was going to be Android-powered. I finally decided on the HTC Desire, and to be honest, I am blown away by this phone. The advances that have been made in the smartphone arena in the last two years, are simply breathtaking. The list of talking points on this phone seem virtually endless: multi-touch touchscreen interface, voice recognition (across the board, accessible in many applications).

How to do image rollovers in HTML email.

blueangel — Tue, 27 Jul 2010 19:17:02 +0000

A while back I was asked to do an HTML email with an active state rollover image. At first I thought it was impossible, since we all know it’s impossible. You can’t embed Flash movies or videos in HTML email, right? (although you can attach them, of course).

I discovered a technique to embed image rollovers in HTML emails by using a mix of old school and new school technologies. Since JavaScript in email clients is disabled (at least all desktop and decent web versions like Gmail), that is out of the question.

If you thought standards compliance for web browsers was a tough nut to crack, don’t even get me started on HTML/CSS support for email clients. It really is a hundred times worse, with Lotus Notes being the Internet Explorer 6 of email clients. The method described below will not work across every email client, I did try to employ the principles of graceful degradation and as such in email clients that don’t quite understand what’s going on, the link will still work without the hover effect.

A lot has been written about support for CSS layouts in HTML emails, and although I have fully ditched tables for layout in web pages years ago, sadly this is not quite the case if you want your email to even remotely resemble the design the client has approved after various rounds of back and forth between designer and client.

Start with the basics (the “old school” part):

<table>
    <tr>
        <td><a href="#"><img src="#" alt="Link title" /></a></td>
    </tr>
</table>

Do achieve the rollover, we need our linked item to be an image. The rest is going to be done with some clever CSS (the “new school” part).

<table id="contentTable" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td height="25">
			<a style="background-image:url(over.gif);height:25px;display:block;" href="example-1.html">
				<img src="http://chrysalis/simple_html_dom/test/normal.gif" alt="Link title" border="0" />
			</a>
		</td>
	</tr>
</table>