Mar 26

The next CSS Off contest is April 5. At one minute past midnight (12:01 am), you will have 24 hours to send your entry in.

The winning entrant not only gets to feel really cool, but either receive a cash reward or a doubled cash donation to a charity.

It’s fun. CSS up.

Mar 06

If a design calls for a graphical horizontal rule, often front end developers will stick in an img tag and call it a day. However, an hr tag would be more semantic - and, most rich text editors for content management systems have a button for the horizontal rule.

These styles allow cross-browser image replacement for horizontal rule. In my implementation, the IE rules needed to be embedded, but it may have simply been a style overriding elsewhere in the stylesheet. Try it in a conditional commented stylesheet first.

The modern method uses background-image to replace the hr, which is defined normally by border. IE works some wonky stuff with list-item and you may have to scoot things around to get it to work just so, but it works!

CSS:
  1. /* ------- EMBEDDED ------- */
  2. <!--[if IE]>
  3. <style type="text/css">
  4. #primary-content  hr {
  5.     display : list-item;
  6.     list-style : url(/assets/images/wide-rule.gif) inside;
  7.     filter : alpha(opacity=0);
  8.     margin-left: -10px;
  9.     width : 0;
  10.   }
  11. #secondary-content hr{
  12.     display : list-item;
  13.     list-style : url(/assets/images/med-rule.gif) inside;
  14.     filter : alpha(opacity=0);
  15.     margin-left: 0px;
  16.     width : 0;
  17. }
  18. </style>
  19. <![endif]-->

CSS:
  1. /* ----- STYLESHEET ----- */
  2.  
  3. hr{
  4.       background:url(short-rule.gif) repeat-x top left;
  5.       border: 0;
  6. }
  7. #secondary-content hr{
  8.       background:url(med-rule.gif) no-repeat top center;
  9.       border: 0;
  10. }

Mar 03

It's such a simple thing but I actually googled this because I couldn't think of it offhand.

CODE:
  1. <cfif len(str)>
  2.      <cfoutput>#str#</cfoutput>
  3. </cfif>

if str has zero characters, len(str) will return 0, mimicking behaviour of false. Cool!

Sean posted about thisisnathanjohnson.com, which is essentially my jennyisms category on steriods. Except it's full of nathanisms. Awesome.

The cat's almost out of the bag... Say whaaat? Any guesses on the mystery product?
Via Josh.

Twitter is even broken-cute.

Cute When Broke

Feb 26

Yes, I ordered these. Yes, you want one. Every web developer should not be without one.

At Symbol (@) Paperweight: At Symbol Paperweight

At Symbol (@) Bookend: At Symbol Paperweight

In the Barnes & Noble brick and mortar, I noticed that they also had ampersand symbols (&). So cool!