i am doing my nut here... can not figure out hyperlink css

[jasonc]

/* the next few line are not to be altered, that work fine for the rest of my site. */
a:link { color:#000; text-decoration:none; }
a:visited { color:#000; text-decoration:none; }
a:hover{ color:#666; text-decoration: underline; }
h6 {font-size: 12px; font-weight: bold; }

/* the next line is what i can not get right */
#contactlink{ color:#666; font-size: 12px; font-weight: bold; }

 

<!-- this next line is ok and shows how it should a ligh grey color -->
<h6>Mobile</h6>

<!-- i wish to have the hyperlink the same as above -->
<div id="contactlink"><a href="contact-us.html">Contact us</a></div>

 

what happens is the link has an underline when i hover and it is smaller in size that the top text 'Mobile'

 

i wish to have just these two line shown the same size and color.

 

can anyone suggest how i do this

[isedeasy]

Try...

 

/* the next few line are not to be altered, that work fine for the rest of my site. */
a:link { color:#000; text-decoration:none; }
a:hover{ color:#666; text-decoration: underline; }
a:visited { color:#000; text-decoration:none; }
h6 {font-size: 12px; font-weight: bold; }

/* the next line is what i can not get right */
#contactlink a { color:#666; font-size: 12px; font-weight: bold; }
#contactlink a:hover { text-decoration:none; }

 

If I could see a live example it would be a lot easier with the help of firebug

[jasonc]

SOLVED...

 

<a href="contact-us.html"><div id="contactlink">Contact us</div></a>

 

seems to do the trick

[isedeasy]

Except that you have now put a block level element inside of an in-line element.

 

Did you try what I suggested?

 

You probably don't even need the div:-

 

<a href="contact-us.html" id="contactlink">Contact us</a>

[haku]

Divs in anchors = bad.