CSS - Link, Visited, Hover, Active

I am trying to create a horizontal navigation bar.

Everything is exactly how I want it except the a:link, a:visted, a:hover, a:active are the standard default colors and not what I specified. Even the background color changes - just not the font color.

Here is the css code: Code:

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFF;
	font-size: 14px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: inherit;
	text-decoration: none;
	color: #FFFFF;
	font-size: 14px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #50949;
	font-size: 14px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	padding: 0;
	padding-top: 2px;
	margin: 0;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}
 

Here is the html code: Code:

  <div id="topbar">
  	<ul class="horiz">
		<li><a href="/home.html">Home</a></li>
		<li><a href="/about_us/about_us.html">About Us</a></li>
		<li><a href="/other_regions.html">Other Regions</a></li>
   	</ul>
  </div>

or if it helps to see the whole thing click here for test.html
click here for the css

Thanks!

so what do each one do?

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

Having two problems, kind of related to browsers.
1) Most of the time, the site loads better under Firefox. For some reason, Firefox won't implement the text-decoration:none attribute. Any ideas?

2) Also, the on hover flip filter doesn't seem to be working in IE, which i was told was the only browser that would work in? I think I used bad syntax, but can't find it. Help would be appreciated!

edit--i used the html validation and the css one, the html said I cant use the xspace and vspace in this iframe:

<iframe class="fade" style="position:absolute; top:125; left:200;"
src="blog.html" width="400" height="400" frameborder="0" align="left" xspace="3" vspace="3"></iframe>

this is the only i frame I use, and was something I got off a frames tutorial... guess i didn't learn it well enough?
was a ton more wrong with the css, but it wasn't like the html validator and telling me where i went wrong.

here is the full css file:

