CSS list guidance for a page on my site

I require some CSS styling for the square images and text that appear on the main content area of this page http://www.helloelbow.com/the-crew/


The requirements are as follows:

1. I would like the images to be listed across the page, rather than down the page
2. The text beneath each image should be smaller than it is currently
3. The text underneath each image should be the same width as the image itself (it is ok to wrap the text onto the next line)
4. I would like to remove the hyperlink underline beneath each image

Is anyone able to suggest some CSS code / pointers / or styles in order to create this list style?

 

Far as I know this should work.

In CSS

li.blockcrew {
	float: left;
	width: 80px;
	list-style: none;
	font-size: 10px;
	}
	
li.blockcrew a:link, li.blockcrew a:active, li.blockcrew a:visited {
	text-decoration: none;	
	}
	
li.blockcrew a:hover {
	text-decoration: none;
	}
	
ul.blocklist {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	}
	
#clearblock; {
	clear: both;
	}

Code (markup):

In Document

<ul class="blocklist">

<li class="blockcrew"><a href='/author/JakeThePeg/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/JakeThePeg.thumbnail.jpg" alt="JakeThePeg" width="80" height="80" class="photo" style="border:0" /></a></li>
<li class="blockcrew"><a href='/author/suburbanriot/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/suburbanriot.thumbnail.jpg" alt="Jason from Suburban Riot" width="80" height="80" class="photo" style="border:0" /></a></li>
<li class="blockcrew"><a href='/author/science/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/science.thumbnail.jpg" alt="Jeremy from Science" width="80" height="80" class="photo" style="border:0" /></a></li>
<li class="blockcrew"><a href='/author/localcelebrity/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/localcelebrity.thumbnail.jpg" alt="Jordan from Local Celebrity" width="80" height="80" class="photo" style="border:0" />  </a></li>
<li class="blockcrew"><a href='/author/younglovers/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/younglovers.thumbnail.jpg" alt="Luke from Young Lovers" width="80" height="80" class="photo" style="border:0" />  </a></li>
<li class="blockcrew"><a href='/author/Sanda_ArmedAngels/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/sanda_armedangels.thumbnail.jpg" alt="Sanda from ArmedAngels" width="80" height="77" class="photo" style="border:0" />  </a></li>
<li class="blockcrew"><a href='/author/splitreason/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/splitreason.thumbnail.jpg" alt="Sebastian from Split Reason" width="80" height="80" class="photo" style="border:0" />  </a></li>
<li class="blockcrew"><a href='/author/sundayoutfit/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/sundayoutfit.thumbnail.jpg" alt="sundayoutfit" width="80" height="80" class="photo" style="border:0" />  </a></li>
<li class="blockcrew"><a href='/author/clearcutcase/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/clearcutcase.thumbnail.jpg" alt="Sven from Clear Cut Case" width="80" height="80" class="photo" style="border:0" />  </a></li>
<li class="blockcrew"><a href='/author/nipplecripple/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/nipplecripple.thumbnail.jpg" alt="Tweaker from Nipple Cripple" width="80" height="80" class="photo" style="border:0" />  </a></li>
<li class="blockcrew"><a href='/author/waterloo/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/waterloo.thumbnail.jpg" alt="Waterloo" width="79" height="78" class="photo" style="border:0" />  </a></li>

</ul>

<div id="clearblock"></div>

Code (markup):

 

Mate, that worked perfectly, thank very much for that - really appreciate it

Check out your handiwork...

http://www.helloelbow.com/the-crew/

 

Ok, this looks cool in Firefox, but I just had a look at in IE 7 and it's broke. Any ideas what is wrong in IE 7?

Here's the page again... http://www.helloelbow.com/the-crew/

 

bumpity bump.... does anyone have any clues regarding the CSS issue above in IE7?

 

<li class='blockcrew'><a href='/author/Sanda_ArmedAngels/'> <img src="http://www.helloelbow.com/wp-content/images/userphoto/sanda_armedangels.thumbnail.jpg" alt="Sanda from ArmedAngels" width="80" [B][COLOR="Blue"]height="77"[/COLOR][/B] class="photo" style="border:0" /> 
  <br>Sanda from ArmedAngels<br><br></a></li>

Code (markup):

Change height value to 80

 [COLOR="blue"][B]height="80"[/B][/COLOR] 

Code (markup):

Solved in IE 6