Snipplr

(CSS) No More IE6 Background Flicker - fael

Mon, 16 Oct 2006 07:56:01 GMT

original post by Cristi Balan: http://evil.che.lu/2006/9/25/no-more-ie6-background-flicker

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

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).

(CSS) Background images for bullets list - fael

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) Table with style, CSS - fael

Wed, 16 Aug 2006 14:52:13 GMT

Table with style as in; http://24ways.org/examples/tables-with-style/table_columns.html

(CSS) CSS ROUNDED CORNERS - fael

Wed, 16 Aug 2006 10:06:11 GMT

(CSS) Reset Browser Styles - fael

Fri, 11 Aug 2006 12:00:14 GMT

Put this these rules at the top of your CSS file and it will reset the default settings across all browsers to render the same. It's a great starting point for any new design. I took these rules from the Yahoo! YUI opensource kit.

(CSS) Basic CSS Template - fael

Thu, 20 Jul 2006 20:55:36 GMT

(CSS) ClearFix - fael

Tue, 18 Jul 2006 03:25:59 GMT

(CSS) Fix li Background Repeat Bug In IE - fael

Sun, 16 Jul 2006 14:07:25 GMT

A bug seems to occur when you add a negative margin to a list item in IE6. The background image applied to the list item gets repeated randomly and generally messes up. Add this little gem to your head to fix the problem. Remember to change the id tag to your own.

(CSS) CSS Box Model Hack - fael

Sat, 15 Jul 2006 09:04:30 GMT

The CSS standard defines the width of a box as the width inside the box. Padding, border and margin are added seperately. The same applies to the height of a box. (!!) IE 5.X WIN (!!) fails to implement the specification correctly. Border and width inside the box are added to the width. A box with a width of 200px, a padding of 20px and border of 10px results in a width of 260px in Mozilla and 200px in Internet Explorer. This can be extremely tedious if you want to do a pixel perfect layout. TANTEKS HACK: (named after it's inventor) utilizes this weakness. width:200px; is the defintion for Internet Explorer. IE stops processing the CSS rules after voice-family: "\"}\"";. Other browsers recognize the the value after it and overwrites the value. Opera doesn't, unfortunately

(CSS) CSS Anchor Basic Styling (a:link, active, visited, hover) - fael

Sat, 08 Jul 2006 14:02:58 GMT

Simple styling for the links on a webpage using CSS. Sometimes hard to remember what order the have to be in for the :hover to work correctly. (Now fixed :)

(CSS) Dead Centre a DIV - fael

Wed, 05 Jul 2006 10:02:21 GMT

Taken from Dead Centre. Adjust #content depending on the size div you need.

(CSS) CSS Box Model Hack - fael

Tue, 04 Jul 2006 07:50:38 GMT

classical box model hack, by Tantek Çelik http://www.tantek.com/CSS/Examples/boxmodelhack.html

(XHTML) XHTML 1.1 web standards template - fael

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 - fael

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...

(CSS) Clear floats without structural markup - fael

Thu, 29 Jun 2006 14:00:48 GMT

".clearfix" is the container that holds all of your floated elements. Works in all browsers that support "float" and "clear".

(CSS) min-height for IE (and all other browsers) - fael

Wed, 31 Dec 1969 19:00:00 GMT

Since min-height doesn't work in IE, this code makes up for IE's shortcomings. The first part of the code is the correct code that works in Firefox and Safari. The second part of the code is for IE. Internet Explorer will ignore min-height and is just given a height of 8em. The IE bug automatically expands the container to fit the extra text.