Posts in CSS Categories

Fix for Flash horizontal 1px pixel offset in Firefox 3.6

After updating to Firefox 3.6 on OSX I discovered many of the websites that use flash had the flash object offset by 1 pixel horizontally. Its a real pain hopefully it will be fixed soon. In the meantime, I have discovered a temporary fix you can make to your HTML.

Using a multiple class selector on the one element

I came across the situation the other day where I wanted to apply a CSS rule when two classes appeared in the same element. The Html generated was a div containing buttons. I wanted to apply a custom background to one of the items in the list. As you hover over each of the button elements JavaScript toggled the button-hover class. I wanted to have background image change on all of the list elements when button-hover was applied. The problem was I wanted to have a custom roll over images for each of the buttons.

Expand a div element to the height of its floated child elements

When using div elements for layout, for example to produce a table like layout, often you have a div element with a collection of floated child div elements. The wrapper div does not expand to the height of all the floated contents. You may want a border around all the floated div elements or maybe some padding.

Firefox 3 and Flash SWF outline problem using SWFObject 2.1

For some time now I have been using SWFObject to load flash objects on my web pages, it works great to avoid the ‘click to activate’ problems that affect IE6, IE7 and Opera 9+. In IE the browser displays an outline around the flash object and a tooltip ‘Click to activate’