Though it may seem a simple technique to give a website a background image and centering it to the page with background: url('image_url_here') no-repeat center top, it doesn't always work out the way you want it to.

Whilst working on a client's website which required a very wide centered background and the page container to be 1024px wide, I found that once you made the browser window smaller than 1024px wide, the container made the page scroll horizontally like it should, but the background image kept shifting, centering itself to the browser window and therefore not lining up properly with the content.

Strangely, this problem was occurring in every browser except Internet Explorer 6 and 7, and after many attempts with Javascript functions and CSS expressions, a simple solution we found was to add min-width to your html and body CSS. By doing this, once the browser window reaches smaller than 1024px, the page will scroll horizontally, the background image will stop shifting and still line up with the content.

An example of how your CSS should look like is this:

html {
    min-width: 1024px;
}

body {
    min-width: 1024px;
    background: #FFFFFF url('/media/images/background.jpg') no-repeat center top;
}

Creating an overlay div isn’t a problem for modern browsers. We can do that easily by specifying the CSS property height: 100%; position: fixed;.

However, position:fixed doesn’t work in IE6, so for IE6 only we have to put position: absolute; height:100%;. This will have no effect until you put height:100%; on a parent element (usually the body tag). That brings us to a strange result, our overlay div covers 100% of a screen, but if the page is scrollable, the rest of the area isn’t covered by overlay div.

The easiest solution is to put fixed height on our div, that equals to the height of the page’s content. So, in IE6 only CSS we have the following: height:expression(document.body.clientHeight + "px");

Overlay divs can be used to blend the background whilst using a modal window.

As per an overlay div, position fixed doesn't work in IE6, so we can’t position our popup-div in a specific place on the page, even if we scroll the content.

What can help us – is recalculating the position every time we scroll the page. So, IE6 only CSS property will be: position: absolute; top: expression(eval(document.documentElement.scrollTop) + "px");

We can add some more offset, let’s say 200 pixels. top: expression(eval(document.documentElement.scrollTop) + 200 + "px");

The only problem we have now is that this popup-div doesn’t scroll smoothly enough. To prevent that we need to fix the background of the body. background-attachment: fixed;. That only works if you have an image as the page’s background.

If you don’t wan’t to fix your page’s background, you can always put a blank.gif as a background for body, and wrap the rest of your page in a wrapper height:100%; width: 100% and define it’s background as it was before on a body tag.

We have recently developed and released a great Carbon Offsetting website. We have put it forward to CSS Mania - as it's a great looking website, with a wicked design and great CSS build.

See what you think, and if you get the chance - rate it! http://cssmania.com/galleries/2008/09/30/carbonica.php

Given the most recent downturns in the world's current economic state, you wouldn't be blamed for expecting a miserable Christmas for retailers and shoppers alike. However, a recent study shows optimistic if not ambitious expectations for the world of online e-commerce websites.

According to a survey by the IMRG, eDigitalResearch and Maximiles of more than 3,000 consumers, 68% revealed they are more likely to shop for presents online this year, and 77% plan to definitely carry out at least half of their seasonal shopping while sat in the comfort of their own homes. It would seem that the perception of being able to purchase items cheaper, quicker and, not to mention, without the hassle of struggling through crowds of mad shoppers, is ever persistant and perhaps even impacting even harder given the current economic climate.

With this in mind, it becomes imperative that retailers have an internet-presence which is reflective of their brand, of their values and, most importantly, of their delivery to their customers. From those surveyed by Harris Interactive and Tealeaf Technology, 57% said they would be turned off a brand if they experienced problems with their website, and a massive 49% said they would switch their sale to a competitor's site if they experienced problems with the transactional side of their visit.

The biggest pull it would seem at the moment, is to feature discount vouchers and the like - the credit crunch has provided a huge chance for retailers to support their loyal customers, as well as generate future users through BOGOF and other innovative offers! The most successful of its kind seems to be Walkers Snack Foods which topped the lists after recording 400,000 unique visitors in June this year, compared with 17,000 for the same period of the last year.

