CSS - A:hover And A:visited Tags

Good day,

I am a newbie, both to CSS and to these forums.

I recently undertook a job to update a website for a charity and am dealing with the previous webmasters coding, both html and css. I am trying to modernize the site a bit, it is very 1997.

I am running into a bit of trouble with the hover class on one of my pages. When a link has been visited, it no longer changes color and highlights on hover. I read on multiple forums, this one included that it is because you must define hover last, after visited, active, etc. I did this, but still does not work. I am using Firefox 2.

Here is the code I am working with, sorry that is is a bit lengthy, I don't know what parts are important or not because when I just change the hover, link, visted part it doesn't work.

The page I am working with is at beverlyfoundation . org / library / index . html


/* THE BASICS */
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #eaf5ff;
margin: 0px;
padding: 0px;
background-color: #c2d8ec;
}

p {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 14px;
margin-left: 0px;
}

img {
border: none;
}


a:link, a:visited { text-decoration: none; color: #EAF5FF; }
a:active, a:hover { text-decoration: underline; color: #E51322; }


/* HEADERS */
h1, h2, h3 {
font-family: Helvetica, Arial, Verdana, sans-serif;
margin: 0px 0px 14px;
}

h1 {
font-size: 220%;
text-align: right;
font-style: italic;
}
h2 { font-size: 140%; }

ul {
list-style-position: outside;
list-style-type: square;
}

/* TOP COLORED LINKS */
.navcells {
text-align: center;
vertical-align: middle;
padding: 2px;
font-weight: bold;
font-size: 11px;
}

#navlinks a:link, a:visited { text-decoration: none; color: #EAF5FF; }
#navlinks a:hover, a:active { text-decoration: underline; color: #EAF5FF; }



/* LAYOUT */
#header {
margin: 0px;
padding: 0px;
background-attachment: fixed;
background-image: url(../images/header_gradient01_bg.jpg);
background-repeat: repeat-x;
background-position: left top;
}


#content {
padding: 10px 20px 10px 10px;
background-color: #0060BE;
text-align: left;
vertical-align: top;
font-size: 12px;
}


#rightcolumn {
background-color: #0060BE;
padding: 10px;
width: 220px;
font-size: 11px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #EAF5FF;
border-right-color: #EAF5FF;
border-bottom-color: #EAF5FF;
border-left-color: #EAF5FF;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
}

#splashrightcolumn {
background-color: #0060BE;
padding: 10px;
width: 220px;
font-size: 11px;
}

#rightcolumn img {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}

#rightcolumn p {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 7px;
margin-left: 0px;
}

#rightcolumn h1 {
font-size: 180%;
text-align: center;
font-style: italic;
}

#rightcolumn h2 {
margin-top: 21px;
margin-right: 0px;
margin-bottom: 7px;
margin-left: 0px;
text-align: center;
}

#rightcolumn a:link, a:visited { text-decoration: none; color: #EAF5FF; }
#rightcolumn a:hover, a:active { text-decoration: underline; color: #EAF5FF; }


#threecolumn {
padding: 10px;
width: 220px;
text-align: left;
vertical-align: top;
font-size: 12px;
}

#threecolumn a:link, a:visited { color: #EAF5FF; text-decoration: none; }
#threecolumn a:hover, a:active { color: #EAF5FF; text-decoration: underline; }


#footer {
color: #EAF5FF;
padding: 10px;
font-size: 11px;
text-align: left;
vertical-align: top;
line-height: 14px;
}

#footer a {
color: #EAF5FF;
text-decoration: none;
}



#address {
color: #EAF5FF;
padding: 10px;
font-size: 11px;
text-align: left;
vertical-align: top;
border-left-width: 1px;
border-top-color: #EAF5FF;
border-right-color: #EAF5FF;
border-bottom-color: #EAF5FF;
border-left-color: #EAF5FF;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
}

#address a {
color: #EAF5FF;
text-decoration: underline;
}


#address h2 {
margin: 0px;
}

.threecolumns {
color: #EAF5FF;
padding: 10px;
font-size: 11px;
text-align: left;
vertical-align: top;
}

.resourcestore p {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 4px;
margin-left: 0px;
}
.gradientrow {
background-image: url(../images/footer_bg01.jpg);
}
.copyright {
font-size: 10px;
}
.resourcestore {
padding: 10px;
}

I have some listing text that comes from a database, displayed in a column. Each block of text is enclosed in a DIV tag. I use the following to cause the area of the text to change background color when there is a mouseover:

Quote:
div.list {
padding: 5px 5px 5px 5px;
}
div.list:hover {
background-color: #FFFACD;
}



Works fine for Firefox, but doesn't do anything in IE. How can I fix this so it works in IE as well?

<div style="blah">

What would be used to put :hover in the style tag in place of 'blah'?

Hi,

I am trying to get a hover to work with my links. The problem is when i have a list-style-type in css. When that exists, the link text for each link goes behind the bullets instead staying to the right of them. What do i need to do to have a list-style and the hover effect hovering over the links?

hey everyone, need your help here.

