Tag: CSS

script.aculo.us Slide Show

My client, Terra Nova Pools, wanted to add a new page to their site that would display a looping slide show of before and after pictures of their clients’ pools. I decided to implement this page using this solution that relies on the script.aculo.us javascript library to fade a series of div tags in and out sequentially. The solution worked well with the exception of one small glitch – the screen seemed to jump between slides in FireFox (see comments on page above). I solved this by setting the position attribute for all slide divs to absolute with the following line of css:

div.slide { position: absolute; }

You can see the results at: http://www.terranovapools.com/clients/before-and-after/

I chose this solution because I knew I could rely on the script.aculo.us library to support a wide array of browsers as well as allow me to use web standards to ensure that the page would degrade nicely for users on mobile devices or older browsers. I had previously used Dynamic Drive’s ultimate fade in javascript slide show for the site’s home page, but that did not work at all in Safari and required defensive coding to be able to degrade nicely.

CSS Tabs Made Easy

There’s a lot of web standards-based css tab menus out there, but I have to say I’m pleased with this one by Ian Andolina because it dropped into my application and worked right away. It took me just a couple of minutes to change the font and coloring, but other than that, it was a breeze.

Though I had a little trouble with Adam Kalsey’s own tabbed menu, his page lists several alternatives (which is where I found Ian’s above).

Listmania

I’ve been looking for a reliable CSS horizontal list to replace single row tables for layout of things like navigation menus. So far, though, I haven’t trusted a lot of the ones I’ve seen on the web to work in most browsers. That is, until I found Listmaniac’s browser support chart, which identifies browser compliance for plenty of horizontal and vertical list styles. Best of all, it includes the suorce code for each list!

CSS Positioning – Return of the Browser Wars?

A la A List Apart, I have been updating my presentation layer coding techniques to be compliant with modern XHTML and CSS standards. While I can certainly appreciate that adhering to these standards results in cleaner code that is easier to maintain, I have found that where element posisitioning is concerned I end up mired in a cross-browser compatibility nightmare the likes of which I haven’t been in since the days of the browser wars. Using nested HTML tables for page layout always bothered me in that it violated the principle of seperating content from structure and presentation. However, using CSS floating (I don’t use absolute positioning) to make a multiple-column page layout takes some masterful coding and/or use of hacks to make it work in multiple browsers! At least browsers can agree on how to render a table. Ever notice how so many of these starndards-compliant sites display all their text in one column centered on the page?

Below are some good resources on the subject, and some code generators for css layouts (the whole notion of a code generator for something as simple as a 3 column layout can take some getting used to – and don’t even think about more than 3 columns). Unfortunately, I wasn’t always successful in backing this code into existing site templates that I’ve made. So until I master the dreaded CSS float, I think I’ll have to keep the occasional table around for layout purposes.