CSS Positioning cheet-sheet. You actually need quite a bit of understanding of CSS to find this useful. I recommend David Sawyer McFarland's book, CSS The Missing Manual.
Jul 192010
Jun 252010
OK, so I feel it is officially time to kill IE 6 and below. IE 6 has been the bane of web developers' existence for quite some time now. I say, just kill it. If your product manager whines and says "but we need to support all browsers" insist that they reconsider. Management and product managers don't understand the real cost associated with supporting this awful browser. Many think that it's simply a little more tweaking. It's not. If they truly knew how bad it is they'd understand.
Mar 142010
Some experimentation with the text-overflow property.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div style="border: 1px solid red; max-width: 400px; overflow:hidden; text-overflow: ellipsis;">
<nobr>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac libero nec est luctus aliquam. Nulla sodales, dolor a consectetur volutpat, elit mi convallis sem, at ornare ligula odio non metus. </nobr>
</div>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div style="border: 1px solid red; max-width: 400px; overflow:hidden; text-overflow: ellipsis;">
<nobr>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac libero nec est luctus aliquam. Nulla sodales, dolor a consectetur volutpat, elit mi convallis sem, at ornare ligula odio non metus. </nobr>
</div>
</body>
</html>
Firefox 3.5
Safarai 4
IE 7
A little CSS pattern to demonstrate what to do when you want one column to stay at a fixed width and the other column to stretch horizontally with the window. Thanks to my friend CSS guru Joe Silvashy for this one.
What I want it a column on my right side to be a fixed width, and the column on the left to stretch with the window gracefully (in web terms this is called a "liquid" layout).
Nov 082009
A few CSS techniques used by the pros.
Sep 222009
Symbols used in CSS
| symbol | name | what for | notes |
|---|---|---|---|
| . | dot (period) | denotes class value | |
| # | pound | denotes id value | |
| * | star | universal selector | |
| space | descendant selector | ||
| , | comma | group selector | |
| : | colon | used for pseudo-classes | only :hover and :active are supported by older IE versions; different pseudo-class support based on browser |
| > | greater than | child selector | not supported by IE6 & earlier |