uwMike.com

I am engaged to the beautiful and wonderful Tara Cleaver!

Jello PIE

July 19th, 2005 13

I’ve been [published](http://positioniseverything.net/articles/jello-expo.html) on [Position Is Everything](http://positioniseverything.net). 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](http://uwmike.com/archive/jello-liquid-layout/), which attracted [quite a bit of attention](http://del.icio.us/url/903e4cc9c942e81b3fd172ef44ecc631).

###Biggest Linkers

* [Mezzoblue](http://www.mezzoblue.com/dailies/2005/05/index.php#p000770)
* [Stylegala](http://www.stylegala.com/news/200505/408.htm)
* [456 Berea Street](http://www.456bereastreet.com/archive/200505/jello_a_different_liquid_layout/)

###Further Analysis

* [coda.coza](http://coda.co.za/archive/20050616/17:11:16): Damien du Toit provides a great summary of layout techniques available to the modern web developer.
* [Pro.html.it](http://pro.html.it/articoli/id_620/idcat_31/pag_1/pag.html): Alessandro Fulciniti discusses Progressive Layout, which is the larger notion of layouts that don’t size with direct proportion to the browser.
* [CSS Playground](http://www.stunicholls.myby.co.uk/boxes/outside.html): 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](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.

  12. Форум по программированию на PHP: mySql, регулярные выражения, собственные движки и прочее

    Posted at 3:51 am on July 24th by Форум.

  13. PhD Degree in Biological Sciences specializing in Physiology, Granted scientific works, Produced numerous scientific papers, articles, reports, Developed all aspects of a successful project application for the European Commission, Higher Education and Science, Won Regional State Council on Sports and Youth Policy Award in Science and Technology for making a substantial contribution to the science of the Pskov region, Certified Specialist in Physical Education and Sports, International Association of Computer Science in Sports, Been involved as a lead physiologist in performance analysis and fitness testing of several elite national teams: Ice Hockey, Rhythmic Gymnastics, Taekwondo, Boxing, Tennis, Wrestling, Track and Field, Skiing, Cycling, Basketball, Biathlon, Arm Wrestling, and Bowling etc.

    Posted at 10:59 pm on August 20th by Roman.

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

resume writing services