opensoul.org:

TextMate snippet for clearing floats

I often use positioniseverything.net’s CSS method for clearing floats without structural markup. The code for this technique is not something that I’ve committed to memory yet, so I’m referencing the article all the time (I could just copy it from another project, but it’s just so much quicker to type “css clear float” into google).

Well, positioniseverything.net is about to get several less page hits per week, because I finally threw the code into a TextMate snippet and assigned it the keyword “clearfix”.

${1:.clearfix}:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
$1 {display: inline-block;}
/* Hides from IE-mac \*/
* html $1 {height: 1%;}
$1 {display: block;}
/* End hide from IE-mac */
$0

Update: DRYed up based on Jacob’s comment.

Firefox + Mac + Flash + CSS opacity = peek-a-boo

I came across a fun browser bug this morning that I thought I would share. You can’t have a semi-transparent element cover a Flash animation Firefox on the mac.

I had a popup menu that used CSS opacity to make the menu semi-transparent. It was working fine, but then we threw in a Flash header and the Flash would hide any time you moused over a menu item.

Here are some screenshots that demonstrate the bug. The first is how it looks in Safari, the second demonstrates the bug in Firefox, and the third shows Firefox if I remove the opacity attribute from CSS.

The solution: for now, I’ll just have to live without semi-transparent menus (but they looked so good).

I would venture to guess that this is intentional behavior by Firefox. Since Firefox isn’t a native Cocoa app, it doesn’t have access to all the fancy OS X rendering, so it can’t render transparent elements over elements that it doesn’t have control of (Flash), and it just removes the Flash.

Collective Idea gets a face lift

After months of good intentions¹, we finally launched our new website today.

We were aiming to have a simple site that gives a good idea of who we are and what we do while minimizing the “marketing fluff”. We’re really happy with the result. Check it out and let us know what you think.

Thanks to Brian at ViewChange for his help with the design, and thanks to Matt Slack for his CSS/XHTML wizardry. Check out Daniel’s post for more info about the new site.

1. A classic case of the mechanic’s car being broken.

CSS Naked Day

What happened to the design?

To learn more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.