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.
- 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.
- Showing how to use a semantic
ul/li for a menu, displaying it vertically.
- See also Horiz Menu and 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.
- 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!
- Visited Links
- 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?
- 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.)
