Assorted CSS samples on Phrogz.net

The content really should be moved into the WebShop (along with all of the /JS directory) but I'm too lazy to do that now.

Table of Contents

Articles

How To Develop With CSS
An article full of instruction and tips on the zen of CSS development.
Understanding vertical-align
A mini-tutorial on the vertical-align property and its confusing behavior.
Understanding Floats
A short tutorial to help understand the CSS float and clear attributes, and how to use them.
Why Tables Are Bad (For Layout)
A somewhat zealous list of reasons why tables should not be used for layout, compared to semantic HTML+CSS. Note that you can click on any bullet point to get a link that goes right to it.
Understanding the HTML versus BODY Element in CSS
A tutorial on how CSS styles and layout are applied to the html and body elements.

Techniques

Tabtastic
A JS/CSS library for making tabbed-view implementations easy/automatic.
'Full-Height' Columns Using Borders and Columns, Simplified and Three Columns Using Borders
Shows how to implement a cross-browser 2-column layout with either column being extra tall, with the appearance that each column goes all the way to the bottom.
Perfect Shadows and CSS Only Perfect Shadows
Two techniques for taking 9 alpha-transparency PNGs and layering them behind the content for fuzzy shadows with rounded corners which may be stretched and offset any which way.
2 columns via absolute positioning
A stupid way to implement a two-column layout. (I forget why I did this for someone.)
Fixed Top/Bottom Offsets
Showing how to simulate a framed layout in CSS, with fallback for IEWin.
See also mmmbeer's (different) implementation.
Accessible Sidebars
Shows one way to implement a right side bar while keeping the HTML for it after the content for the main column.
LabelTip testbed
Showing off a JS/CSS pairing for making a DHTML tooltip appear for form elements automaticlly.
Blockquote Citations
Showing an advanced CSS technique for automatically creating and displaying citation information for a blockquote.
Column Overlap
Since negative margins for floats don't work well in IEWin, shows how to make pull quotes that float 'outside' their container.
Corners and Semanticless Rounded Corners
Shows a clean cross-browser way to layer images at every corner of an item. See also this example showing the technique with transparent PNGs layered over an image.
See also Sammich.
Transparent Rounded Corner
How to create a truly transparent rounded corner for content (not a hack that matches a solid background color).
See also Sammich.
Sammich
CSS code to wrap graphics around an arbitrary-sized box.
See also Transparent Rounded Corner and Corners.
Horiz Menu
Showing how to use a semantic ul/li for a menu, but display it horizontally. There are two other variations available.
See also Vert Menu and UL2Menu.
Vert Menu
Showing how to use a semantic ul/li for a menu, displaying it vertically.
See also Horiz Menu and UL2Menu.
UL2Menu
A lightweight JS/CSS library for taking a nested ul/li and turning them into a hierarchical menu system.
See also Dynamic Nested Menus and CSS-only Hierarchical Menus Test Bed.
Dynamic Nested Menus
An old test showing a bit of JS used to make a nested ul/li set interactive.
See also UL2Menu.
Fade Menu
A CSS-only solution showing how to gradually change the color of items in a list.
Centering Background Image in Body
Cross-browser technique for horizontally and vertically centering a background image on the page.
Centering Image in Body
Cross-browser technique for horizontally and vertically centering a <img> element in the page.
Centering Content in Body
Cross-browser technique for horizontally and vertically centering a block of content on the page
100% Height Content
Technique for making a background behind some content which is as tall as the window, or the (scrolling) content (whichever is taller).
Form Layout Using ~Semantic DL
Showing a technique for laying out labelled forms using dl/dt/dd tags, which are (arguably) more semanticly appropriate than tables.
Icons!
Labelled icons/pictures flowing inline and wrapping, with hover highlight.
See also Inline-Block.
Inline-Block
Shows how to use display:inline-block to put block level items on the same line, with wrapping. Also shows how to use display:table-cell for Mozilla, which doesn't yet support inline-block.
See also Icons!
Showing how to automatically include images for links, which change depending on the type of link.
See also Link with IMG.
Link IMG
Two techniques for automatically adding an image to certain anchors through CSS.
See also Visited Links.
Scroll Table
A JS/CSS solution to make the <tbody> of a table scrollable, with aligned head/footer.

