The Daily Biff - 2006 03 24

Currently playing on my computer (tune in: pls, asx)

Fri, 24 Mar 2006

"Again Too"
This evening I was playing with the kids. I'd have them count to a specified number and then when they reached that number I would grab them around their chest and throw them up in the air a couple of times. The kids were in a pretty giddy mood so it was good for plenty of laughs. After Eliana's turn, she would ask for more by saying:

"Again too, Daddy, again too."

When Berkeley was her age, he would use similar wording by saying "more again, more again."

:: Posted by rus on Fri, 24 Mar 2006 10:54 pm
:: Filed under /daily_journal/2006

[0 comments] [permanent link]

Layering with CSS
Ok, so I don't do much web design any more. Hardly any really. If you don't include what little design I did for this blog, I haven't designed anything from scratch since the old iServer days. Since that time, support for Cascading Style Sheets (or CSS) has become much more robust. While working on my current project (redesigning my wife's website... Berrett Psychological Services), I decided to dabble a bit more with CSS-based design.

I'm by no means an expert at CSS, but I did have some fun and learned a few new things during my project. The most useful of which was learning how to do layering with CSS using the "z-index" property. If you look at any web page on Kristy's new site (other than the home page... for example, see here, here, here, here, and here), you'll see a little logo in the upper left corner of the page. This logo is actually sitting in it's own layer, neatly isolated from everything else on the page. The underlying content is presented in a simple table with some left-justified padding so that it isn't obscured by the logo. Sweet.

:: Posted by rus on Fri, 24 Mar 2006 2:19 am
:: Filed under /tech

[1 comment] [permanent link]

PNGs with Alpha Channel Transparency and MSIE
I've been hacking on the BPS web site for the last few days (er, uh, technically, the last few years). As part of the new design effort, I created several PNG images that have alpha channel transparency. Alpha channel transparency allows an image to sit on top of any background (single-color or multi-colored) and look like it fits in the place perfectly. It is an extremely useful and versatile feature... and a necessity for what I'm doing with Dr. Kristy's new web site.

During my web design phase I did all of my testing using FireFox (of course!). Everything was looking great until I popped up Kristy's new website in an MSIE browser I keep around just for compatibility testing. You guessed it (*smacks head*) MSIE doesn't appear to properly support the alpha-channel transparency (at least the version of IE I'm using on Windows XP, which appears to be up-to-date). MSIE will show the image, but all of the pixels that have opacity values are rendered with a light cyan hue. To see what I mean and if you are using a version of MSIE that is flawed, nav here... you'll see the light cyan in the lower right of the image. Yuck.

So, I fished around on google and found a workaround for MSIE that uses a style filter that only MSIE recognizes. Using a nice JavaScript browser sniffer I found, I was then able to author some code so that the PNG images with alpha channel transparency are displayed on MSIE through the style filter, and simply displayed directly as the image source for all other browsers. Here is an example of what I did:

  <html>
  <head>
  <title>MSIE Workaround for PNGs with Alpha Channel Transparency</title>
  <script language="Javascript" src="/browser_detect.js"></script>
  <script language="Javascript">
  <!--
    function loadAlphaTransparencies() {
        var logoImage = document.getElementById("logo");
        logoImage.src = "/media/home_left.png";
    }
  -->
  </script>
  </head>
  <body>
  <img id="logo" border="0" 
       style="width: 250px; height: 450px; 
              filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/media/home_left.png',
									sizingMethod='scale')"
       width="250" height="450" src="/media/sp.gif">
  <p>
  <script language="JavaScript">
  <!--
    if (!is_ie) {
      loadAlphaTransparencies();
    }
  -->
  </script>
  </body>
  </html>

Works great.

