Design Notes: A CSS Web Designer’s Blog

Using CSS Filter Hacks

Sometimes there’s a piece of CSS you just have to use for one browser and hide from the rest. In a case like that, you will need a hack or filter. Today, I found an interesting chart that shows various filter hacks and which browsers they target. Take a look: http://centricle.com/ref/css/filters/

October 25th, 2006

MySQL - Select Entire DB Row With One Field DISTINCT

Yesterday, I needed to select a list of albums from a database searching on a list of instruments the artists played. This worked fine as long as there were not multiple artists playing the same instrument, in which case, the album was repeated in my list for each instance of the selected instrument.

To fix the problem, I needed to select that album as DISTINCT even though my search string was repeated. I found a code snippet that I modified to achieve this on the MySQL site here:

the whole query for retrieving an array of rows with one field distinct (no repeats) is:
select *, count(FIELD) from TABLE group by FIELD having count(FIELD)>=1;

October 24th, 2006

Yahoo! UI Library CSS Grids

There is a new breed of Web designers learning CSS web design techniques instead of transitioning from table based Web design. For them, tools like the Yahoo! UI Library CSS Grids page will be very valuable. There is an active support community which should offer an environment where a beginner can navigate some of the difficulties of learning CSS.

The library shows how to create multiple Web layouts from a single CSS file, enabling newcomers and old-timers alike to harness more of the power and efficiency of Cascading Style Sheets.

Update: Nate Koechley has written an informative tutorial on using the Yahoo! UI Library to create CSS grids. There are several functioning examples provided. I found this tidbit thanks of Stylegala.

October 16th, 2006

No More Flicker: IE6 CSS Image Flicker Fix

Big news in August slipped below my radar. What’s the fuss? There’s now a fix for a small but frustrating problem that has plagued CSS designers ever since the release if Internet Explorer 6.

When a mouse rolls over a link that the designer has styled with a background Image, IE6 shows a flicker as it changes states. Though there were cumbersome fixes, nothing was available that worked simply and elegantly.

Enter Dan Popa’s IE6 Image Flicker solution. A simple Javascript snippet placed in your HTML document’s head element fixes the caching problem completely!

Here’s the code:

javascript:void(document.
execCommand("BackgroundImageCache",false,true))

Thanks Dan!

1 comment September 29th, 2006

How an Apostrophe Can Cost You Search Engine Traffic

What’s the difference between a Web page titled:

Bob’s Doggy Treats

And one titled:

Bob's Doggy Treats

Maybe more than you think … it’s all in the apostrophe.

Recently, I noticed that a client had pasted their business name from Microsoft Word into their Web site title tag without converting their apostrophe from Word’s character entity to the straight text-only apostrophe that HTML requires.

Initially, I was not very concerned until I Googled for the client’s name and it was nowhere to be found. Other similar business names were in the search engine results pages where my client should have been. Though most Web browsers are able to interpret the Word markup visually, it made no sense to Google, who treated the apostrophe pasted from Word as part of the business name instead of punctuation. For a business who relies on search engine traffic, this can be a costly mistake.

This post is a short reminder that cutting and pasting from Microsoft Word into a Web page document is ALWAYS a bad idea. If you need to cut and paste, a short workaround is to copy from Word into a text editor like Notepad. Then, copy the text from Notepad into your Web page. This removes most of the extra characters could potentially harm your Web page.

1 comment August 28th, 2006

Javascript Library JQuery Adds Drag and Drop Interface Elements

Over the past few months, the range of behaviors available via the JQuery library has grown rapidly. Initially, it was fast way to hide and show divs and change CSS classes on the fly with very little hand coding. Now, it has matured into a library of behaviors that can empower Web designers with high quality animation and interactivity.

view some additions to JQuery | digg story

August 23rd, 2006

Failsafe Page Redirects with PHP

If you ever need a failsafe way to redirect browsers with PHP, whether or not the page headers have already been sent, look no further than Jakob B.’s snippet on PHP.net.

This code snippet uses the cleanest method, the php header function, if it is available. Otherwise, it defaults to javascript. Failing that approach it uses the old meta refresh method.

August 19th, 2006

Fixing the IE Double Margin Bug

Today I decided to start a blog category of CSS Bug Fixes more for myself than for anyone else. I often read about simpler ways of fixing bugs and misplace the facts somewhere in the jumble of thoughts and busyness. Here’s the first installment:

The IE double margin bug shows up in practically every floated layout I create using CSS. Sometimes I use a CSS hack to set margins specifically for IE and others for Firefox and more modern browsers. Now, thanks to CSS Mastery by Andy Budd, and Bulletproof Web Design by Dan Cederholm I am reminded that there is a much more elegant solution than setting alternate margins for IE. If there’s a choice between fixing the problem or managing symptoms, I’ll choose the former every time!

The solution to the IE Double Margin Bug on floated elements is to set the floated element’s display property to inline.

For example:

.column { float:left; margin-right:10px; }
/* For IE */
* html .column { display:inline; }

I hope this helps you. Now this fix is in a place I’ll be able to find when I need it. More coming soon …

2 comments August 17th, 2006

The Elements of Style for Designers

Every once in a while, I read something so simple, clear, and essential I wish I’d written it myself. The Elements of Style for Designers is well-written prose that was fun to read and reinforces the basics of balancing good design with usability. That balancing act is the most difficult and relevant task of results-oriented designers.auditory christine sloancalculator cibc loanciti consoladation loansloans citibank educationauto citifinancial restructure loanrate citifinancial loanbank citizens loan savingsloans definition classified Map

Add comment July 25th, 2006

The Redesigned Design Delineations Web Site Launches

This evening, I finished the rough draft of the new Design Delineations Web site (http://designdelineations.com) and integrated the template into the existing pages. The new Web site uses the latest CSS techniques and unobtrusive Javascript for tabbed navigation with submenus and sports a completely new look and feel.

Over the next few weeks, I will continue to rework the content on the site by creating new copy for most pages and adding graphic elements where needed. As time allows, the blix theme being used by this blog will also give way to the look and feel of the main site.

July 21st, 2006