Snipplr

(CSS) Accessible CSS Forms: Using CSS to Create a Two-Column Layout - designerd

Thu, 31 Aug 2006 13:20:42 GMT

In a recent study of web design patterns, Dr. Melody Ivory found that accessibility is the most underutilized aspect of good web page design (Ivory 2005). In fact websites have become more complex and less accessible over time (Hackett 2003). Less than 20% of the Fortune 100 have websites that are fully accessible (Loiacono 2004). Accessible forms are one way to combat this disturbing trend. With CSS layout, you can create two-column forms without the use of tables to save space and time. This article shows how to create a simple two-column contact form using CSS to style structural elements that is both fast and accessible. A survey of CSS-based forms revealed many variations on a theme (see Vandersluis 2004). Most use block-level floats and margins to position form elements on the page. However, in my testing I found IE5.x Mac to have rendering problems with many of these forms. After numerous iterations, I arrived at a solution that worked for IE5.x Mac as well as Safari 1.07 Mac, Firefox 1.07 Win/Mac, IE 6 Win, Camino, and Opera. Our goal here is to create a simple accessible contact form without the use of tables (see Figure 1).

(JavaScript) Coloring Form Elements on :focus - designerd

Wed, 30 Aug 2006 02:07:13 GMT

(CSS) Background images for bullets list - designerd

Mon, 28 Aug 2006 04:59:27 GMT

To move the content away from the background image apply "padding-left" to the "LI" element. In this case "0.6em" has been used. As with vertical alignment, list padding will be determined by the size of your image.

(CSS) CSS ROUNDED CORNERS - designerd

Wed, 16 Aug 2006 10:06:11 GMT

(CSS) Horizontal-Vertical div align - designerd

Sat, 05 Aug 2006 10:26:02 GMT

(CSS) WinIE PNG Filter - designerd

Tue, 18 Jul 2006 04:36:44 GMT

(CSS) ClearFix - designerd

Tue, 18 Jul 2006 03:25:59 GMT

(HTML) Countries Menu - designerd

Mon, 10 Jul 2006 15:07:00 GMT

(HTML) XHTML 1.1 Strict Template - designerd

Sun, 09 Jul 2006 23:09:51 GMT

A basic XHTML 1.1 Strict template with CSS cross-browser fixes already in place.

(CSS) min/max-width fix for IE6 - designerd

Sun, 09 Jul 2006 19:48:32 GMT

Javascript expression in css to allow for min/max widths. replaces the min-width, max-width that works for IE6.

(HTML) Standard Compliant Way to Open a New Page (no target tag) - designerd

Sat, 08 Jul 2006 13:30:23 GMT

Very simple standard compliant way of opening a page in a new window. Since XHTML 1.0 Strict doesn't allow the target attribute in the tag. This method isn't recommended, use the DOM folks! See "Standard Compliant Way to Open a New Page Function" in my other snippets of code.

(JavaScript) IE 5.5 & IE6 PNG Transparency Fix (Prototype required) - designerd

Sat, 08 Jul 2006 06:55:21 GMT

(HTML) XHTML 1.0 Transitional Basic Template - designerd

Thu, 06 Jul 2006 01:46:57 GMT

Basic template for xhtml transitional

(HTML) hCalendar - designerd

Thu, 06 Jul 2006 01:34:22 GMT

(CSS) Big Curly Blockquotes - designerd

Wed, 05 Jul 2006 11:08:19 GMT

Markup example: See Big Curly Quotes Markup. Thx to difusion.org.uk. No need for images to make big quotes on a page, CSS does it for you. Tested in many browsers.

(HTML) XHTML 1.0 Strict Doctype - designerd

Wed, 05 Jul 2006 09:31:18 GMT

(HTML) hCard (Microformat for vCard) - designerd

Tue, 04 Jul 2006 19:41:06 GMT

hCard is a simple, open, distributed contact information format for people, companies, and organizations.

(XHTML) XHTML 1.1 web standards template - designerd

Sun, 02 Jul 2006 19:24:11 GMT

This is a generic template for an XHMTL 1.1 doc that I start with at the beginning of every project. Then i setup the directories to match. I use @import for CSS, then a seperate CSS file for screen-specific, and then one for print, …yes, then one for IE. I have the basic DIV structure setup, too. For a link to the inspiration of this template and further explanation (better), see this wonderful article: http://particletree.com/features/quick-start-your-design-with-xhtml-templates/ Hope it helps!

(CSS) Opacity Hack - designerd

Sun, 02 Jul 2006 16:31:25 GMT

Sets the opacity of an element and its children. Doesn't validate. Mozilla began supporting the opacity rule in version 1.7, so '-moz-opacity' may not be necessary...

(JavaScript) GetElementsByClassName() - designerd

Thu, 29 Jun 2006 14:13:46 GMT

From here: http://www.dustindiaz.com/top-ten-javascript/