CSS Help!

programming web dev
1

On this page here
I cannot seem to get the text in the div of the gray boxes without messing up the hyperlink, etc. The code for the box is here


<div id="content1"> <p id="title2">Web Design</p>
  <div id="recent-work">
	<div id="recent1">
		<a href="" target="_blank"><img src="Portfolio-images/1.jpg" alt="Thumbnail 1" border="0"/> </a> 		
		<p id="title6">Work</p>  
	  </div>	
<div id="recent2">
		<a href="" target="_blank"><img src="Portfolio-images/1.jpg" alt="Thumbnail 1" border="0"/> </a>	 </div>
<div id="recent3">
		<a href="" target="_blank"><img src="Portfolio-images/1.jpg" alt="Thumbnail 1" border="0"/> </a>	 </div>
<div id="recent4">
		<a href="" target="_blank"><img src="Portfolio-images/1.jpg" alt="Thumbnail 1" border="0"/> </a>	 </div>
  
</div></div>

Then heres teh CSS


/* CSS Document */

#recent1 a:link, #recent1 a:visited, #recent2 a:link, #recent2 a:visited, #recent3 a:link, #recent3 a:visited, #recent4 a:link, #recent4 a:visited
{
	/* absolute positioning */
	display: block;
	float: left;
	clear:both;
	margin: 10px 0px 0px 20px !important;
	margin/**/:/**/10px 0px 0px 12px; 
	width:500px;
	height:120px;
	background-color:#666666;
	
	/* other attributes */
	border:3px solid white;	
}

#recent1 img, #recent2 img, #recent3 img, #recent4 img {
display:block;
padding: 10px;
}

#recent1 a:hover, #recent1 a:active, #recent2 a:hover, #recent2 a:active, #recent3 a:hover, #recent3 a:active, #recent4 a:hover, #recent4 a:active
{
display:block;
border:3px solid black !important;
border/**/:/**/3px solid black;
}

/*PARAGRAPH SETTINGS*/
#page #title6 {  /*Portfolio Works Title*/
font-family: Verdana, Geneva, Helvetica, sans-serif;
position:static;
color:#A37E13;
font-size:15pt;
font-weight:bold;
margin: 0;
padding: 0;
}

Thanks if anyone could try to help me