My images won't go side by side

Hi there all!
I feel so embarrased asking this but I need help!
On my website I have a gallery but the images won't go side by side and over lap each other loads.

http://www.dreadfallhair.co.uk/gallery.html

I've fiddled with the CSS and asked some other friends but they have no clue what I need to do either :(

Thanks and all answers are greatly appreciated

EDIT: Forgot to mention that after you have visted the pictures the thumbnails go side by side :S

Not sure if this will help, but you have a bunch of <li> elements by themselves. Those really should be in a <ul>.

Due to the odd behaviour (that they fixed themselves after being visited), you might want to look at what styles you have applied to anchors.

Your css has:

.verticalmenu li, a:link, .verticalmenu a:visited, .verticalmenu a:hover {
display : block;
font : bold 1.1em Verdana, Arial, Helvetica, sans-serif;
color : #9a1212;
text-decoration : none;
width : 196px;
height : 27px;
}

Try replacing the red text with

.verticalmenu a:link

You are applying a different style to visited links than to unvisited linkes - which explains what you're experiencing.

You also have some markup errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.dreadfallhair.co.uk%2Fgallery.html&charset=(detect+automatically)&doctype=Inline&group=0).