Skip to content

sIFR & Floats #2

@thecodedrift

Description

@thecodedrift
---
slug: sifr-and-floats
published: 2005-04-14T00:00:00-08:00
description: A flash of inline content in your (flash) replacement
changelog:
  2020-02-23T08:00:00.000Z: This was rescued from the archives of the old [felocity.org](https://web.archive.org/web/20050507121849/http://www.felocity.org/journal) site. Writing on the internet was pretty different back then.
  2020-02-23T09:00:00.000Z: Flash isn't a technology we should use anymore. Modern web fonts have made this article completely obsolete. It's a good thing.
  2021-02-20T08:00:00.000Z: Flash is officially dead
---

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;
  width: 200px;
}

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    🏷 CSSIt's very !important📚 CodePosts with questionable syntax decisions

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions