Help with <a> tags

I am having trouble while displaying a certain text in my html page as links using <a> tag. My friend provided me the css for the page. I think he is defined certain styles for the <a> tag which i am not able to figure out. When i place a <a> tag, the text in between the tags disappears and instead a line with a link appears. Here is the html part of that:

<div id="dir-folder">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="dirleft">&nbsp;</td>
<td class="dir" valign="top">
<table width=100% border="0" cellspacing="0" cellpadding="0" style="font-size: 1.7em">
<tr>
<td>

&nbsp; <b>1</b> <br />
&nbsp; <br />
How to get a gas connection? <br />
&nbsp; <br />
Question 2 <br />
&nbsp; <br />
Question 3 <br />

</td>
<td>
&nbsp; <b>2</b> <br />
&nbsp; <br />
How to get a telephone connection? <br />
&nbsp; <br />
Question 2 <br />
&nbsp; <br />
Question 3 <br />
</td>
</tr>
</table>
</td>
<td class="dirright">&nbsp;</td>
</tr>
</table>
</div>
</div> 

HTML:

Here is the relevant css:

#bodyContent {
position:relative;
padding: 0px;
border:0px solid #CCC;
clear:left;
padding-top:8px;
}
#bodyContent h1 {
background-color:#606060;
color:#FFF;
font-size:14px;
font-family: Verdana, Geneva, sans-serif;
font-weight:bold;
padding:10px;
text-transform:capitalize;
margin:5px 0;
border:1px solid #333;
}
#dir-folder {
margin:0px;
padding:0px;
}
#dir-folder {
height:234px;
border:0px solid #666;
width:100%;
float:left;/*background-image:url(images/dir-bg.png);
background-position:top left;
background-repeat:repeat-x;
*/
}
#dir-folder {
padding-top:10px;
}
#dir-folder .dirleft {
height:234px;
width:14px;
background-image:url(images/dir-left.png);
background-position:top left;
background-repeat:no-repeat;
}
* html #dir-folder .dirleft {
background:none;
filter: progid:dximagetransform.microsoft.alphaimageloader(src='images/dir-left.png', sizingmethod='crop');
}
#dir-folder .dirright {
height:234px;
width:18px;
background-image:url(images/dir-right.png);
background-position:top left;
background-repeat:no-repeat;
}
* html #dir-folder .dirright {
background:none;
filter: progid:dximagetransform.microsoft.alphaimageloader(src='images/dir-right.png', sizingmethod='crop');
}
#dir-folder .dir {
background-image:url(images/dir-bg.png);
background-position:top left;
background-repeat:repeat-x;
padding:10px 0px;
}
* html #dir-folder .dir {
background:none;
filter: progid:dximagetransform.microsoft.alphaimageloader(src='images/dir-bg.png', sizingmethod='scale');
} 

Code (markup):

I am sorry if i posted some additional code. I am very new to css. Please help me out. If you require the actual files, let me know, will give a link to the files. Thanks.

 

You should put the <a> where you are having the problem so we don't have to guess at it. If you are putting it in the <h1> element, the font color there is set to #fff, which is white.

Do not use 'filter' in the CSS. It only works in Internet Explorer and even Microsoft has dropped its usage in IE8.

 

Here is where i need to use <a>

<td>

&nbsp; <b>1</b> <br />
&nbsp; <br />
<a href="#">How to get a gas connection? </a><br />
&nbsp; <br />
Question 2 <br />
&nbsp; <br />
Question 3 <br />

</td>

HTML:

I am not using the <a> tags inside a <h1> tag. And the css was written by my friend who is out of station and i am new to css. So i am having trouble figuring out where exactly is the text color being set to #ffffff.