I decided to learn CSS as it is the future, and much easier to configure!, so i took my site completely down and decided to use my domain etc purely for learning new languages and testing CSS.

The design is basic, as i didn't want to use to many images, or make a flash design like i have done before.

Basically, i want a vertical line down either side of the site. Because i do not know how much content i will have on certain pages, i want the design to be flexible, and so i plan to set the image repeat as vertical.

The link to my site is HamillDesigns.co.uk Design v1_CSS. You will notice the 2 short lines right in the centre of the design above the text, they are the two lines i want going vertically down either side of the design.
I have left it like that purely to show you the image and i have left the coding for you to see where i have gone wrong.

I've looked up plenty of tutorials etc, and tried so many different methods, that is simply the last method i tried before i found you guys .

Any help would be appreciated.

Can't see any vertical lines in FF I see them in IE.
A word to the wise.. develop your site using FF or Opera, leave IE for last, otherwise you will tear your hair out before you ever finish.

For one thing, you have an error in your rule:

background: url('http://www.hamilldesigns.co.uk/gfx/vertical.gif') y-repeat;
Proper sytax is repeat-y

That's really not going to work very well. You can do it with borders on 2 containing <div>s .. OR, probably an easier way, is to create a white background for #content that is the width you want and has the vertical borders on the left and right side the way you want it. Then add that background to #content as you have above and the border will stretch as you add content. You can make this background very narrow vertically so it keeps the size down and it will tile.

Thanks for the quick responce , i'll give that a go now, and let you know how i got on