May 22, 2010

Just spent a frustrating couple of days wrestling with video formats on the web. Can hardly wait for HTML5 and some consolidation on H.264 or maybe VP8. Is it just me, or is the Adobe Flash solution just about the most unintuitive method ever created of putting video on the web? Anyway, one useful little kludge emerged as I discovered how to use H.264 encoded mp4's as the source files for the Flash player with Dreamweaver. See details.

My visitor stats still show that the most popular page on my site is my little rant about my Adobe CS3 Catastrophe. Hopefully it is helping some people solve their problem... or at least rule out a few things.

I'm continuing to fill out this website with examples and demos. I'm starting to really appreciate the amount of work some folks have put into their demos, because it's harder than I expected to take a concept and build a good demo. I've put a lot of work into my List/Image Alignment Demo, that showed a Firefox bug (recently fixed)

Welcome to tightCSS.com. This site is all about web design with Cascading Style Sheets. The site's goal is to provide a one stop shop for all the key info needed to build CSS-based websites with clean, standards-compliant code, while minimizing the time spent dealing with browser incompatibilities. The site will be populated with lots of sample code, tutorials, and other tips for the web developer, whether you're a rookie trying your first site, or an old pro converting a website from table-based layout into CSS.

Insert H.264 mp4 video into webpage using Dreamweaver CS3 "Insert/Media/Flash Video"

Adobe CS3 "Catastrophic" Failure of Licence System: What a way to start the Week!

IE8 Upgrade Rant

Sending Different CSS to Safari and Chrome

Jan 22, 2010 update: the previously identified bug that could be exploited to send different styles to Safari/Chrome has been fixed, as could have been expected... although the bug existed for about four years. Clicking the link above will take you to a different option for sending different CSS to Safari and Chrome.

IE6 Percent Width Errors When Attempting Fluid Layouts

Demonstrates how IE inconsistently calculates percentage based widths, causing layout havoc.

Demo: List Spacing & Alignment

Demonstrating the effects of margins, padding, and alignment on horizontal lists with and without images. This demo was originally created to demonstrate a bug in Firefox up to version 3, in which images in a <li> box could extend outside the containing element in Firefox. The bug was resolved in version 3.5. See this page for screenshots. I am keeping the demo on the site because I think it has some value demonstrating the nuances of controlling list spacing even though the Firefox bug has been fixed.

New Layout Example

I just added a variation on the "sticky footer" theme. Nothing earth shaking, just a simple way to have a footer always visible at the bottom of the viewport (as opposed to my other sticky footers, that always have gone to either the bottom of the screen or the bottom of the content, whichever is lower. Kudos to Georg over at http://www.gunlaug.no/contents/wd_additions_15.html who's expression I used to make IE6 emulate position:fixed.

Absolute and Relative Positioning

Probably the single most important concept to get straight in your head before trying to use CSS is the difference between absolute and relative positioning. Rather than a lengthy explanation, I have put together a demo to illustrate some of the key points.

Centering Horizontal Drop Down Menus With Variable Width

A lot of people said it couldn't be done: building a dropdown menu with variable widths, and center it on the page. But after combing the web I found two different centering techniques that had been used with single-level menus, and after some work I was able to get the same basic concepts to work with drop-downs. Here are three examples: