Welcome to WebmasterWorld Guest from 54.146.248.111

Forum Moderators: not2easy

Message Too Old, No Replies

Help required with <a> tag.

     

BinaryBird

6:52 pm on Dec 29, 2008 (gmt 0)

5+ Year Member



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

7:02 pm on Dec 29, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to Webmasterworld,
Did you try it like this

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

BinaryBird

7:49 pm on Dec 29, 2008 (gmt 0)

5+ Year Member



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

6:51 am on Dec 30, 2008 (gmt 0)

5+ Year Member



add this to the CSS

a
{color:#0000ff !important}

BinaryBird

3:27 pm on Dec 30, 2008 (gmt 0)

5+ Year Member



Its still not working. Any other suggestions?

g1smd

5:04 pm on Dec 30, 2008 (gmt 0)

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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

10:00 pm on Dec 30, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

10:09 pm on Dec 30, 2008 (gmt 0)

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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

11:35 pm on Dec 30, 2008 (gmt 0)

10+ Year Member



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

12:11 am on Dec 31, 2008 (gmt 0)

10+ Year Member



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

7:03 pm on Dec 31, 2008 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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?
 

Featured Threads

Hot Threads This Week

Hot Threads This Month