Archive for the ‘CSS Hacks’ Category

A new micro clearfix hack

Comments Off

The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required.

Read More »


CSS String Truncation with Ellipsis for IE FF Opera

Comments Off

We’ll start by adding a class “.ellipsis” to the p tag and building it by example. Add white-space: nowrap, to limit the paragraph to a single line, and overflow: hidden keeps it from making the browser window wider. We then add width: 300px to limit the size (IE6 needs a width defined, even if it’s 100%) and begin constructing our label. Also, first recommended for CSS3 back in 2003[1], the CSS Text Module includes support for text-overflow: ellipsis. So putting that all together:

Read More »


How to achieve cross-browser font-face support

No Comments »

At the moment, web fonts are all the buzz. Unfortunately, achieving cross browser support is not easy. In this tutorial, I’ll show you how to get custom fonts working in all of the major browsers. use following link to view it

Read More »


Faux Columns Technique

No Comments »

It is very common in layouts to have 2 columns next to each other, with one column having a background color, and the other column just being white. Since the columns will almost never have the same amount of content in them, the easiest way to fake this, is to have a 1px tall background image being repeated vertically in the containing element of the 2 columns.

Read More »


Sticky Footer – A static footer with very little css

No Comments »

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer’s height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}

Read More »