Flickr + Hoverbox

— Topic: CSS

For awhile now, I have been struggling to get my Flickr photos working with my own Hoverbox CSS image roll-over technique (go ahead – make fun of me). The problem I was running into is this: Flickr photos are written dynamically to the DOM by JavaScript. As such, there is pre-determined code that is defined, which is un-touchable.

Hoverbox Image Gallery

— Topic: CSS

I recently finished reading CSS Mastery, and think I’ve finally got a good understanding of how absolute and relative positioning (fail to) work in Internet Explorer. I have been tinkering with this bit of code since yesterday afternoon, helping out a designer friend with his client’s site. However, we decided to go a slightly different route for their gallery. So, I pass it on to you with the hope that it proves useful.

CSS Redundancy

— Topic: CSS

Q: How many web designers does it take to change a lightbulb?
A: As many as possible – One to actually do the work, and all the others to sit around and say: “I could’ve done that better!”

Free Weekly Calendar

— Topic: CSS

Demo: Calendar 1 / Calendar 2 | Download


Hot on the heels of last week’s article about creating time-sensitive CSS via PHP’s date() format, I’ve whipped up another implementation. Some people didn’t seem to comprehend what I was doing with the previous example, and one guy even cussed me out in the comments for using meta refresh instead of Ajax.

Time Sensitive CSS

— Topic: CSS

Recently, there’s been some discussion on the Godbit forum about how to serve dynamic, time sensitive CSS with PHP. I got to thinking, and the steps necessary to make this work are actually pretty easy. First off, let me say that most hardcore programmers will probably scoff at the simplicity of these examples. However, a hardcore programmer I am not, so basic tutorials are what I enjoy. Also, please know that this is not an exercise in JavaScript / Ajax.

The New Font Tag

— Topic: CSS

Inside the Lines

Active vs. Focus Links

— Topic: CSS

After the great feedback regarding my last article, I started thinking about the various ways that browsers handle a:active vs. a:focus links. I decided to just whip up a quick example of differences between the major contenders. I was surprised to find that only Firefox behaves as expected, with the other popular ones offering their own interpretations.

Removing Dotted Links

— Topic: CSS

Fixing the Fox

Update: If you want to retain the dotted border for tab-based navigation, apply this to a:active. This still allows the indicator to appear when focused by keyboard, but hides when mouse activated. It’s the best of both worlds…

Absolute CSS Boxes

— Topic: CSS

Quite some time ago, I had an argument with a friend who is a big fan of Microsoft products. While I’m no Xbox hater, I am not very fond of some of their more shoddy products such as Internet Explorer. He was justifying the shortcomings of IE6, saying that absolute positioning is rarely used in web pages, and that :hover pseudo class is not really that useful.

For the most part, he was right. Very few websites I have seen actually make extensive use of absolute positioning. By default, if you do not specify a mode, web browsers will use static positioning.

Em Flash Sizing

— Topic: CSS

Snazzy Scalability

Demo: See Example Here (View Source)

In the comments on my previous article about Em Image Sizing, it was noted that while that method works just fine, it makes images somewhat jagged and pixelated when sizing text up or down. In the comments, it was mentioned that styling Flash dimensions in Ems with CSS is also possible.


Latest Entries

Me, Elsewhere


The thoughts and opinions expressed here are mine alone, and are not necessarily shared by any other living person.