Z-index Internet Explorer IE6

May 22nd, 2009

Problem

z-index is not performing properly in internet explorer, ie6, ie7, etc.

Don’t worry it’s not you, this is yet another bug in IE.  IE does not render z-index properly:

“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly

Solutions/Workarounds

Vertical & Horizontal Centering w/ 3 lines of CSS

May 22nd, 2009

This method has become our ‘gold standard’ for centering your sites, images, or anything directly in the center of the page (vertically and horizontally).  It’s easy to use, unobtrusive to your other page elements, requires only 3 lines of CSS and no javascript.  It’s almost like a CSS plugin of sorts.   The only downside is that 3 div elements are required, however, compared to all other solutions we’ve tested, this is minimal overhead, and worth the effort.    It’s built on Jakpsatweb’s method for Vertical Centering in CSS. Compatibility:

“The code below works in Internet Explorer 5.0, 5.5 and 6.0, in Gecko browsers (Mozilla, Firefox, Netscape 7), in Opera 7, Konqueror 3.3.1. (maybe lower too), and in Safari. The page can be HTML or XHTML, standard or quirk mode.

Both examples don’t work in IE 5.2 for Mac. As I haven’t Mac, I can’t test it. Please let me know (dusan@pc-slany.cz) when you’d find any workaround.”

Vertical Centering Using CSS

1. Add 3 Classes to Your Stylesheet

