SpriteMe – Tool to Generate CSS Sprites

Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There’s a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the click of a button…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Simple CSS Tips that Go a Long Way

Sometimes it’s the little things that can make all the difference and there are plenty of neat little CSS tips that can help with all aspects of design and development. Here are a few great tips that will help you improve your CSS work and help you get the most out of your code…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS3 Hover Tabs without JavaScript

With the new techniques in CSS3 and clever applications of existing CSS it is increasingly stepping on the toes of JavaScript. Which to be honest isn’t necessarily a bad thing. I thought I’d try my hand at something so here is a basic CSS tabbed content section that changes on hover…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Essential CSS/HTML Lists Styling Techniques

Certain elements in HTML lend themselves to many situations when marking up a website, one of the more useful of these elements is the HTML list. Using lists, a developer can markup horizontal navigation, dropdown navigation, a list of links, and even scrolling content panels with the help of Javascript. These features can help developers build new sites and applications as well as integrate new content into existing applications…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Fixed Positioning in Internet Explorer 6

Fixed positioning has always been a nuisance for web designers because of the lack of support for it in Internet Explorer 6, but I've come up with a solution that allows for cross-browser fixed positioning that doesn't come at the large costs that other techniques result in. If you've been on the hunt for a way to get elements with position: fixed; to work properly in Internet Explorer 6, undoubtedly you've noticed that most methods come at the expense of absolute positioning or resorting to scripting. This does not…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)