Going through my archive's I came across a font that I created a while ago when fontstruct popped up on the scene.

Fontstruct is a free modular font creation tool using Flash.

I wanted to create the smallest pixel font for small web/flash use.
You can download the file from here.

Also check out some of the other cool stuffs people are creating on fontstruct.

pxls.zip (3.98 kb)

Stumbled across a great feature for ecommerce/portal/information websites recently.

In a nutshell, if you are using Firefox or Internet Explorer, you probably have a search box in the top right-hand side of your browser. In which case you can add your site to the list of sites that this search box will search... So instead of defaulting to live.co.uk or google.co.uk your search could also encompass a variety of websites.

A simple explanation can be found here: http://remark.wordpress.com/articles/quick-architecture-extending-reach-with-a-search-provider/ 

This functionality uses OpenSearch technology which has been pushed by Amazon/A9/Alexa for a few years - www.a9.com

[EDIT]

Combine this with the new features of the next generation of browsers, and you've got some pretty useful tools http://blogs.msdn.com/ie/archive/2008/09/15/what-s-new-for-ie8-search.aspx

As Internet Explorer 8 continues it's build at Microsoft. Great to see that they are really thinking of the future and CSS 3 in this release.

http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx

The beta of IE8 is available here, though DO NOT install this on your production computer - it's a beta!

This is a great article explaining why IE is not the browser of choice for many developers. Hopefully IE8 will break the mould.

PLEASE!

You have got to check this out

I've been using RedGate's tool for year.  Their SQLCompare and SqlDataCompare are essential parts of my toolbox.  Being more dev than DBA, these tool offer excellent functions for marrying up your dev databases to the production servers.  Even when you can't see your production databases, all the work is scripted so you can save the Sql files and send them on to your hosts.  Magic

Their latest offering, ANTS Profiler, is another high calibre tool that we've become very attached to.  We all like to write bullet-proof code which works lightening quick, but old habits die hard and it's often a thing we aspire to but never quite get there

we've been using a lot of LINQ lately using IQueryable results.  Alls well while you're coding them up and using them on your dev server.  However, combine thse results sets with 10,000 users all looking for the latest news and the code starts to get a bit laggy to say the least. 

We installed the ANTS profiles and it instantly identified these query's as the casue of a lot of the lag we were experiencing.  It seems they are still attached to the database in some manner as any subsequent access was still causing a call to the database , even though we'd stored them in an application variable.  We converted to List<> and the lag was a thing of the past.

There must be more to it but i'm miffed that all these new Microsoft tool are behaving like this.  Sure, they're a dream to code for ; LINQ style queries make up some of the most logical (from a coding perspective) syntax i've seen for a long time and object-oriented data access is somehting i've personally spent ages emulating in previous languages i've worked on.  Who would have thought that they'd be so expensive on the processor

If you're getting any kind of weird slow-down on your code, i can highly recommend the ANTS profiler.  Even if you're not, the profiler can still identify problematic sections of code and offer you some pointers.  We run everything through it now as a matter of course :¬)

On the 16th of August the CJ summer sizzler took place attracting a crowd of 50 - made up of CJ employees & their friends & family. The directors made their contributions- Alex made his home made speciality chicken, Bill was in charge of the BBQ (but got bored) & Joe made sure nobody's glasses ever reached half empty! There was no food poisoning, a huge range of food..burgers,sausages,pasta,samosas (that we were all eating for weeks after!) & the weather even held out.  It was a brilliant day for all involved & a good time was had by all!

Back in March I posted a blog about exciting new sofwtare - namely Microsoft Photosynth and Deepzoom. Well Microsoft released Photosynth a couple of weeks ago, and it's pretty neat!

Anyone can have a go at this. All you need to do is follow the instructions here, and then upload your photos here. This is a Synth of our Technical Room, I took 50 photos, and the Synth rate is 98%. In hindsight I would double the amount of pictures I took. You can also see a full screen version of this.

Having read alot about Photosynth - it's a very powerful tool. I would like to gain control of my Synth's once created, rather than having them stored in a Windows Live environment, but thats the only downside so far.

Get in there!