.ht1 {display: table; #position: relative; overflow: hidden;width:100%;height:100%}
.ht2 {#position: absolute;  #top: 50%;display: table-cell; vertical-align: middle;text-align:center;}
.ht3 {#position: relative;  #top: -50%;margin:0 auto 0 auto;border:1px solid green;width:300px;height:200px}

Update: To clear up some confusion – we’ve added the widths & heights as needed above.  We had left them out to allow you to customize your own layout, but this way everything is included, and you can change the widths & heights as needed for your installation.

2. Create 3 elements in your HTML

<div class="ht1">
    <div class="ht2">
        <div class="ht3"></div>
    </div>
</div>

Important to Note:

ht1 =Is the main container, this div will be 100% width & height in size, positioned absolutely to the top left.

ht2 = 2nd container needed for vertical centering & positioning.

ht3 = Container to center. This needs an exact px width & height.

3. Set the Height & Width of ‘ht3′ Element.

In order to allow for reusability, we haven’t given this element it’s height or width, you will need to do so.  In most cases you will give these elements multiple css classes, that second class is most likely where you will define your height and width.

Voila – vertical & horizontal centering using 3 css classes.  Kinda makes me feel like riverdancing.

Men Wanted for Hazardous Journey

May 12th, 2009

Conversation with Viktor Frankl from his masterpiece “Man’s Search for Meaning” (my current read).

A little background: Frankl, an philosopher, phsychoanalyst, phsychologist was one of the few jewish people that spent years in nazi concentration camps, and managed to survive.  Here he talks of how easy it was to simply give up, and to find no meaning in your life in the camp (as most did).  But here he explains the sheer utmost importance of not giving up – of finding meaning in it all.

—- pg 84

“…As we said before, any attempt to restore a man’s inner strength in the camp had first to succeed in showing him some future goal. Nietzsche’s words, “He who has a why to live for can bear with almost any how,” could be the guiding motto for all psychotherapeutic and psychohygienic efforts regarding prisoners.

Whenever there was an opportunity for it, one had to give them a why – an aim – for their lives, in order to strengthen them to bear the terrible how of their existence. Woe to him who saw no more sense in his life, no aim, no purpose, and therefore no point in carrying on. He was soon lost. The typical reply with which such a man rejected all encouraging arguments was, “I have nothing to expect from life any more.” What sort of answer can one give to that?

What was really needed was a fundamental change in our attitude toward life. We had to learn ourselves and, furthermore, we had to teach the despairing men, that it did not really matter what we expected from life, but rather what life expected from us. We needed to stop asking about the meaning of life, and instead to think of ourselves as those who were being questioned by life – daily and hourly.

Our answer must consist, not in talk and meditation, but in right action and in right conduct. Life ultimately means taking the responsibility to find the right answer to its problems and to fulfill the tasks which it constantly sets for each individual.

These tasks and therefore the meaning of life, differ from man to man, and from moment to moment.  Thus it is impossible to define the meaning of life in a general way.  Questions about the meaning of life can never be answered by sweeping statements.  “Life” does not mean something vague, but something very real and concrete, just as life’s tasks are also very real and concrete.  They form man’s destiny, which is different and unique for each individual.  No man and no destiny can be compared with any other man or any other destiny.  No situation repeats itself, and each situation calls for a different response.  Sometimes the situration in which a man finds himself may require him to shape his own fate by action.  At other times it is more advantageous for him to make use of an opportunity for contemplation and to realize assets in this way.  Sometimes man may be required to simply accept fate, to bear his cross.  Every situation is distinguished by its uniqueness, and there is always only one right answer to the problem posed by the situation at hand.

When a man finds that it is his destiny to suffer, he will have to accept his suffering as his task; his single and unique task.  He will have to acknowledge  the fact that even in suffering he is unique and alone in the universe.  No one can relieve him of his suffering or suffer in his place.  His unique opportunity lies in the way in which he bears his burden.”

MovNat – “Le Methode Naturelle” Evolved

May 10th, 2009
Le Methode Naturelle

MovNat

(Taken from an email from a close friend)

“I read an interesting article the other day in Men’s Health about a system of physical fitness called le Methode Naturelle.  It was developed 100 years ago by a French Naval Officer named Georges Hebert.  He was stationed on a Caribean island when a volcano erupted.  He sprung into action, leading his men into panicked crowds of people to help them escape the deadly lava rushing though the streets.  Only 700 people survived, largely because of him.  Hebert was affected by all the people who died, and had a realization about the modern human animal:  The modern world, Hebert believed, was producing hollow men who focused on appearance and forgot about function, At the same time, they stopped exercising with the wildness of kids and instead insulated themselves from risk. The cost, he felt, was far more destructive than they might think.”

Throughout his travels, he observed that indigenous people from Africa, etc. were in amazing shape.  He wrote “Their bodies were splendid, flexible, nimble, skilful, enduring, resistant and yet they had no other tutor in Gymnastics but their lives in Nature.”

So he created his own method of physical training, le Methode Naturelle, with the ethos, “Être fort pour être utile”–”Being strong to be useful.”  His method focused on ten essential skills: walking, running, jumping, walking on all fours, climbing, balancing, throwing, lifting, defending and swimming.  He created outdoor training facilities that were like modern day obstacle courses to challenge these skills.  He had a rule: no competing, because he believed that when you try to beat the other guy, you are testing the other man’s weaknesses and not your own.

Le Methode Naturelle

MovNat

The article I read was about a Frenchman today named Erwan Le Corre who is reviving and improving upon the forgotten practice in the Brazilian rainforest.  He says: “I meet men all the time who can bench 400 pounds but can’t climb up through a window to pull someone from a burning building.  I know guys who can run marathons but can’t sprint to anyone’s rescue unless they put their shoes on first. Lots of swimmers do laps every day but can’t dive deep enough to save a friend, or know how to carry him over rocks and out of the surf.”

I find this whole concept fascinating and powerful.  On Le Corre’s website, movnat.com, he decries “zoo humans” and the modern human as out of touch with our natural wild human ability and character.  Coming across this training method is beautifully timed for me, because I have felt unsatisfied with my current workout regimen.  I run for many miles.  Then maybe pushups and situps.  Weights bore me, so I don’t lift them.  And I get in no better shape.  I know my body is capable of more.  I want to challenge myself, I want to run barefoot, I want to swim, I want to jump and climb trees, I want to unleash the power of the human animal that is caged in this consumer and appearance driven society, I want to get into the best shape of my life, but not so I can show off a six-pack at the beach, but so I can “be strong to be useful”, knowing my abilities, fearing nothing, stength of body and mind, fortitudo.

Check out Le Corre in action: http://www.youtube.com/watch?v=SKGF-ErsJiI

And his website: http://movnat.com/

Here is the full article, worthy read about the revival of this method: http://www.menshealth.com

Le Methode Naturelle

MovNat

And more on Hebert himself:  http://en.wikipedia.org/wiki/Georges_H%C3%A9bert

Cheers to a beautiful Saturday brothers.

- another Zoo Human, set on breaking free from his cage”

How to Speed Up Page Load Time

May 4th, 2009

Special thanks to a great article over at Webjackalope:

15 Quick Ways to Shrink Page Load Time

Some Odds and Ends from the Article

Here are some quick tidbits that we have seen overlooked by developers in the past:

Check your Website Load Time

Run your pages through the Web Page Analyzer for oodles of load time tips.

Include the Height & Width in Images

This is important for page load time – allowing the browser to render the page, with image placeholders, rather than waiting for each individual image.

Broken paths and images can be a major load time killer

You can check all the images and scripts on your page in using firebug (see below).  Scan through all these mugs and delete anything that is broken, unnecessary, or ugly.

Firebug is Awesome

The firefox add-on Firebug is typically used for js and other code debugging, but it also contains a sick “Net” Console which displays each individual page element, broken links, paths, and load times for the individual elements.

Firebug Net Console

Firebug Net Console

Wordpress Users Only: WP Super Cache Plugin

Download and install the WP_Super_Cache plugin, the defacto standard for anyone who is serious about publishing.