[update: to get a bit more background on absolute & relative positioning, and how to center horizontally, read:  On Horizontal CSS Centering using Absolute Positioning or how Relative Positioning can rock your css.]

The regular way of vertically centring in css has been documented by Dušan Janovský back in 2004. It needs an extra div for its IE solution, but it doesn’t require any expressions, only regular (fast!) css. Because a div-tag is semantically empty (like the span-tag), it doesn’t add any wrong semantic meaning (like a table-tag would).

The .area div isn’t stricly necessary, but it was in the original problem posed in the css-tricks.com article. I have however edited out the superfluous background declaration, as it doesn’t have anything to do with positioning.

I’ve updated the example to use conditional comments instead of hacks. The html (in your page) becomes:

<div class="area" id="two">
<div class="bubble">
<div>
<p>Doing this may not be as easy or obvious as we would hope.</p>
</div>
</div>
</div>


The css (in your stylesheet) becomes:

.area {width:300px; height:300px; position:relative; float:left; }
.bubble {position:absolute; left:93px; top:21px; width:135px; height:84px; display:table; }
.bubble div {display:table-cell; vertical-align:middle; text-align:center;}


The IE specific css (in your html-page) becomes:

<!--[if lt IE 8]>
<style>
.bubble div {position:absolute; top:50%;}
.bubble div p {position:relative; top:-50%}
</style>
<![endif]–>

Have a look at the demo to see what you should end up with. Questions welcome!

Vertically centring in css (without hacks and multi-line enabled) originally appeared on Candy by James on 14 July 2009.

Ideally, designers would specify the font-file they wanted to use for regular text, and then one for each variation they had at their disposal (so, one for Bold, Italic, Bold Italic, Small Caps, Light, Ultra Condensed, etc.) – all using the same font-family name, so that all variations would be picked up automatically for body text, and, if @font-face isn’t supported by the browser,  all text will still display in the proper font-variant.

To do that, your css would look something like this:

/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_R_45b.otf) format("opentype");
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_B_45b.otf) format("opentype");
font-weight: bold;
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_I_45b.otf) format("opentype");
font-style: italic;
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_BI_45b.otf) format("opentype");
font-style: italic;
font-weight: bold;
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_SC_45b.otf) format("opentype");
font-variant: small-caps;
}

This would ensure proper fall-back in browsers that don’t support @font-face (or only part of it) and compatibility with current stylesheets, making @font-face implementation for designers plug-&-play.

The ideal @font-face rendering (on the left) and fall-back rendering (on the right) would look a little like this (notice the fi-ligature!):

You’ll have guessed by now that browsers haven’t reached this ideal implementation yet. The series will continue with CSS 3 Fonts: The here and now.

Information in this series was acquired while working on the design and css for the site of Standards.next and subsequent tests afterwards. The Fontface used in this example is Fontin Sans by Exljbris (Jos Buivenga).

CSS3 Fonts: The ideal implementation originally appeared on Candy by James on 12 July 2009.

Rain.

Hong Kong (via spaceships via talkev)

Rain.
Hong Kong (via spaceships via talkev) originally appeared on Candy by James on 24 June 2009.

Nice clear vertical design from YouWorkForThem. Good use of fixed positioning for the pagination.

Good Example: YouWorkForThem originally appeared on Candy by James on 2 June 2009.

Ootje Oxenaar designer of the most beautiful banknotes in the world. (Guilder notes, now replaced by the euro) – via www.creativereview.co.uk

Ootje Oxenaar designer of the most beautiful banknotes in the… originally appeared on Candy by James on 21 May 2009.

You’ll notice the logo is a lot smaller. What can I say? My cream ran out, plain and simple. I’m much happier with it, now it’s smaller. I’ve still to update the logos for the inspiration square.

The sidebar still suffers from mixed header styles headers have been updated too. Haven’t managed to add any other colours to the red & gold colour scheme yet though!

Make sure you visit my (on site!) Tumblr page. An upcoming post will describe how I managed to create internal links to the content there — the “latest interesting stuff” links in the sidebar are generated on the fly.

Of course, if you find any quirks, let me know.

Refreshed Candy originally appeared on Candy by James on 5 May 2009.

The first wallpaper is taken from the beautiful Jason Brooks illustration on the website of Fierce Angels, from their september 2006 re-style. A beautiful dark angel, with a big sword, high heeled boots and a thunderous sky above her. What more could you want?

Next up is a disco girl, taken from the cover of a Fierce Angels CD, Fierce Disco, in stores from 16th of April 2007. Somewhat less dramatic, but still nice to have if you’re a fan of the style.

Download: Fierce Angel 2006 & Fierce Disco. Enjoy!

Fierce Disco Angels Wallpaper (Double Bill) originally appeared on Candy by James on 27 April 2009.

In the  future, all houses should have stairs with a side slide. Via CookieMag.

In the  future, all houses should have stairs with a side slide.… originally appeared on Candy by James on 17 April 2009.

Jon Hicks has just redesigned his site. It includes a great contact page!

Jon Hicks has just redesigned his site. It includes a great… originally appeared on Candy by James on 16 April 2009.

El Ten Eleven playing Hot Cakes. Pure instrumental goodness. It’s like they only play the cool bits of rock songs.

El Ten Eleven playing Hot Cakes. Pure instrumental goodness.… originally appeared on Candy by James on 10 April 2009.

Craig Damrauer has some new math for us.

Craig Damrauer has some new math for us. originally appeared on Candy by James on 10 April 2009.

Has all 120 Crayon Names and Color Codes from Crayola. Brings back memories and great colour combinations!

Has all 120 Crayon Names and Color Codes from Crayola. Brings… originally appeared on Candy by James on 6 April 2009.

Eat Me Daily is a critical (and cynical) take on food, media, and culture.

Eat Me Daily originally appeared on Candy by James on 6 April 2009.

..has a great navigation. Very focused.

Matt Davey’s portfolio.. originally appeared on Candy by James on 6 April 2009.