Snipplr

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

Wed, 31 Dec 1969 18: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.

(CSS) CSS Rounded Corners - zensir

Wed, 16 Aug 2006 10:06:11 GMT

(CSS) Opacity Hack - speck

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

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) Dead Centre a DIV - 1man

Wed, 05 Jul 2006 10:02:21 GMT

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

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

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.

(CSS) Big Curly Blockquotes - 1man

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.

(CSS) Handy CSS Debug Snippet - 1man

Mon, 07 Aug 2006 13:30:38 GMT

Great little debuging snippet found while browsing. The code adds different coloured borders to the assets depending on its level. Leave commented out if not needed.

(CSS) CSS Image Preloader - aznprncritic

Sun, 04 Feb 2007 19:47:05 GMT

A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: "". Whenever the images are referenced throughout your pages they will now be loaded from cache.

(CSS) CSS Box Model Hack - alvaroisorna

Tue, 04 Jul 2006 07:50:38 GMT

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

(CSS) A CSS-based Form Template - damarev

Tue, 09 Jan 2007 02:38:30 GMT

(CSS) Master Stylesheet - j_junyent

Sat, 01 Dec 2007 15:15:09 GMT

One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.

(CSS) Background images for bullets list - zensir

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) Horizontal-Vertical div align - luman

Sat, 05 Aug 2006 10:26:02 GMT

(CSS) undohtml.css - Tantek's Original (Removes Browser Default Style) - expertseries

Fri, 07 Jul 2006 18:19:28 GMT

Purpose: undo some of the default styling of common (X)HTML browsers. (CC) 2004 Tantek Celik.

(CSS) 8 Font Stacks - chippper

Wed, 07 Jan 2009 11:03:14 GMT

From Michael Tuck's article

(CSS) ClearFix - masaya

Tue, 18 Jul 2006 03:25:59 GMT

(CSS) rounded corners without images - olive

Tue, 24 Oct 2006 11:38:19 GMT

(CSS) 8 Premium One Line Css Tips - zingo

Wed, 09 Apr 2008 19:56:26 GMT

(CSS) Transparent PNG Fix for IE 5.5 & 6 - jonhenshaw

Wed, 07 Mar 2007 12:10:25 GMT

This is an excellent solution for fixing IE 6's inability to display transparent PNGs correctly. Step 1: Include the following conditional comment the HEAD area of your document. You will need to update the CSS selector and also the path to whereever you put the .htc file.  Step 2: Create a transparent GIF that's 1x1 and save it as blank.gif in your images folder. Step 3. Copy the source below and save it in a file called iepngfix.htc and place it in your CSS folder. Note, you may need to update the images folder to match the folder you're using on your site. That's it. Once you have everything in place and assuming everything is referenced correclty, PNG transparency will work in IE 6.

(CSS) Table with style, CSS - zensir

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 Sticky Footer - rouxmout

Wed, 02 Apr 2008 13:16:39 GMT

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

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) Reset Browser Styles - tylerhall

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) WinIE PNG Filter - masaya

Tue, 18 Jul 2006 04:36:44 GMT