Step 21: Time Slip and MSR Screens

From PikaDocs

Table of contents

Focusing on "time" records and LSC "other matters"

In this final chapter in the Claire design series, we focus on two Pika templates that serve different functions but are similar in structure and design: The Time Slip and MSR Data screens. It's a given that folks know what a Time Slip is, but some may be confused by our use of the term "MSR Data." MSR Data is how LSNC has long referred to the LSC "other matters" records, accessible within a standard Pika installation from the "Time and Calendar" section of the Site Map page:


We take MSRs very seriously. Our organization places great emphasis on capturing accurately the wide range and large number of non-case "other matters" accomplished by our staff. This emphasis is reflected directly in the Claire design, which includes an MSR button on the horizontal navigation bar at the top of every Pika page and as the second-ranked "Core Task" on the Home Page, right after "New Client Intake":



The "activity" subtemplates for the Time Slip and MSR Data screens are located in the activityT.html and activityL.html files, respectively. In the original Pika design, both templates rely on all but identical table elements to control layout and positioning of the various input, select and textarea fields.

Well, you know how we feel about tables used for that purpose, don't you? (That feeling should not be confused with our occasional lapses in table-design hypocrisy).

It should surprise no one at this point that we stripped out all the table and style elements embedded in both templates and substituted our now familiar floated- and non-floated div design. In this Step, we'll simply proceed to explaining the markup for the redesigned Time Slip ( screen. Extrapolate from there and you have the design solution for the redesigned MSR Data ( screen, as well.

How the Time Slip (and MSR Data) structure was rebuilt

You can view our rebuilt versions of the Time Slip template at Project Claire: activityT.html and the MSR Data template at Project Claire: activityL.html. These restructured markups in the Claire design present no real surprises or tricks. For example, the Time Slip template is a relatively uncomplicated template with four basic areas structured with divs, illustrated here as outlined with dashed blue lines:


Somewhat simplified versions of the original Pika design, these four structured divs are each named, in order of markup:

  • "time-notes" - to the left of the screen, the case notes related to the time to be recorded.
  • "time-slip01" - to the right, select and input fields for capturing the worker's name, and the date and amount of time worked.
  • "time-slip02" - below that, on the right, multiple select fields for capturing funding code information.
  • "submit-buttons" - at the bottom, three optional submit buttons to either (1) save the current time record and automatically create a new time record; (2) save the current time record and close the time slip window; or (3) cancel the current time slip entry.

The design elements are all now familiar to the Claire design. If you take a gander at the corresponding CSS code listed towards the end of the Claire stylesheet, you'll see that the first three divs use float:left to position themselves in order of markup. With properly stated width values, the first three divs simply pop into place. One then just needs to tweak margins and borders and the other presentational characteristics to one's liking.

The fourth "submit-buttons" div is not floated. It relies on the clear:both declaration to literally clear the three floats above, and then simply proceeds to display itself as the next-in-order block-level element on the page. Its enclosed three input elements then display themselves inline, the XHTML default for such elements.

CSS Alert: IE bug affecting floated DIVs

The Gecko gang out there who would never deign to use Internet Explorer for any purpose, much less Pika, need not read further. That's because we're about to discuss a really buggy problem that floated divs present only -- and only -- in IE. It's the dreaded IE Doubled Float-Margin Bug ( We like our floated-div design for the Time Slip page, but not when it goes all jiggy on us and misaligns our carefully crafted CSS margins, like this:


What's up with that ( Listen up: IE has a ton of these types of bugs, and so when we run into this oddball stuff, we just take a deep breath and saunter over to John Gallant and Holly Bergvin's authoritative Position Is Everything (, where inevitably they or one of their friends have cracked the code on the IE (and other browser) positioning problems. (Which reminds us to remind everyone, that as buggy as IE's implementation of CSS may be, other browsers including Firefox and its Gecko-based brethren have their problems, too.)

In any event, as detailed in the PIE article, IE Doubled Float-Margin Bug (, the solution was pretty painless: We added a display:inline declaration to all the floated divs, and the bug went away.

End of story.

And end of the Project Claire: Redesigning Pika series.

Related articles and files: