uwMike.com

I'm in Waterloo at the moment, and next available to work in September 2008.

Jello PIE

July 19th, 2005

I’ve been published on Position Is Everything. I had a really great time working with Big John on the article, so I hope some other folks will find it to be of use.

I’ll take the rest of this entry to have a quick look at that little thing I wrote, which attracted quite a bit of attention.

Biggest Linkers

Further Analysis

  • coda.coza: Damien du Toit provides a great summary of layout techniques available to the modern web developer.
  • Pro.html.it: Alessandro Fulciniti discusses Progressive Layout, which is the larger notion of layouts that don’t size with direct proportion to the browser.
  • CSS Playground: Stu Nicholls describes the trick on his site.

I actually saw a mirror of the article somewhere, translated into Hungarian. Unfortunately, the site seems to have now gone offline.

Pretty exciting.

Mike

Discussion

  1. Congradulations! I know you’ve been working on it for a while and you’ve finally got it up! It’s the same way you feel about my math…it’s fascinating, but beyond my. Heh.

    Posted at 3:47 pm on July 19th by Jeffrey Aho.

  2. I’ve found your Jello layout in Hungarian in the following link: http://weblabor.hu/hirek/20050507/jello.
    It isn’t the exact translation, but summarize the principle.

    Posted at 6:57 am on July 21st by .bonga.

  3. Ah, interesting, bonga. That must have been what it was. I remember at the time there were a number of referrals from non-English design sites.

    It was fascinating to get a brief glimpse of the non-English Internet.

    Posted at 11:58 pm on July 21st by Mike Purvis.

  4. I was told about this article and am very excited. Though I don’t understand many of the ins-and-outs of CSS, I hope to learn some more from what you’ve accomplished. But why did you use ‘class’ instead of ‘id’ for the div’s?

    Just curious. And thanks for figuring this out.

    Saul

    Posted at 11:42 am on July 25th by saul.

  5. If you look at my own page here, I’ve used IDs. But an earlier draft of the article had in-line examples, and in that case, of course, it had to be classes. (with the rules for each demo using child-selection…)

    Additionally, it’s presumed that the audience knows to substitute IDs where appropriate. Those just starting out may not even know about IDs, so it’s simplest to just stick to classes.

    Posted at 1:35 pm on July 25th by Mike Purvis.

  6. Thanks for the wonderful tool Mike! It should come in very handy, although I did encounter some strange behavior in Safari.

    When opening up the page/form in Safari, if the window size is below the form’s set minimum width, all the content in the page slams against the left edge of the browser window with no background CSS styles applied. Once I stretch the browser window’s width past the minimum, everything snaps into place, including any background styling. At this point everything works as designed.

    If I resize the browser window below the minimum at this point (where I get horizontal scrollbars), and refresh - everything slams into the left edge again…

    It seems to only happen in Safari (not firefox) so perhaps it’s just a browser bug.

    Just thought you’d like to know. As for me, I’ll be playing with this finely crafted CSS for quite a bit. Thanks =)

    Posted at 5:19 pm on August 7th by bugsy.

  7. I played around with it a bit, and with Bugsy’s help (I think it’s Bugsy), tested a simple fix: Just give #expander a min-width equal to the negative margins added together! The problem was that Safari was losing the neg margins when the loading window was
    not wide enough for them, I guess.

    The fix is in the articles on PIE now, just got to light a fire under Mike to reprogram the calculator…

    Posted at 4:46 pm on August 9th by Big John.

  8. Glad I could help. =)
    Thanks again for this beautiful solution!

    Posted at 9:35 pm on August 9th by bugsy.

  9. Thank you for the kind words, and thanks both of you for figuring out the Safari weirdness.

    Posted at 9:45 pm on August 9th by Mike Purvis.

  10. One more thing about your calculator relating to the Safari bug. You forgot to add ‘px’ when you generate the Safari fix code.

    [code]min-width: 760; /* Critical Safari fix! */[/code]

    See? If you don’t add ‘px’ to the numeric value, the page will look like a train wreck in Safari. Fix ASAP.

    Posted at 4:21 pm on August 19th by Cowdisease.

  11. I will probably never get back around to this site again, but this is a recipe I found for Jello Cream pie online… hope its what you were looking for.

    Jello Pie

    1 graham cracker crust, prepared or prepare yourself
    1 12 ounce can evaporated skim milk
    1 3 ounce box cherry, raspberry or strawberry Jello
    1/4 cup sugar
    1/2 cup boiling water|
    3 tablespoons lemon juice
    whipped topping
    strawberries, cherries or raspberries

    Graham Cracker Crust

    1 cup graham cracker crumbs
    2 teaspoons honey, optional
    1/4 cup melted butter or margarine

    Combine and mix well. Press into a 9 inch pie plate. Bake at 375F for 5 minutes, to set. Chill a can of evaporated milk in your freezer 45 minutes, just to the freezing point. Open can before putting into freezer. Meanwhile, combine Jello, sugar and boiling water. Dissolve well. When the milk is ready to beat, whip at high speed until frothy, then add lemon juice and the cooled Jello syrup. Fold well until thick, then pour into prepared pie crust. Use whipped topping to create rosettes on top. Add fruit on top of whipped cream. Garnish with strawberries, cherries or raspberries. Chill overnight or for several hours.

    Posted at 2:18 pm on November 17th by Renee.

Leave a Reply

You can use Markdown for style. I love hearing from readers, but please don’t hijack the discussion, use offensive language, or try to sell anything.

© 2004-2008, Mike Purvis, some rights reserved. I'm running Wordpress, and I have an RSS feed.