Tips

7x7 Grid
Shows how to use border-collapse:collapse to remove spacing in a table without using cellspacing="0".
IIS Expiration Dialog
Screenshot showing where to adjust IIS to send caching headers with your images.
Bottom-Right Relative
Showing how to place an item in the bottom-right of a block, and not the page, using position:relative.
Centering Block-Level Content
Shows how to properly center block-level content horizontally, with the clean fallback to fix IE5.
IE5 Conditional Comments
Shows how to use Microsoft's "Conditional Comments" to include content (including CSS links) that will only appear in IE 5 for Windows, and will not make your page invalid.
Float Clear Test
Showing that you can prevent clear:left from clearing past a certain floated item by containing the sub-content in its own float.
Inline Padding/Margins
Showing that horizontal margins and padding on a display:inline element affects the layout, but vertical padding/margins does not.
Min-Height Hack
Showing a way to accomplish the same end result as the CSS min-height property even when the browser doesn't support it. (Also shows a bug in Mozilla.)
Negative Top Margin versus Top Offset
Showing the difference between using a negative margin-top to shift something up versus a negative top position.
Overlapping Borders
Showing how to use the content-box box-model to your advantage to overlap a common border in a two-column layout.
Quote Float 2
Showing how to start a pull quote in the middle of a paragraph.
Row Indicator
A CSS-only solution to indicate the current row with a graphic (not for IEWin, though it could be with a tiny touch of JS)
Shruggar's Ridge
Showing how to nest elements to make a fatty 3-bevelled border.
Magical Fieldset 1 and Magical Fieldset 2
Showing two techniques to use the uber-semantic <fieldset> and <legend> elements to label a set of radio buttons.
Percent Width Body
Use body { position:relative } to have 100% widths not overflow the page when the body has a margin.

Tests

Rendering of optgroups
Screenshots of the same <select> code using the <optgroup> element in multiple browsers.
CSS2 Quote Test
How does your browser handle the <q> element and the CSS2 quotes property?
CSS-only Hierarchical Menu Test Bed
Testing four different all-CSS ways of implementing an arbitrary-hierarchy menu using only CSS, documenting bugs in browsers for each.
See also UL2Menu.
Side Float Test
Showing a bug in the way IEWin clears past floats.
Stupid IE Sliding Headers
Showing a bug in IEWin's rendering engine, and a fix for it.
RGBA Test
Does your browser support rgba() colors? Safari does.
Positioned Content inside Overflow
Testing the behavior of position:absolute content which is a child of an overflowed parent object.
100% Height Navbars
Investigations into height:100% inside an positioned container which is inside an overflowed container.
See also 100% Height Content.
Safari 0px border override
An old page showing a bug which affected early betas of safari; kept around becaue it shows off a range of border styles.
Box Sizing Test
Showing various box-sizing models, and testing for support. (See also MSDN Box Sizing graphic.)
Fixed-width Body
Testing if a browser supports setting different colors for the html and body elements, while setting the body to a fixed-width and centering it.
Button Size Test
Testing if font-size:50% is supported for various button types.
Inherited Margin Padding
Showing a bug in IEWin
Line-Height Test
How does your browser handle the default line-height value versus a few set values?
Percent Widths in Safari
Showing a bug in Safari's handling of non-integer width percentages.
Width by Floated
Should an item of width:45% which is next to a floated item take up 45% of its parent's width, or 45% of the available width?
Blah Borders
How does your browser handle borders/margin/padding on html/body/others?
CSSRule.selectorText
Testing the DOM property CSSRule.selectorText and my own FindRule function.
Transparent Color
Does your browser support color:transparent?
Link with IMG
Showing that you cannot turn off text-decoration:underline for an img in the middle of a link.
See also Visited Link.
z-index Test
Showing that z-indexed content of a z-indexed parent can never break out of that relative layer. (Also showing a bug in IEWin and Safari relating to negative z-index values.)