473,385 Members | 1,528 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

CSS question

NWx
Hi,

Can someone explain me how can I set a CSS for a hyperlink?

I have the following definitions in .css file

/* definition 1*/
A.HWHeaderLink:hover

{

font-weight: bold;

font-size: 11px;

color: yellow;

font-family: Verdana;

background-color: #6699ff;

}

/* definition 2*/
A.HWHeaderLink:visited, A.HWHeaderLink:active, A.HWHeaderLink:link

{

font-weight: normal;

font-size: 11px;

color: yellow;

font-family: Verdana;

background-color: #0000cc;

}

And I have a hyperlink with cssclass="HWHeaderLink"

If I let those both CSS sections in CSS file , the link always looks as
defined in Definition 2, even if I move mouse over it

If I want the activate the hover effect, I have to remove definition 2, but
in this case hyperlink uses defaults for the page in all cases except hover
case. How should my CSS definitions looks, to be able to define its aspect
in all situations (hover, active, link and visited), and of course, to have
them different.

Thank you
Nov 18 '05 #1
4 1257
Your definition 2 can be like this to solve the problem:
A.HWHeaderLink {
font-weight: normal;
font-size: 11px;
color: yellow;
font-family: Verdana;
background-color: #0000cc;
}

try it.

--
Fadi El-Eter, itoctopus - http://www.itoctopus.com
"NWx" <te**@test.com> wrote in message
news:eT**************@tk2msftngp13.phx.gbl...
Hi,

Can someone explain me how can I set a CSS for a hyperlink?

I have the following definitions in .css file

/* definition 1*/
A.HWHeaderLink:hover

{

font-weight: bold;

font-size: 11px;

color: yellow;

font-family: Verdana;

background-color: #6699ff;

}

/* definition 2*/
A.HWHeaderLink:visited, A.HWHeaderLink:active, A.HWHeaderLink:link

{

font-weight: normal;

font-size: 11px;

color: yellow;

font-family: Verdana;

background-color: #0000cc;

}

And I have a hyperlink with cssclass="HWHeaderLink"

If I let those both CSS sections in CSS file , the link always looks as
defined in Definition 2, even if I move mouse over it

If I want the activate the hover effect, I have to remove definition 2, but in this case hyperlink uses defaults for the page in all cases except hover case. How should my CSS definitions looks, to be able to define its aspect
in all situations (hover, active, link and visited), and of course, to have them different.

Thank you

Nov 18 '05 #2
Jon
Hi,
you have to define link styles in this order Link - Visited - Hover -
Active. Reason is in CSS the style closest to the elements always wins, so
if you had for example
a:hover{
color:red;
}
a:visited{
color:blue;
}
When you hover over a visited link both of those styles could apply (the
link is visited and being hovered over) but because visited is closest to
the element it wins - result the hover colour will never show on visited
links. But if you did it like this
a:visited{
color:blue;
}
a:hover{
color:red;
}
the hover style will show correctly.

Jon

"NWx" <te**@test.com> wrote in message
news:eT****************@tk2msftngp13.phx.gbl...
Hi,

Can someone explain me how can I set a CSS for a hyperlink?

I have the following definitions in .css file

/* definition 1*/
A.HWHeaderLink:hover

{

font-weight: bold;

font-size: 11px;

color: yellow;

font-family: Verdana;

background-color: #6699ff;

}

/* definition 2*/
A.HWHeaderLink:visited, A.HWHeaderLink:active, A.HWHeaderLink:link

{

font-weight: normal;

font-size: 11px;

color: yellow;

font-family: Verdana;

background-color: #0000cc;

}

And I have a hyperlink with cssclass="HWHeaderLink"

If I let those both CSS sections in CSS file , the link always looks as
defined in Definition 2, even if I move mouse over it

If I want the activate the hover effect, I have to remove definition 2, but in this case hyperlink uses defaults for the page in all cases except hover case. How should my CSS definitions looks, to be able to define its aspect
in all situations (hover, active, link and visited), and of course, to have them different.

Thank you

Nov 18 '05 #3
NWx <te**@test.com> wrote in
<eT****************@tk2msftngp13.phx.gbl>
Hi,

Can someone explain me how can I set a CSS for a hyperlink?

I have the following definitions in .css file

/* definition 1*/
A.HWHeaderLink:hover

{

font-weight: bold;

font-size: 11px;

color: yellow;

font-family: Verdana;

background-color: #6699ff;

}

/* definition 2*/
A.HWHeaderLink:visited, A.HWHeaderLink:active, A.HWHeaderLink:link

{

font-weight: normal;

font-size: 11px;

color: yellow;

font-family: Verdana;

background-color: #0000cc;

}