.fade{filter:alpha(opacity=70); -moz-opacity:0.7; background:#ffffff;}

font, td{color:#0000FF; font-size:medium; font-family:sans-serif; font:"Comic Sans MS",Tahoma;}

a,a:link,a:visited,a:hover,a:active { font-size:medium; font-weight:bold; font-family:sans-serif; font:"Comic Sans MS",Tahoma; text-decoration:none; }
.link1 a:link { color:#0000FF; }
.link1 a:visited { color:#0000FF; }
.link1 a:hover { color:#0000FF; filter:flipv; }
.link1 a:active { color:#0000FF; }

.link2 a:link { color:#0000F5; }
.link2 a:visited { color:#0000F5; }
.link2 a:hover { color:#0000F5; filter:flipv; }
.link2 a:active { color:#0000F5; }

could someone please help me figure out what I did to my fonts, and where the links are preventing the underline decoration from being disabled?

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;
}

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 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

I am using an external CSS where I am defining the color of my links when un-visited, visited etc.
The problem is in Netscape 7.1/7.2
those links which are calling my other pages, are being shown up as visited when clicked,.

But those where I say href='javascript:void(0);my js function'

are not being shown with the correct 'visited' link color. They are being shown in the color specified for 'un-visited' links!!

Can someone help??

Hello,

I am working on my HW problem with CSS, it's about rounded and angular corners in menu (active or hover).

I can't post picture (not permitted), but probably you know what i mean, rounded corners are created with image and angular are created with padding by CSS.
Angular is ready, now i have to do rounded, which is more hard.

I have 3 pictures, left rounded side, middle and right rounded side. But i really dont know how to add it to a.active or a:hover elements. Middle picture will be repeated depending on text long, so i can't do 1 picture.

Thank you for your help.

This is kind of a continueation of a thread in the JS forum. But I am trying to do a CSS only thing here, so I thought it would be more appropriate here. I have these tabs that change color by altering the background position. Normal is orange, hover is yellow, and active is supposed to go kind of pink. Hover works fine as you see. But active does nothing, both in FF and IE.

I gathered up all the style stuff that's relevant and put it all in the one file, tho that's not usually how I code things. But anyway, the code can talke clearer than I can.

http://www.colleenweb.com/tests/atest.html

Why doesn't active work??? It's late at night so the head isn't 100% but Ive been beating on it a while. Thanks!!!

Whats' wrong with this? a:active doesn't seem to work at all:
Code:

<style type="text/css">
#navcontainer
{
	margin: 5px 0 0 5px;
	padding: 0;
	height: 20px;
}
#navcontainer ul
{
	border: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}
#navcontainer ul li
{
	display: block;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
}
#navcontainer ul li a
{
	background: #000000;
	width: 80px;
	height: 18px;
	border-top: none;
	border-left: 1px solid #9B9B9B;
	border-bottom: none;
	border-right: none;
	padding: 0;
	margin: 0 0 5px 0;
	font-family:Arial, Helvetica, sans-serif;
	color: #26DC18;
	font-weight:bold;
	text-decoration: none;
	display: block;
	text-align: center;
}

#navcontainer ul li a:hover
{
color: #930;
background: #f5d7b4;
}

#navcontainer ul li a:active
{
	background: #000000;
	color: #fff0000;
}
</style>

HTML
[CODE<div id="navcontainer">
<ul id="navlist">
<li><a href="index.php">Home</a></li>
<li><a href="inventory.php">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div> [/CODE]

P.S. I just include this menu in a PHP page. We'll that will work iff you put # on the target page but that must not be.

Thanks!

is there a method similar to active, so when the user clicks the link it changes style but keeps the style change (after the mouse button is released) until the link is clicked a 2nd time at which point it goes back to its initial state and so on.

i hope that makes sense

Hi,

I have this in the html and so on for each page

<div id="nav">
<ul>
<li class="current"><a href="one.htm">one</a></li>
<li><a href="two.htm">two</a></li>
<li><a href="three.htm">three</a></li>
</ul>
</div>

Then css:

#nav ul li.current a{
background:#CCCCCC;
color:#000000;
}

But I don't want the first page's link to change colour until it is
clicked. Otherwise the menu comes up with first link always
active before anything has been selected. It looks wrong.

Is there anyway around this in css?

Thanks,
jdl

Hi, I need some help to design an image based menu. I have been trying it for a week now but still could not achieve and going little bit mad.

(Ive rewritten the same problem clearly this time hope someone can help me out)

My menu image consists of 4 sections and 3 layers which looks like this: img26.imageshack.us/img26/1268/menux.gif

1.home 2.archives 3.news 4.about - (layer 1 unvistided link)
1.home 2.archives 3.news 4.about - (layer 2 hover link: mouse over)
1.home 2.archives 3.news 4.about - (layer 3 active: shows what section the visitor on afer clicking and going to that page) and my problem is with the last layer.

I created the pages via admin panel of wordpress but give the links in the header.php manually myself without using codes.

so the links of each section are like this

home=http://localhost/wordpress/
archives=http://localhost/wordpress/?page_id=2
news=http://localhost/wordpress/?page_id=35
about=http://localhost/wordpress/?page_id=31

You can see my codes for CSS and PHP files below. Could you please have a look at my codes and provide the right code. The menu at the moment works ok except from the active side of it. I tried to give class id like "active" but failed to get it worked so please please change my wrong codes.

PHP code:

Code:

<ul id="nav">
   <li id="home"><a href="http://localhost/wordpress/">home</a></li>
   <li id="archives"><a href="http://localhost/wordpress/?page_id=2">archives</a></li>
   <li id="news"><a href="http://localhost/wordpress/?page_id=35">news</a></li>
   <li id="about" class="last"><a href="http://localhost/wordpress/?page_id=31">about</a></li>
		</ul>

CSS Code:

Code:

#nav {
     list-style: none;
     padding: 0;
     margin: -105px 25px;
     width: 332px;
     height: 30px;
     background: url('images/menu.gif');
     position: relative;
}

	ul#nav li { width: 80px;
	            height: 30px;
				padding: 0 4px 0 0;
				text-indent: -900px;
				float: left;
				}

	ul#nav li.last { padding: 0; }

		ul#nav li a, ul#nav li a:visited, ul#nav li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }

			ul#nav li#home a, ul#nav li#home a:visited { background-position: 0 0; }	

			ul#nav li#archives a, ul#nav li#archives a:visited { background-position: -84px 0; }

			ul#nav li#news a, ul#nav li#news a:visited { background-position: -168px 0; }

			ul#nav li#about a, ul#nav li#about a:visited { background-position: -252px 0; }

				ul#nav li#home a:hover { background-position: 0 -30px; }

				ul#nav li#archives a:hover { background-position: -84px -30px; }

				ul#nav li#news a:hover { background-position: -168px -30px; }

				ul#nav li#about a:hover { background-position: -252px -30px; }

			.home ul#nav li#home a, .home ul#nav li#home a:visited, .home ul#nav li#home a:hover { background-position: 0 -60px; cursor: default; }

			.archives ul#nav li#archives a, .archive ul#nav li#archives a:visited, .archives ul#nav li#archives a:hover { background-position: -84px -60px; cursor: default; }

			.news ul#nav li#news a, .news ul#nav li#news a:visited, .news ul#nav li#news a:hover { background-position: -168px -60px; cursor: default; }

			.about ul#nav li#about a, .about ul#nav li#about a:visited, .about ul#nav li#about a:hover { background-position: -252px -60px; cursor: default; }

The main problem i can understand from the earlier discussion
is that i need to give id class for active links in header.php code but i also need to rewrite the last four lines of css code according to the codes i wrote in php file. Can someone please help? Can someone please add or rewrite the active bit (in css codes - last 4 lines from the bottom) and in php file. please.

Hi everyone,

I have a menu whereby when it's active it is highlighted by two combining images. Whenever the active link is hovered over the image disappears.

I'd like for the image(s) to stay put when it's active and the cursor hovers over it. This particular .css file is above my pay grade and I'm not confident I can do this and have it look good across all browsers.

Just click on the header links and hover over it to see what I'm talking about. Thanks for any input, here's the site...

spotabusiness dot com/new_spota1

(I apparently can't add URLs yet)