New Look CNET UK

After editting virtually every style sheet on the site the new look CNET UK is finished and launched. The garish yellow is gone and replaced with a new black theme. Pages are also more consistent and laid out better.

CNET UK new look

Compared the old look:

Old CNET UK design

The project (code names Tiburon) brings the site more in line with the US version CNET.com and incorporates suggestions from users of the site. The team managed to launch the update which affected every page of the site with little to no down time.

More details and Feedback here:

http://crave.cnet.co.uk/software/0,39029471,49300666,00.htm

Expanding the skillset: Advanced CSS Rollover effect without javascript

For a while I’d been using javascript for image rollover effects. They were fairly simple to implement and had the desired effect. However, if javascript was disabled visitors missed out on this. In addition to this I try to avoid javascript if there is a css solution.

I started using the css a:hover psuedo class to set a different background image. This mean a button had to be an element such as a div and have a background image set. The downside to this is it was sometimes it was difficult to get the exact effect desired.

More recently I’ve started using the alpha transparency filter in conjunction with the a:hover class. This has several benefits.

In some cases you can use a single image and just vary the opacity of the image with css when you hover over it. You can see an example in the main navigation on a site I am working on here. The advantage of this method is you can swap out the images anytime and the hover over effect with still remain. Also means faster page loading for visitors as there is one image instead of 2. The effect can be applied on a large number of images or text with a single css style rule making it easy to apply to existing webpages.

The css needed to make all links containing images to have this effect would go something like this:

a:hover img {
filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;
}
Notice there are 3 rules applied to this style all doing the same thing. The first is for internet explorer, the second for Mozilla/firefox, the last for other browsers such as Opera and Safari. This is because this isn’t officially supported but it does work accross the major browsers (Firefox, Safari, Opera, and IE7 - IE6 supports jpg and gif but not PNG transparency)..

The second way to use this technique is over background images. If you want to make something in a background image have a rollover effect, such as a making a part of an image a button. This is achived by placing a white (or black) image over the top of the portion of the image and varying the opacity of the covering image. You can see this in action on a recent contest I designed for Gamespot UK and Amazon.co.uk. The 5 images under the entry form “light up” when you hover over them. This was achived by placing 5 white images over the background image and setting their opacity to “0″. When the mouse hovers over the opacity is changed to “20″ or “.20″ depending on your browser. In hindsight I should have created these images 1px by 1px and stretched them to save download time, however, it demonstrates the posibilities. In this example I had trouble lining up the white images over the background across all browsers so I opted for setting all the “buttons” in the background image as the background of a smaller div into which I inserted my boxes. This wouldn’t happen if I had reset all the default browser values using Yahoo!’s CSS reset as this removes the differences between browers margin, padding settings etc.

Anyway have fun trying out this technique and leave feedback if you get stuck or manage to use it on a project.

More Expanding the skillset articles to look out for are using flash and javascript to replace text with the fonts you wish you could display - yes I’m talking about sIFR

Ask the Guru: How do I make text flow around complex images

In the the first of FFE’s (From the Front End’s) “Ask the Guru” features we look at shaping text so it flows nicely around images, even if the user is viewing your page with a different text size or browser than you.

Guru: Well a valid question asked have you!

Here we see an example (click any of the example images to view the XHTML page):

Download the example files here

There is not 1 but 3 possible solutions!
Continue reading »

Hacked to Death ii (Safari)

Apologises for the lack of posts the last few days. I’ve not been on holiday, far from it, I’ve started a new contract. I will be producing for a leading media company.

This actually brings me nicely onto this blog entry’s topic - Hacking Safari. I am used to testing on the major PC based browsers (FireFox, IE, Opera and to a lesser extent Mozilla, Netscape, linx) but have never been required or had the hardware to test with Macintosh’s Safari.

For the most part if a design works in FF and IE, Safari will quite happily play along. However, on one page where I have used relative positioning to move an image up by a few pixels I encountered a problem. FF and IE6 didn’t line up. I was forced to use an IE6 hack (see previous hacked to death entry) to set a different pixel adjust for the two browsers. While this solved the problem in IE6, Opera, FF and IE7 - Safari was not happy.

While Safari had rendered the page as FF it treated the positioning of this image as IE6. As IE6 hack only affects IE6 and older Safari’s positioning of he image is not corrected. Quiet a problem.

Thus began my quest to find a CSS hack that only affected Safari. Preferably an elegant hack (if there is such a thing) still allowed my style sheet to validate and would not affect future versions of The browser.

Continue reading »

Hacked to Death

Everyone working on the front lines (building for the front-end) will have likely encountered a page that despite being a coding piece of art looks great in one browser but falls apart in another.

If you don’t work for Microsoft you’ll know the problem is usually with the Internet Explorer browser. A lot of the time tweaking a style sheet a little can solve things but sometimes there is no other option but to add a hack.

No one likes hacks, in fact I go to insane lengths trying to find an alternative before I will use one. However, if it is necessary to ad a hack is there a good way, or is a hack always going to be ugly and we just have to face it?
Continue reading »

Switching from Transitional to Strict

I’ve been using XHTML Transitional for while and been happily validating my code on the w3c website until I heard a podcast from Dustin Diaz. Dustin said he prefered HTML strict to XHTML Transitional.
Looking into the reason I used Transitional - because it’s a bit more forgiving - I realised that I should try and make the move to xhtml strict. Looking at my code I was pretty confident that switching to Strict would be fairly painless.

Overall I have to say it wasn’t too much of a headache but the 2 attributes I had to abandon were:
target=
border=
Continue reading »