CSS

IE bug - background images, floating blocks

Submitted by on

There's a bug in all versions of Internet Explorer, including the latest IE7, whereby if you have a floating block in a block inside another block which has a background image (possibly also background colors), text will disappear. I was hitting this at work where we had two columns created using floating blocks, inside two separate blocks that each had a background image, and just above the columns was a heading - the text within the columns showed up but the heading always disappeared after the images finished loading.

Tags: 

Awesome form validation script

Submitted by on

I use the Javascript libraries Prototype and Script.aculo.us a good deal in my projects, but there was one feature they didn't have between them - form validation. A quick google uncovered a super-simple solution to this problem written by an Australian - all you need to start is one Javascript file and one line of Javascript, then add one single DOM-compatible attribute to your input lines and it'll work right out of the box. The even better part is that extending and enhancing it is very easy, just add a CSS line or two to customize your error messages, etc, easy as pie.

Tags: 

Catfish fun with script.aculo.us

Submitted by on

Script.aculo.us is a wonderful library of Javascript functions for doing lots of buzzword-friendly snazzy effects. A recent schmancy JS trick is the catfish - a small, unintrusive advertisement that pops up at the bottom of the web page and can be closed without affecting the web page. Looking around I didn't see any existing code to do catfish effects with Script.aculo.us so I decided I'd have to fill the gap.

Tags: 

Image block rotation using Script.aculo.us

Submitted by on

Here's a handle little Javascript function that'll let you rotate a set of DIVs as needed, e.g. to rotate a series of images for a slideshow. It uses Script.aculo.us to do a very simple looking yet quite appealing slide in/out. You'll need to load the prototype.js file and Script.aculo.us' effects.js file before running the code. One thing to note is that you can use any object to do this - DIVs, IMGs, etc, just assign the IDs accordingly, which is useful if you need to rotate entire code blocks and not just individual images. Enjoy!

Tags: 

Pages

Subscribe to CSS