Help required with <a> tag.

[BinaryBird]

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>

Here is the css part for the relavent div:

#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');
}

I am sorry if i posted some additional code. I am very new to css. Please help me out. Thanks.

[jbinbpt]

Welcome to Webmasterworld,
Did you try it like this

<a href="url">Link text</a>

[BinaryBird]

Thank you.
Yes, i used that , but if i use it, there is a line appearing, like a underline with a link instead of the text. Example, if i use:
<a href="#">Link text</a>, the display is : ________ . But the links in the other part of the page are working perfectly.

[edited by: BinaryBird at 7:51 pm (utc) on Dec. 29, 2008]

[Nodws]

add this to the CSS

a
{color:#0000ff !important}

[BinaryBird]

Its still not working. Any other suggestions?

[g1smd]

I wouldn't use non-breaking spaces and line breaks. It makes for unreadable code.

I would wrap each block of content in paragraph tags. You can then exactly set the spacing using CSS.

[swa66]

Do you have any style that would apply to <a> tags ?

What might be easy is to check it in something like the web developer toolbar add-on in firefox, you can then see what css is applied to an element by clicking on the element after you set "CSS/View Style Information ..."

[g1smd]

I would make sure the HTML uses proper block elements to enclose the content (i.e. no "anonymous" blocks), and validate the HTML as 100% correct.

Only then would I use Firebug for Firefox to examine which bits of CSS are being applied to what.

[varya]

Underlined text is the standard display for a link. It sounds like the links in the other part of the page have been styled to remove the link. Are you trying to match that?

[sonjay]

I must be going really blind, because I don't see any <a> tags in the code posted, nor do I see any css style declarations for a tags.

[alt131]

welcome to webmasterworld BinaryBird ;)

<a href="#">Link text</a>, the display is : ________ .

To clarify, are you saying that in the links you are trying to add you can't see the text between the <a>'s, but you can see only an "underline", or are you saying you can see text with an underline?

I second the suggestion to start by validating the html and css, and then using Firebug in Firefox to inspect the <a>'s you are trying to add (plus other elements). However, you have said you are new to css, so maybe helpful to look at the Css Crash Course [webmasterworld.com] before you do.

I think he is defined certain styles for the <a> tag which i am not able to figure out.

See Part 4 which how to style links under "anchor Pseudo Classes".

But the links in the other part of the page are working perfectly.

There could be a number of reasons for that, but read about selectors and specificity in Part 2.

Great to avoid code dumps ;), but the css for the links might make it easier to make suggestions. However, here are other things to think about while exploring with Firebug:
# whether the color of the link makes it invisible against the background / background images
# whether the "underline" is a border (not the default text-decoration:underline) with a different colour that makes it visible although the text is not
# whether there is a padding/margin applied to an element that is positioning the <a> so the text is "clipped"

have fun, and post back the css for the links if nothing helps ;)

@g1smd

I would make sure the HTML uses proper block elements to enclose the content (i.e. no "anonymous" blocks),

Can you explain the reasoning for this?