Lightbox

I'm sure we've all seen the lightbox photo effect, however until now I've never had the opportunity/need to use it, and having implemented I must say it must be one of the easiest things to make work - and the final result is stunning.

Official Site - http://www.lokeshdhakar.com/projects/lightbox2/

Header 1 tags with a background image

Useful to remember if you wish your h1 tags to actually be your logo. Can be created using simple CSS as shown below (below example also makes the logo a clickable link back to the homepage):

h1 a {
display: block;
text-indent: -9999px;
width: 538px;
height: 88px;
background: url(../images/logo.jpg) no-repeat left;
outline: none;
}

The first link of the CSS code is display: block - this displays the link as a block using the dimensions you specify later.
text-indent: -9999px - this will allow you to write your header copy (for SEO and for browsers not using CSS) without it being seen ordinarily.
width: 538px - typically the width of your logo image
height: 88px - typically the height of your logo image
background: - A link to your image with the specification that it doesn't repeat (you should have no problems with it repeating anyway due to the dimensions matching that of the image - however its best to use this anyway.
outline: none - when this is clicked on as a link there wont be a faint line around the edge of it (as there normally is by default in Firefox.

Create a tab layout using CSS/HTML and JQuery

Good tutorial for creating a slick tab driven layout using CSS, HTML and JavaScript (JQuery):

http://nettuts.com/html-css...

New Browser Releases

It's been a busy few months for the browser companies. First we had the release of Opera 9.5 which came out to rave reviews after it did so well in the ACID3 test. Then hot on its heels was the eagerly awaiting release of Firefox 3. It was estimated that there were well over 8 million downloads of the popular Mozilla web browser on the first day alone!! Some of the add-ons may not yet be compatible with v3 but the developers are hurrying their way to ensuring that this doesn't stay this way.

You can download them both for yourself below:

> Firefox 3.0
> Opera 9.5

With Microsoft set to follow this with the release of Internet Explorer 8 sometime late 2008 the browser war is really hotting up. Hopefully Microsoft have finally listened to web developers across the globe and IE8 will be their most successful release yet...!

Graphic Design Inspiration

Awesome site with some amazing pictures and graphics on it. If you like what you see and want to try it yourself there is also some tutorials to go through:

http://abduzeedo.com/

Firefox 3 Release Candidate 1

Mozilla have publicly announced the arrival of Firefox 3 Release Candidate 1 - which should hopefully mean that the final release should only be about a month away!

The new release has received good reviews and you can download it yourself on the following link:

http://www.mozilla.com/en-US/firefox/all-rc.html

Be aware - This will overwrite your current version of Firefox, so if you aren't ready to make the move to v3 just yet... think twice before downloading it!

SitePoint book giveaway - The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques

The folks at Sitepoint are very generously giving away free PDF copies of their popular book - The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques.

This offer expires on Friday 13th June 2008 so make sure you download your copy before then:

Download link

IE6 Randomly Repeating Text

Ever had the issue whereby IE6 is randomly repeating the last few letters of text outside of its containing divide? Well I had that problem this evening... very infuriating!!

However, before you threaten to uninstall everything Microsoft then get in the car and drive to California to blow up the Microsoft headquarters - take a read of this article which explains the issue and gives a very simple workaround:

http://www.positioniseverything.net/explorer/dup-characters.html

In a nutshell the problem is caused by 2 consecutive divides that are floated in the same direction. The simple workaround is to give the last floated divide to appear in the markup a negative margin on the opposite side (i.e. if you have float:left, use margin-right: -20px; and vice-versa). Since the divides are floating to the other side than that of your margin this won't affect your design.

Simple eh?! Now, get out of the car and back to work!!

Tomorrow's CSS Today: 8 Techniques They Don't Want You To Know

Good article from Tim Wright on the SitePoint.com website about some handy CSS tricks and exactly what features of CSS3 can and can't be used already:

http://www.sitepoint.com/article/tomorrows-css-today

IE8 Beta - Installation Guide (with Virtual PC)

Microsoft have now released the first beta of Internet Explorer 8. If you (like me) are keen to try it out, below is a good guide on how to install it correctly using Virtual PC. The benefit of using a Virtual PC to install the new beta is that it won't overwrite any existing IE6 or IE7 versions you currently have on your default machine.

Please bear in mind that the virtual hard disk image (VHD) for IE8 that can be run via Virtual PC will time out in July 2008, at which point you'll need to download an updated image.

1. Download and install Virtual PC (30.4 MB).
2. Download and run the IE8 Virtual Hard Disk file here (IE8_VPC.EXE) -- this will auto-extract your VHD to a folder (along with a couple of text files).
3. Launch Virtual PC and click 'New...' to start the New Virtual Machine Wizard.
4. Select the second option, 'Use default settings to create a virtual machine' and click 'Next'.
5. Give your new virtual machine a name -- 'IE8' seems sensible enough -- and hit 'Next'.
6. Hit 'Finish'. This will automatically create a new directory called 'IE8' (or whatever else you named it) with a new configurations file inside it called 'IE8.vmc'.
7. A 'Settings' dialog box should now open automatically. 'Select Hard Disk 1', and switch the 'None' radio button to 'Virtual hard disk file:'
8. Browse and select the VHD file you extracted earlier, then press 'OK'.
9. Your Virtual PC console should now list a new Virtual Hard Disk. Select it and hit 'Start'.
10. Voila! After a few seconds you should be have a standalone window running XP and the IE8 beta.

Now all you need to do, is develope away and see what your creations are potentially going to look like in the new Microsoft browser!

Further information about IE8 can be found here.

Smart Firefox Add On

Pic Lens is a smart add-on which will turn your screen into a 3D image gallery. The link is below:

http://www.piclens.com/site/firefox/win/

The site detects which browser you are viewing it in and take you to the relevant part of it, therefore the above link is best viewed in Firefox.

To view the results, if you have a Facebook account, install the update, log in to Facebook, pick a photo album and when hovering over the image there will be a small blue arrow in the corner, click on this, sit back... and enjoy!!

Validating Flash Files Using the Satay Method

Ever created a Flash file (.swf) and embedded it into your HTML and it fails validation? Most WYSIWYG editors create a lot of unnecessary mark-up that is not needed.

After hours searching the internet for a solution I managed to track down the answer. A lot of sites I visited all pointed toward "The Satay Method". It's fairly straightforward and anyone familiar with Flash should be able to understand it. The link is below:

http://alistapart.com/articles/flashsatay

N.B. One important note. The code at the very end of the article is slightly wrong. There should be a " in the code directly after the following (on the first line):

object type="application/x-shockwave-flash

Don't let that confuse you (as it did to me!!)

Version 2.0 WH Internet Released

That's right. It's been a long time coming but in the early hours of this morning the testing and validating of the new version of the WH Internet Ltd website was completed and the site was released for the general public:

http://www.whinternet.co.uk

Have a browse round and let me know what you think.