- Fantastic Tabs: This X/HTML and CSS technique differentiates the current page or section from others in a navigation bar, using a single stylesheet and without requiring any server side code.
- 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.
- CSS Width Specifications: Width can only be specified on block level elements, not inline level elements.
- Strict CSS Form: A nicely styled form for Strict doctypes.
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.
- jQuery - Hide Extra List Items: This is a handy way to tidy up long lists. This will hide extra items in a list, and add "show more" and "show fewer" links to show and hide the extra items in the list.
- jQuery - Smooth Animations (or, fixing a jumpy animation): For months, I had been unable to solve a problem with jQuery's animation engine: after adding style declarations to elements, the animation would become "jumpy". Demonstrated here is the solution I found, which essentially stores the heights of animating elements before they are hidden, and then re-applies those heights just before starting the animations.
- jQuery - Vertical Show/Hide using slideToggle(): This article demonstrates using the slideToggle() function to show and hide items in a definition list.
- 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.
If you have any questions or comments about these articles, please Contact Me.