This page contains a collection of detailed articles, walkthroughs, and how to guides relating to X/HTML, CSS, JavaScript, web images and graphics, Photoshop and Fireworks.
CSS
- Strict CSS Form: This article demonstrates creating a nicely styled and XHTML Strict validating form.
- Simple CSS Form: This article demonstrates how to CSS to display an attractive XHTML form. This table-free form is simple to update, and highly accessible.
- Fancy CSS Box: How to style an expandable box using sliding background images and CSS.
- Fancy HRs: How to use CSS to style HRs (header rules) with a custom image. Includes solutions for Internet Explorer 6 and 7.
- Clearfix, with an IE7 solution: A robust method to contain floated elements that escape out of their containers.
- Equal Height CSS Boxes: A solution for when the web design calls for multiple independent content boxes to have the same height.
Web Graphics (Photoshop & Fireworks)
- IE6 (and lower) .PNG Experiments: Experiments using the AlphaImageLoader and its derived solutions to resolve the grey backgrounds that occur when using .PNGs that contain alpha transparency pixels in Internet Explorer 6 and lower.
- Alpha Transparent .PNGs in IE6 Using Fireworks: A demonstration and walkthrough of using Fireworks to edit existing .PNG images to prevent the grey background that occurs when viewing .PNGs that contain alpha transparency pixels in Internet Explorer 6.
- Photoshop .PNGs into .GIFs: This Photoshop walkthough will show you how to use actions to create new anti-aliased .GIF images from your .PNGs, and how to add the code to your web pages to show the new .GIFs to Internet Explorer 6.
JavaScript
- jQuery - Tablesorter Plug-In: This article demonstrates table functionality added by jQuery's Tablesorter plug-in. Includes sorting, and dynamic alternate row coloring.
- jQuery - Core Table Functions: A demonstration of functions related to tables that are included with the core jQuery library. Includes alternate row coloring and highlighting the row the visitor's mouse is hovering over.
- Simple This: A demonstration of how JavaScript's "this" keyword can be used to quickly change an image's properties.