Samuel Page

Nike’s new advert – Write the Future (in HD)

Samuel Page — Sun, 23 May 2010 12:56:49 +0000

The new Nike advert, directed by Alejandro González Iñárritu has caused quite a stir across the internet. Many people loving it, whilst others hating it. Which ever side of the fence you sit on, you can't help but admire just how much effort and thought (not to mention cost) must have gone in to organising, directing and producing the finished advert! For those of you who haven't seen it, here's the full video:

What's more Nike have backed it up with some very clever mixed media advertising, including some impressive banners enticing the user to explore each element of the advert step by step (screenshots coming soon).

Of course the end result will always take you to the Nike football write the future website - but the nice thing about this is that it's not a product focuessed site, instead you can dip in and out of video elements from the advert, and then explore Nike further should you wish to.

In my opinion it's a great advert, but when you take into account the mixed media advertising that backs it up, it's a truly breath taking campaign.

Alejandro González IñárrituAlejandro González Iñárritu

Min-Height hack for Internet Explorer 6

Samuel Page — Sun, 07 Mar 2010 18:16:22 +0000

Setting min-height in CSS is great until you cross browser check and surprise surprise, IE6 doesn't like it.

Here's a really neat quick hack to overcome the problem:

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Full credit goes to this site http://www.dustindiaz.com/min-height-fast-hack/

How to remove image padding/margins in Internet Explorer 6 (IE6)

Samuel Page — Sun, 07 Mar 2010 18:07:36 +0000

IE6 handly adds margin around images - painful when you're working to precise sizes.

However there's a simple fix, use the following CSS in your IE6 stylesheet:

img {
display:block;
}

How to set a DIV to the height of your site’s page

Samuel Page — Mon, 04 Jan 2010 16:30:53 +0000

Ever wanted to add a semi-transparent overlay to your site, but can't get the div to be the complete height of your page across different browsers?

This bit of JavaScript should do the trick:

function zxcBdyWH(){ if (document.body.scrollHeight&gt;document.body.offsetHeight) return 
[document.body.scrollWidth,document.body.scrollHeight]; // all but Explorer Mac return 
[document.body.offsetWidth,document.body.offsetHeight]; // Explorer Mac; }

This basically works out the total height of your page, then onload set the height of your div (using the correct ID) the the height of the page:

This is necessary in all brosers, but particularly useful in Internet Explorer 6!

Forcing vertical scroll bars in Firefox

Samuel Page — Fri, 01 Jan 2010 15:00:37 +0000

By default Firefox doesn't have the vertical scroll bar visible unless the page requires it.

On site where some pages need the scroll bar, but others don't this can make centered content appear to jump slightly to the left / right as the scroll bar is introduced and taken away.

Here's a nice CSS trick to force Firefox (and other browsers) to always show the scroll bar, even if it isn't required:

html {overflow-y:scroll;}

It's worth noting that this will prevent your CSS from validating - W3C returns the following message:

Property overflow-y doesn't exist in CSS level 2.1 but exists in : scroll scroll

Credit goes to http://freizl.blogspot.com/2008/01/force-vertical-scroll-bar-in-firefox.html