problem with css format for hyperlink

[hooksie2]

Is anyone able to tell me what is wrong with the following html. When
I hover over the link the text goes bold on both. Also they both show
up with an underline despite text-decoration: none; Maybe there is
just a better syntax for this - if so please let me know as I'm just
learning html.

Thanks alot,
Andrew

<p class="downloadHeading"><a href="www.xyz.com">SCREENSHOT</a>
&nbsp;&nbsp;|&nbsp;&nbsp; <a href="www.xyz.com">DOWNLOAD</a></p>

My .css file has:
..downloadHeading {
font-size: 9px;
font-family: Arial Narrow;
text-decoration: none;
color: #17375E;
margin-bottom: 0px;
margin-top:5px;
}
..downloadHeading:hover {
font-weight:bold;
}

 

[Ronx]

Add this to your CSS:

..downloadHeading a {text-decoration: none;}
..downloadHeading a:hover {font-weight: normal;}

 

[hooksie2]

Thanks Ron.

I assume you mean for me to add the
..downloadHeading a {text-decoration: none;} etc
in addition to the .downloadHeading I have already defined in my css?

Your suggestion does get rid of the underline but the two links still
seem to be acting together. With you code .downloadHeading a:hover
{font-weight: normal;} the opposite link to the one I am hovering over
goes bold and without that line then they both go bold together.

Is this because I have put the two links within a paragraph? Should I
be using a <div> here? I think it worked okay when I defined them as
<a class="downloadHeading" href="www.xyz.com">SCREENSHOT</a> | <a
class="downloadHeading" href="www.xyz.com">DOWNLOAD</a>
But that seemed quite clumbsy - particularly if I had more links that
I wanted to apply the same style to.

Thanks again.
Andrew

 

[Stefan B Rusynko]

No replace your

..downloadHeading:hover {
font-weight:bold;
}

With
..downloadHeading a {text-decoration: none;}
..downloadHeading a:hover {font-weight: normal;}


--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
_____________________________________________


| Thanks Ron.
|
| I assume you mean for me to add the
| .downloadHeading a {text-decoration: none;} etc
| in addition to the .downloadHeading I have already defined in my css?
|
| Your suggestion does get rid of the underline but the two links still
| seem to be acting together. With you code .downloadHeading a:hover
| {font-weight: normal;} the opposite link to the one I am hovering over
| goes bold and without that line then they both go bold together.
|
| Is this because I have put the two links within a paragraph? Should I
| be using a <div> here? I think it worked okay when I defined them as
| <a class="downloadHeading" href="www.xyz.com">SCREENSHOT</a> | <a
| class="downloadHeading" href="www.xyz.com">DOWNLOAD</a>
| But that seemed quite clumbsy - particularly if I had more links that
| I wanted to apply the same style to.
|
| Thanks again.
| Andrew
|

 

[hooksie2]

Thanks Stefan - the links work how I want them to now. However, oddly
a top & bottom margin appeared to be added to my paragraph - even
though I had padding and margin set to 0px in my .downloadHeading a{}
definition. I replaced my <p></p> tags with <span> which corrected
that but I am still curious to understand why that would happen?

Also, the links sit below a heading - is it better practice to use the
<p> tag in this context (rather than span) or is it irrelevant?

Finally I found I had to define a new style for my pipe separator (|)
otherwise it turned up as default font size - presumably because it is
not a link itself. I guess there is no way around that?

Thanks again for all the help!
Andrew

<p class="downloadHeading"><a href="www.xyz.com">SCREENSHOT</a> |
<a href="www.xyz.com">DOWNLOAD</a></p>

 

[Ronx]

If I am interpreting your requirements correctly, your CSS should be:

..downloadHeading {
font-size: 9px; /* px sizing causes accessibility
problems in IE */
font-family: "Arial Narrow", Arial, Helvetica, Sans-serif; /* fonts added
for those without Arial Narrow */
color: #17375E;
margin-bottom: 0px;
margin-top: 5px;
}
..downloadHeading a {
text-decoration: none;
}
..downloadHeading a:hover {
font-weight: bold;
}

If the links should be colour #17375E then use:
..downloadHeading a {
text-decoration: none;
color: #17375E;
}
and change the color attribute in the downloadHeading definition above.
( this colours the | character).
You can also change the font size for the | by changing the CSS to:

..downloadHeading {
font-size: 9px; /* px sizing causes accessibility
problems in IE */
font-family: "Arial Narrow", Arial, Helvetica, Sans-serif; /* fonts added
for those without Arial Narrow */
color: #CCCCCC;
margin-bottom: 0px;
margin-top: 5px;
vertical-align: middle;
}
..downloadHeading a {
text-decoration: none;
font-size: 11px; /* 9px is extremely small */
}
..downloadHeading a:hover {
font-weight: bold;
}


with the code:

<p class="downloadHeading"><a href="www.xyz.com">SCREENSHOT</a> |
<a href="www.xyz.com">DOWNLOAD</a></p>

 

[hooksie2]

Thanks again Ron. It's perfect now - and I can understand why it
didn't work before which is great. Thanks so much for taking the time
to follow-up. It's surprising how satisfying it is to get this little
bit of the site nailed and move my html knowledge one step forward!

BTW, I've been reviewing in IE.7 without noticing anything odd with
font size in px but if I see any problems I'll know where to start
looking.

Best regards,
Andrew

 

[Ronx]

Regarding font sizes - check in FireFox as well as IE, and see the
difference.

In IE and FireFox 2, use View->Text Size and change the text size
In FireFox 3, use View->Zoom
Set the option to Zoom text only, then apply different Zoom levels.
Notice that the text size changes in FireFox, but not in IE - this is an
accessibility problem. People with defective vision will want to change the
text size - and often without zooming the entire page since that will
introduce a horizontal scroll bar and make reading very difficult.

See http://www.rxs-enterprises.co.uk/tests/ems-percent.aspx
for more examples of text resizing.

 

[hooksie2]

Wow - so much to think about. I hope you're not going to tell me if I
change to pt size that it works okay in IE but not in Chrome
I'll have a play tonight

 

[hooksie2]

BTW - thanks for the link. Looks like lots of other interesting stuff
on your site as well.

Cheers,
Andrew

 

[Ronx]

If you change to pt size the change size problem remains - but in addition,
different browsers will display the text in different sizes, Netscape will
display larger than IE, Opera will be smaller. Points (pt) are a printers
measure, ideal for printed documents but not useful for screens. Browsers
interpret pts and convert to pixels (px), the interpretation varies from
browser to browser.

To be accessible fonts must be sized in units that can be resized easily by
the user -ems, %, keywords (such as small, medium etc.).