Smoother @font-face embedding in IE 7 & 8

You could say I’ve become somewhat obsessed with @font-face embedding over the past few months. I’ve most certainly fell head over heels for the @font-face generator from see the recap below.One thing however that has always bothered me is IE7 and IE8’s rendering of embedded fonts, so today with IE tester at hand and google ready to get wild I vowed to come up with a solution and I think I may just have…

Remembering: The CSS3 Multi-Column Layout Module

Because I will not shut up about CSS3, this time I’ve decided to show you a little bit of the multi-column layout module. This module allows you to layout the content of an element in multiple columns, like flowing text on a newspaper-type layout…

Equal Height Columns – Companion Columns Method

The search for a technique that offers real equal height columns leads nowhere because we don’t have full vertical control in current CSS 2.1 implementations cross browser. The available techniques are simulations of columns: a repeated image displaying Faux Columns [Cederholm], columns made of borders [Livingstone], and variations.

We couldn’t even fall back on a (CSS-)table, since there is no broad, sufficient implementation of display: table in the browsers. And a table would dismiss the accessibility request for having the columns logically ordered in the source.

OneTrueLayout [Robinson] uses a promising technique [Challoner] where the columns are still not equal in height, but they are cut in length, so they appear as-if. Surprisingly, this trimming made problems that are not solved.

In this article, we draw up a variation for the equal heights columns illusion, standing on the shoulders of OneTrueLayout. Both techniques use excessive padding and compensating negative margins, a tricky concept…

On Having Layout – The Concept of hasLayout in Internet Explorer

A lot of Internet Explorer’s rendering inconsistencies can be fixed by giving an element “layout”. John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs” meaning that they can often be solved by applying a width or height. This leads to a question of why “layout” can change the rendering of and the relationships between elements. The question, albeit a good one, is hard to answer. In this article, the authors focus on some aspects of this complicated matter…

Emastic CSS Framework

Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before.

Why should you use emastic?

  • Lightweight (compressed weight less then 4kb)
  • Personalized width of the page in (em,px,%)
  • Use of fixed and fluid columns in the grid.
  • Elastic Layout with “em”s

YAML XHTML / CSS Framework

“Yet Another Multicolumn Layout” YAML is an XHTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

  • Focussed on web standards and accessibility
  • Slim framework core with numerous extensions
  • Robust, flexible layout concept columns & grids
  • Design patterns for typography, forms, mircoformats, rtl support ect.
  • Complete multilingual documentation

The Mystery Of The CSS Float Property

In this article, we’ll discuss exactly what the float property is and how it affects elements in particular contexts. We’ll also take a look at some of the differences that can occur in connection with this property in the most commonly-used browsers. Finally, we’ll showcase a few practical uses for the CSS float property. This should provide a well-rounded and thorough discussion of this property and its impact on CSS development…

Fluid Images in CSS Fluid Layouts

One of the really solid criticisms lobbied against my Fluid Grids article for ALA was that all of my examples were pretty text-heavy. As a result, they all more or less ignored the issue I raised at the end of the essay: that working with non-fixed layouts can be more difficult once you introduce fixed-width elements into them. By default, an image element that’s sized at, say, 500px doesn’t exactly play nicely with an container that can be as large as 800px, but as small as 100px. What’s a designer to do?

Really Simple CSS Trick for Equal Height Columns

This tutorial describes a really simple CSS trick to implement a fake equal height columns effect using the CSS properties position:absolute and border. Before to proceed I suggest you to download my CSS 2 Visual Cheat Sheet for a practical reference guide to CSS 2 properties that can help you understand concepts illustrated in this post…

Purely CSS – Faking Minimum Margins

Sadly, min-margin is nonexistent in the CSS world. I was okay with that – until recently, when I realized I needed it. After a fair share of general thought and Google usage, I arrived upon a solution, which I invite you to check out below. So what situation would you need min-margin in? Take a second to look at the demo to see a before and after…