i have a run-of-the-mill FAQs page with questions at the top anchored (# links) to various text answer sections at the bottom.

i have the following for links in my external css page:

a:link {
color: #4480D5;
font-size: 12px;
line-height: 1.6em;
text-decoration: none;
}
a:visited {
color: #FF9B21;
text-decoration: none;
}
a:hover {
color: #FFC51B;
text-decoration: underline;
}
a:active {
color: #4480d5;
}

it seems once i click a #link once, IE, in it's infinite stupidity, sees that this page has been visited, hence ALL my #links show up as visited.

anyway I can get around this?

if this is covered elsewhere, please point me to it

thanks!

so what do each one do?

Hi,
i have 2 links with email and website. After visited these two links, both should appear yellow (a:visited).

Well, with the IE everything functions marvelously, but with the Netscape only one link (website) functioned, but email does not activate itself yellow after the attendance.

Here is the Code:

Code:

style type="text/css">
<!--
a:link {color: #000000; font-family: Verdana; font-size: 10px; text-decoration:none; }
a:visited {color: #ffff00; font-family: Verdana; font-size: 10px; text-decoration:none;}
a:hover {color: #ffcc33; font-family: Verdana; font-size: 10px; text-decoration:none;}

p {
	font-family: Verdana;
	font-size: 12px;
    	color: #ccffff;
}

body {
	background-color: #9095af;
}
.style1 {color: #ccffff; font-family: Verdana; font-size: 11px; }
.style2 {color: #ccffff; font-family: Verdana; font-size: 20px; }
.style3 {color: #000000; font-family: Verdana; font-size: 12px; }
.style4 {color: #000000; font-family: Verdana; font-size: 10px; }
-->
</style>

if($email) {
$eintrag= "<tr><td><span class='style3'>$text</span></td></tr>";
$eintrag.="<tr><td><a href='mailto:$email'>$email</a>,   <span class='style4'>$datum</span></td></tr>";
$eintrag.="<tr><td><hr></td></tr>\n";
}

if($website) {
$eintrag= "<tr><td><span class='style3'>$text</span></td></tr>";
$eintrag.="<tr><td><a href='$website'>$website</a>,   <span class='style4'>$datum</span></td></tr>";
$eintrag.="<tr><td><hr></td></tr>\n";
}

What's the problem here???

Greetings

Thanks for reading my question.

Why do my a:link, a:visited, a:hover, and a:active commands work for IE but not in FireFox?

The hover works in both, but the visited only works in IE.

I don't have a url for this page yet, so I've put it under my band web page.

www.pierced.ca/Kelly/index.htm

Try it with IE and you'll see that the visited works. Try it with FireFox and the visited doesn't work.

Thanks again,

Brad

Good Morning! First off I am not a professional, not even close. I have been teaching myself html & css on and off for the past 6 months. Ok so here is my issue:

I have a CSS rule:

a:link, a:visited {
display:block;
font-weight:bold;
color:#000;
background-color:#FFF;
width:200px;
text-align:left;
padding:10px;
text-decoration:none;
text-transform:uppercase;

}

The above rule is used on my side nav bar. My issue is now every <a href"etc.." </a> i place on my main page inherits all the above attributes. How can eliminate all the parent stuff. Ive been trying to get this working for the past 2 hours and my brain is fried.!

Thanks for all your help!

-Chris

I have been having a problem with my CSS.
I want to make my visited links just a big bigger than my unvisited links so that the users can know where they been


Code:

#mainCategories a:link{
	font-size:.55em;
}
#mainCategories a:visited{
	font-size:.65em;
}
#mainCategories a:hover{
	font-size:.65em;
}
#mainCategories a:active{
	font-size:.65em;
}

it changes size on a:hover but not on a:visited

Is there a way to tell the browser not to change the color of a visited link? I have an anchor around some text, but I don't know the color setting of the text. When I visit the link, I just want the text to retain its color based on the other CSS declarations in effect for the text.

So, is there a way to specify a:visited { color: do-not-change; }?

Hi Im new to css
I will be probably be asking all sorts of questions.
thanks
peter

I have another problem with IE for Windows:
I have several links which should not appear as links but should inherate the colors (grey or black) and decoration (none) from their parents ... works fine every where except MSIE for windows (where the usual red and blue - but no underline - appear)

the relevant styles:

<style type="text/css">

a:link {
text-decoration: none;
color: inherit;
}

a:visited {
text-decoration: none;
color: inherit;
}
</style>

the relevant html:

<h3 style="padding: 0; margin: 0.25em;color:#000000; ">Some <a href="http://www.theDanceGypsy.com/danceFinder.shtml" target="viewFrame">Dance Events</a> near you:</h3>
<ul class="newsList">
<li><a href="http://www.thedancegypsy.com/danceList.php?dance=dance-26:6-4" target="viewFrame"><span class ="unconfirmed">6/25: Bernardston~ <cite>Eastern Squares</cite>
</span></a></li>
<li><a href="http://www.thedancegypsy.com/danceList.php?dance=dance-30:6-4" target="viewFrame">6/26: Brattleboro~ <cite>Paneurhythmy</cite>
</a></li>

anyone have any idea for a workaround?
Thanx

Hi,

I'm looking for some help with CSS, specifically "a:visitied".

I want the hover over behaviour to remain the same on html links regardless of whether or not they're already in your history.

Is there a way i can do this?

Many Thanks.

That title is probably a little confusing but it is what's happening.

I have an inline list (<li>) that will shift to the right when I hover over links that have been visited. The links that have never been visited do not cause this problem. It's very strange and I'm not sure what's up.

The page...

http://www.vaska.com/a/

The css...

http://www.vaska.com/a/css/c.css

To get the menu to appear, hover over the "menu/options" and it will appear. I know for a fact that these issues are not becaused by the javascript in this file...somehow it's a CSS issue.

I'm having the problem in Safari and Firefox...I'm not sure about IE/PC and such, but I'm betting the problem is there as well.

Thanks for any help...v