Welcome

Moving...

17/12/2007 at 18:48:45 - No comments

Posted by Harry

Ok, I have set up a personal site away from here, under an entirely new domain, and will be over there more than I will be over here. Keep up with things over at http://csswizardry.com.

Harry

PR Design Labs

08/11/2007 at 11:23:03 - 1 comment

Posted by Harry

I have just completed my newest project: "PR Design Labs".

Labs is a public laboratory where developers can go and get free codes and snippets that PR Design use in their commercial development!

Enjoy.

Someone's Ripped My Site!

03/11/2007 at 11:23:20 - 1 comment

Posted by Harry

This is not a new trend, but it shocked me all the same. I recently developed this site for the web department of PR Design and, not to blown my own trumpet, it got some pretty good recognition with CSS galleries. It seems someone else quite likes it too. I was checking my Google Analytics and this link came up. Can you see a slight resemblance? Or is it me? Please gimme some advice! I've contacted Freewebs, asking them to pull the plug on his account but is there anything else I can do?

Thanks, Harry

EDIT: Many thanks to the guys at Freewebs who have sorted the problem out. Incidentally, through my travels on this issue I learned a nifty way of preventing hotlinking. Maybe I'll do a tutorial on it sometime.

Diagnostic Styling

18/10/2007 at 11:24:12 - 6 comments

Posted by Harry

Welcome to another tutorial. Today I’ll show you how to optimise accessibility and standards during the testing phase using Diagnostic Styling.

Imagine this, you’ve developed a site, spent ages on it. It looks amazing. Then the W3C Validator (http://validator.w3.org/) tells you there are alt attributes missing. Now this isn’t in itself a disaster, it tells you which lines the errors are in. But suppose you use Notepad which has no line numbers! Suppose you could have avoided that whole situation in the first place…

Diagnostic Styling works by defining a css rule for a particular situation. Take the following:

This works as follows:

- All images will have a big red outline
- All images that have an alt tag will have a blue border, images without an alt tag will stay red

You are aiming to have no red borders on your images!

Suppose your image has an alt tag, but the alt tag is empy, how do you find those visually?

Now all images with an empty alt tag will have a green border.

But, it doesn’t stop there: this method works with the title tag too.

And the href tag:

Diagnostic styling is only really suited to testing, so remember to strip out any diagnostic css before you publish your site!

Consistent Text with CSS

11/10/2007 at 08:20:20 - 2 comments

Posted by Harry

First of all, many thanks to Alexander Radsby of Make No Sense for the following bit of CSS trickery. Basically what this does is "removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions."

Yahoo!'s UI Library offer a CSS reset which makes all elements in all browsers reset to zero. Thankfully Yahoo! have made the reset publicly available.

After adding or linking to the css from Yahoo! you have a firm base to style elements from, and as I was taught earlier on today, this can improve cross-browser font styling, especially in IE.

By giving the body tag a font size of 62.5%:

all subsequent elements can be styled like this:

Now, due to resetting the CSS and giving the body a font-size of 62.5%, all em values are related to pixel values in that 2em = 20px, 1.5em = 15px and so on.

There you have consistent cross-browser text styling.

Harry