Feb20

Cross browser equal height that works

Note: This article was first posted to the Lemon Digital Blog. Since its dawn, CSS has been plagued with the lack of a bullet proof technic to produce equal height columns, boxes and grids. The fortunate few have been able to avoid this problem by “designing for the Web” — no crazy fonts; no equal [...]

By caphun · in CSS · Tagged , , · Comments (2)
May21

Targeting Safari 3

Found this CSS hack for Safari 3 today which can be handy from time to time: @media screen and (-webkit-min-device-pixel-ratio:0){ /* Safari 3 specific styles go here */ } Most of the time if something looks good in Firefox 2 there’s a 99% chance it will in Safari 3 too. So use this hack sparingly [...]

By caphun · in CSS · Tagged , , , , · Comments (0)
Apr12

The PNG Transparency Trap

Yesterday’s featured tutorial on Ajaxian.com was titled: Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery by Brian Dillard. I wonder how this tutorial got onto Ajaxian as the topic is so much out of date. Ajaxian has always been a place of inspiration and a pit stop for the latest [...]

By caphun · in CSS, Reviews, Web Standards · Tagged , , , , , , · Comments (1)
Mar27

CSS Diagnostics

What is CSS diagnostics? It’s a method of applying styles to elements in your markup to catch standards compliance issues. A way of ensuring you don’t leave any serious accessibility holes and a visual deterrent for web authors editing pages with diagnostics switched on. Here are some resources I found useful in understanding the practicality [...]

By caphun · in CSS, Tools · Tagged , , · Comments (0)
Jun04

Clearing floats without added markup

When floating an element it is taken out of the document flow. As a result, anything containing the floated element does not take on its width or height. Like most developers, to overcome this problem I applied an extra clearing DIV below the floated element. But this isn’t ideal as it just added more unmeaningful [...]

By caphun · in CSS · Tagged , , · Comments (0)
May27

Styling table columns

The Colgroup element has existed for quite some time now. Its purpose is column grouping. It’s also in the class of under used elements. With Colgroup each column can be styled individually in a way similar to how we style table rows. Unfortunately most of todays browsers do not fully support the styling capabilities of [...]

By caphun · in CSS · Tagged , , , , , · Comments (0)
Apr03

CSS Naked Day

In an effort to promote Web Standards, Yelotofu will be stripping off on April 5th for CSS Naked Day. There will be no CSS, no design, no supflourious layouts on this site to distract you from the content.To find out more take a look at the official CSS Naked Day ’07 site. Come on, join [...]

By caphun · in CSS, Web Standards · Tagged , · Comments (0)
Feb08

@font-face reloaded

@font-face is W3C’s answer to font embedding. It was introduced as a CSS2 standard but later dropped in CSS2.1. You might remember the font embedding hype 2 or 3 years ago that just died off silently. The problem with @font-face at the time was the inconsistency of implementation across browsers, even the font type could [...]

By caphun · in CSS · Tagged , · Comments (0)
Jan22

Interesting CSS websites

I recently came across two very interesting CSS websites, CSSplay and CSS3.infoCSSplay is totally amazing, it’s a real eye opener on what could be achieved with pure CSS madness. It contains useful implementations of CSS2 rounded corners, drop down menus, CSS image gallery and even drawing with CSS! CSS3.info on the other hand is not [...]

By caphun · in CSS, Reviews · Tagged , · Comments (2)
Jan08

Proof that IE6 is crap

I have more than often had to fire-up IE6 out from the “un-loved” software repository to get kicked right back in the face with weird CSS bugs. I believe those reading this must be aware of at least one CSS quirk in the IE6 browser. For example, the PNG Alpha Transparency bug, fixed by Microsoft’s [...]

By caphun · in Browser Testing, CSS · Tagged , , · Comments (4)