sIFR & Floats

I ran into a snag while preparing for the May 1 reboot, involving sIFR. I was attempting to replace a H2 element in the following two columns. They were designed to display side by side using opposing floats. However, someone pointed out that in Firefox for Windows only (now there’s a new browser oddity for you) the flash text would cling to the top of the container element, in this case, content. Here was the initial CSS being used:

#content #recentEntries {
  float: left;
  display: block;
  width: 200px;
}

#content #latestProject {
  float: right;
  display: block;
  width: 200px;
}

The problem was solved by making use of absolute positioning within a relative container. This solved the weird flash “flicker” that was occurring using the sIFR technique. The final CSS looked like:

#content #recentEntries {
  position: absolute;
  left: 0;
  display: inline;
  width: 200px;
}

#content #latestProject {
  position: absolute;
  left: 256px;
  display: inline;
  wid

I don’t think I will be the only person who ever goes the route of floats and runs into this peculiar snag. Once I complete the Felocity design, I will also put up the alternate stylesheet that fully demonstrates the flicker effect. In the meantime though, it’s back to packing boxes. I’ve been preparing for a move to the San Jose area in the interest of not driving an hour every time I need to go to San Jose—which translates to 3-5 days a week. There’s a good number of boxes lying around and in my room. My original plan of a “few short trips and one big trip” is quickly becoming anything but a few. It seems like you always have more stuff when it’s in boxes.

Webmentions
What’s this?

Tweets, mentions, and trackbacksShare your thoughts

As this gets discussed, comments will show up here. If the post is new, it may take a bit for your thoughts to get from one side of the internet to the other.

Code Drift is the personal website of Rudolph Jakob Heuser