(Update Sun Mar 26 15:55:44 PST 2006 // updated the code to wrap better)

:: Posted by rus on Fri, 24 Mar 2006 1:28 am
:: Filed under /tech

[0 comments] [permanent link]

JavaScript Browser Detection
While I have been working on redesigning my wife's company web site, Berrett Psychological Services, I encountered a problem with browser support for PNG images that include alpha channel transparency... specifically, older (but still widely used) versions of Microsoft's Internet Explorer do not correctly render such images. Because too many people have not yet switched to Firefox (which renders the PNG images just fine), I was forced to modify my perfectly valid design to accommodate for the implementation flaw in MSIE. Blech.

The first step in making such an accommodation was to detect whether or not the browser viewing the pages is MSIE. Fortunately, many people have walked this path before I have and authored some very robust browser detection code in JavaScript. Here is one such example:

http://www.webreference.com/tools/browser/javascript.html

If you view source on any page found on the BPS site, you'll note that I am importing my local copy of WebReference's browser sniffer from here. It works great! I'm glad I didn't have to re-invent the wheel.

:: Posted by rus on Fri, 24 Mar 2006 1:24 am
:: Filed under /tech

[0 comments] [permanent link]

← March 2006 →

Sun Mon Tue Wed Thu Fri Sat

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30 31

About
The Daily Biff
Rus Berrett's weblog

Contact Me
Email: rus at berrett dot org
AIM: biffordtdavis

Proclamations
Exaggerated opinions of my own importance. Proceed with caution.

Why I Blog

Buy Me Stuff
My wish list is my gift to you (yes, shameless, I know).

My Wish List

Subscribe
Subscribe to a syndicated feed of my weblog, brought to you by the wonders of RSS.

Categories
You can isolate posts by category using the following links.

admin (1)
announcements (3)
annoyances (4)
contrib (10)

·babynames (2)

·blosxom (7)

·x10 (1)

daily_journal (934)

·2005 (184)

·2006 (280)

·2007 (263)

·2008 (207)

links (32)

·blogroll (3)

·bookmarks (3)

·gadgets (2)

·games (1)

·misc (2)

·news (4)

·rootbeer (2)

·tech (2)

·trivia (1)

·tv_programs (2)

·video (10)

media (113)

·galleries (99)

·2005 (23)

·2006 (18)

·2007 (17)

·2008 (24)

·archives (17)

·music (7)

·portraits (7)

·berkeley (2)

·eliana (1)

·family (3)

·kids (1)

newsletters (3)

·christmas (3)

opinion (2)
photography (1)
politics (23)

·antiwar (2)

·domestic_affairs (2)

·editorials (1)

·election2008 (3)

·energy_policy (2)

·foreign_policy (9)

·opinion (2)

·religion (1)

·social_policy (1)

·same_sex_marriage (1)

pro_tips (2)
proclamations (1)
projects (277)

·around_the_house (3)

·attic_conversion (128)

·back_patio_deck (39)

·exterior_painting (11)

·garage_storage (4)

·maintenance (1)

·new_garage_doors (4)

·vault_removal (86)

recipes (55)

·basics (5)

·jam_and_jelly (2)

·sauces (3)

·breakfast (4)

·desserts (14)

·cakes (1)

·candy (1)

·cookies (2)

·fruit (1)

·ice_cream (5)

·pastries (1)

·sauces (3)

·drinks (2)

·first_courses (5)

·appetizers (3)

·salads (2)

·main_courses (20)

·meat (12)

·pasta (3)

·poultry (1)

·seafood (4)

·side_dishes (4)

·snacks (1)

religion (3)
reviews (294)

·beverages (31)

·chocolate_milk (1)

·cola (2)

·dry_soda (2)

·egg_nog (3)

·ginger_ale (8)

·jones_soda (3)

·juice (3)

·milk (2)

·root_beer (6)

·sparkling (1)

·board_games (13)

·books (7)

·camping_gear (7)

·cold_cereal (3)

·concerts (2)

·food (19)

·breakfast (2)

·candy (1)

·cookies (1)

·desserts (1)

·jams_jellies (1)

·meat (1)

·salad_dressing (1)

·sauces (1)

·snacks (8)

·yogurt (2)

·movies (105)

·products (20)

·restaurants (60)

·service (1)

·software (2)

·symphony (14)

·theater (6)

·tv_programs (1)

·video_games (3)

shameless (6)
tech (21)
traditions (14)

·cousin_preschool (3)

·class_pictures (3)

·fathers_and_sons (3)

·friendship_festival (2)

·hoa_barbeque (3)

·santa (3)

vacations (80)

·2005 (32)

·park_city (12)

·slc_summer (14)

·slc_winter (6)

·2006 (13)

·california (1)

·salt_lake_city (6)

·vancouver (6)

·2007 (17)

·cayman_islands (9)

·cedaredge (5)

·utah_winter (3)

·2008 (18)

·arizona (8)

·chula_vista (4)

·hawaii (6)

Archives
Past entries are available for review.

Blogroll
These are a few blogs run by my esteemed friends and colleagues. My personal comments about the blog (and its author) can be accessed by clicking on the "wtf?" graphic to the immediate right of each entry (wtf = "What the flip?" as in "What the flip is grandma doing at the sand dunes?").

Family

grinNberrett
Brent Berrett

Listen! You smell that?
Bryan Berrett

Bangs McCoy
Jessica Berrett

Yatyk's Musings
Mark Berrett

Friends

the Improvist
Dan Brian

Why I'm Here
R. Jeffrey Davis

One Monkey,
Ten Minutes
Norm Jones

Puff of Logic
Khan Klatt