And I have a hyperlink with cssclass="HWHeaderLink"

If I let those both CSS sections in CSS file , the link always looks
as defined in Definition 2, even if I move mouse over it

If I want the activate the hover effect, I have to remove definition
2, but in this case hyperlink uses defaults for the page in all cases> define its aspect in all situations (hover, active, link and visited), and of course, to have them different. except hover case. How should my CSS definitions looks, to be able to

Links should be defined in the order: link, visited, hover, active -
otherwise, when the link fulfils two of the definitions, e.g. a visited link
over which you are hovering, the latter definition takes precedence - the
way you have them the hover is defined first and so will be over-ridden by
other applicable definitions.

I'd also caution against changing font weight in the hover - it can make the
page twitch as the hover text enlarges, pushes the other elements to make
room for itself and then contracts to normal weight when the mouse moves on.

And, since I've started down the "whilst I'm about it" route, Verdana is not
a good choice since, if the user doesn't have it installed, the fall-back
font (often Arial) is likely to be significantly harder to read than the
Verdana. Text which is legible when viewed in Verdana can become too small
to read in Arial. Compare the 10px Verdana with the 10px Arial at
http://www.virtuelvis.com/archives/146.html

The Verdana problem is exacerbated by the use of px - IE users will not be
able to resize the text to suit their own browser needs and 11px Arial is
likely to be quite hard for a lot of folks to read. I'd recommend using % or
em for font sizes so that they can be adjusted to fit the needs of the
visitor.
--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

Nov 18 '05 #4
NWx
Hi,

Thank you all for your answers.

Regards

"NWx" <te**@test.com> wrote in message
news:eT****************@tk2msftngp13.phx.gbl...
Hi,

Can someone explain me how can I set a CSS for a hyperlink?

I have the following definitions in .css file

/* definition 1*/
A.HWHeaderLink:hover

{

font-weight: bold;

font-size: 11px;

color: yellow;

font-family: Verdana;

background-color: #6699ff;

}

/* definition 2*/
A.HWHeaderLink:visited, A.HWHeaderLink:active, A.HWHeaderLink:link

{

font-weight: normal;

font-size: 11px;

color: yellow;

font-family: Verdana;

background-color: #0000cc;

}

And I have a hyperlink with cssclass="HWHeaderLink"

If I let those both CSS sections in CSS file , the link always looks as
defined in Definition 2, even if I move mouse over it

If I want the activate the hover effect, I have to remove definition 2, but in this case hyperlink uses defaults for the page in all cases except hover case. How should my CSS definitions looks, to be able to define its aspect
in all situations (hover, active, link and visited), and of course, to have them different.

Thank you

Nov 18 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Mohammed Mazid | last post by:
Can anyone please help me on how to move to the next and previous question? Here is a snippet of my code: Private Sub cmdNext_Click() End Sub Private Sub cmdPrevious_Click() showrecord
3
by: Stevey | last post by:
I have the following XML file... <?xml version="1.0"?> <animals> <animal> <name>Tiger</name> <questions> <question index="0">true</question> <question index="1">true</question> </questions>
7
by: nospam | last post by:
Ok, 3rd or is it the 4th time I have asked this question on Partial Types, so, since it seems to me that Partial Types is still in the design or development stages at Microsoft, I am going to ask...
3
by: Ekqvist Marko | last post by:
Hi, I have one Access database table including questions and answers. Now I need to give answer id automatically to questionID column. But I don't know how it is best (fastest) to do? table...
10
by: glenn | last post by:
I am use to programming in php and the way session and post vars are past from fields on one page through to the post page automatically where I can get to their values easily to write to a...
10
by: Rider | last post by:
Hi, simple(?) question about asp.net configuration.. I've installed ASP.NET 2.0 QuickStart Sample successfully. But, When I'm first start application the follow message shown. ========= Server...
53
by: Jeff | last post by:
In the function below, can size ever be 0 (zero)? char *clc_strdup(const char * CLC_RESTRICT s) { size_t size; char *p; clc_assert_not_null(clc_strdup, s); size = strlen(s) + 1;
56
by: spibou | last post by:
In the statement "a *= expression" is expression assumed to be parenthesized ? For example if I write "a *= b+c" is this the same as "a = a * (b+c)" or "a = a * b+c" ?
2
by: Allan Ebdrup | last post by:
Hi, I'm trying to render a Matrix question in my ASP.Net 2.0 page, A matrix question is a question where you have several options that can all be rated according to several possible ratings (from...
3
by: Zhang Weiwu | last post by:
Hello! I wrote this: ..required-question p:after { content: "*"; } Corresponding HTML: <div class="required-question"><p>Question Text</p><input /></div> <div...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.