CSS - Link Color Not Appearing Right In Firefox?

Hello

is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color.

html:

<td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td>

css:

Code:

td.nodecoration {
	background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}

A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}

http://tinyurl.com/5llwfl

I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down.

I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes.
I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either.

I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally.

<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
}
a:visited {
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
color: #FFE648;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: underline;
}
a:link {
text-decoration: underline;
color: #FFFFFF;
}
.main_border {
border-top: none;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;

}
.field_style1 { font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
border: 1px solid #666666;
}
.whitebold_12px {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
.whitebold_11px { font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: none;
color: #FFFFFF;
}
.arrow_bold {
font-size: 14px;
color: #FDDB00;
font-weight: bold;
}
.disclaimer {font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #CCCCCC;
}
.footer_text1 {font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
}
-->
</style>

<style type="text/css">
.footer_text2 {FONT-SIZE: 9px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif}
A {COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif}
A:visited {COLOR: #333333; TEXT-DECORATION: underline}
A:hover {COLOR: #cccccc; TEXT-DECORATION: none}
A:active {COLOR: #333333; TEXT-DECORATION: underline}
A:link {COLOR: #333333; TEXT-DECORATION: underline}
</style>


This my style tags. I have bunch of links on the page. Now it possible that links could be in different colors and also visted and hover links could be different. When I put class .footer_text2 , it over writes everything that I hade before and all my links get style accorrding to footer_text

Code:

<style>
.class1, .class1 a { color: blue; }
.class2, .class2 a { color: green; }
</style>

<div class="class1">
   <a href="moo.html">This link shows up as blue</a>
   <a href="moo2.html" class="class2">This link shows up as blue even though it should be green.</a>
</div>

Anyone know how to get around this without resorting to applying classes to every <a> tag.. ? Like say I want to change the color of a single link while leaving default to all the others..

I have three "buttons" that are essentially <div> elements on a page made to look like a button. I would like to make the background color change for the button on the "hover" state, but for some reason the only part of the background that changes on the hover state is the area only behind the text.

Here's my code. I'd like the whole background area to change, anyone know what I'm doing wrong?

Code:

.prioritycontainer {
width: auto;
float: left;
display: inline;
margin: 0px 0px;
padding: 10px 0px;
}

.prioritybutton {
float: left;
width: 150px;
height: auto;
display: inline;
margin: 0px 20px 0px 0px;
padding: 3px 3px 3px 3px;
background-color: #978047;
border: solid 1px #CCBC77;
color: #fff;
font-weight: bold;
text-align: center;
vertical-align: middle;
}

.prioritybutton a:link {
color: #fff;
text-decoration: none;
}

.prioritybutton a:visited {
color: #fff;
text-decoration: none;
}

.prioritybutton a:hover {
color: #fff;
background-color: #A19058;
text-decoration: none;
}

.prioritybutton a:active {
color: #fff;
background-color: #A19058;
text-decoration: none;
}

Markup on .html page is as follows:

Code:

<div class="prioritycontainer">
<div class="prioritybutton"><a href="one.htm">One</a></div>
<div class="prioritybutton"><a href="two.htm">Two</a></div>
<div class="prioritybutton"><a href="three.htm">Three</a></div>
</div>

Any help would be very helpful.

Thanks,

Brian

How do I get rid of the blue text and underline ??

Here is my style sheet

#page_content {
margin-left: 200px;
}

#container {
position: relative;
width: 100%;
}
#background
{
width: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background-color: #000000;
}
#testbox{
width: 100%;
height:100%;
position: relative;
}


#menu li{
display: inline;
text-transform: uppercase;
font-size: 1.1em;
line-height: 1.0em;
font-weight: bold;
padding: 0 10px 0 10px;
color: #FFFFFF;
text-decoration: none;

}
#data{
width: 190px;
height: 200px;
margin: 20px;
position: absolute;
bottom: 150px;
color: #FFFFFF;
font-size:1.3em;
}

Hi i am using to different styles to preview my links but i want when a link is being visited to return to his starting point.For example it is black and when is being visited i want it again when the second time the user come's to the page to see it black again.I tried a lot of methods but when i put the visited pseudo class it blocks and the the hover pseudo class is not working.Plz help

****the class that i have the problem is "boxes"

Code:

A:link {
COLOR: #2094E1; TEXT-DECORATION: none
}
A:active {
	COLOR: #2094E1; TEXT-DECORATION: none
	}
A:visited {
	COLOR: #2094E1; TEXT-DECORATION: none
	}
A:hover {
	COLOR: #ffffff; TEXT-DECORATION: none
	}

TD {
	FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
		}
hr{
	color: #96A097;
	height: 0px;
	width: 150px;
}
#title{
	FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
	COLOR: #000000;
}
.mainbox{
	FONT-SIZE: 10px; COLOR: #727C8E;
	padding-top:5px;
	padding-bottom:3px;
	}
.boxes {
	FONT-SIZE: 10px; COLOR: #000000;
	padding-top:3px;
   padding-left:3px;
	padding-right:3px;
	padding-bottom:3px;	
	 }
.boxes a:link {
	FONT-SIZE: 10px; COLOR: #000000;
}
.boxes a:active {
	FONT-SIZE: 10px; COLOR: #000000;
}
.boxes a:hover {
	FONT-SIZE: 10px; COLOR: #FFFFFF;
}
.boxes a:visited {
	FONT-SIZE: 10px; COLOR: #000000;

Hi

I have a css file stating the following:
A:link { color: #71828A }
A:visited { color: #71828A }
A:active { color: #71828A }

... of course this is applied to the whole page.
I would like to set different link colors inside table data:

#BottomTable TD
A:link { color: #CCCCCC }

... but this doesnt work! Any ideas, please?

I have the following code, in the sidebar DIV in Firefox the background does not show up, it does in IE7. What have I done wrong?

CSS code:
Code:

#content {
	margin-left: 25px;
	background: #fff;
	width: 990px;
	padding: 15px 20px 20px 20px;
}

#blog {
	padding: 0;
	margin-right: 40px;
	background: #fff;
	width: 660px;
	color: #545454;
	float: left;
	padding-top: 5px !important;
}
#sidebar {
	width: 250px;
	padding: 8px;
	background: #ccc;
}

XHTML/HTML code:
Code:

 
<div id="content">
	
	<div id="blog">
    	 blah blah blah
	</div>
	
	<div id="sidebar">
		<h2>blah</h2>
		blah blah blah
	</div>
	
</div>

I've been looking it at for a while, and while it's probably something minor I'm just simple over looking, I can't figure it out.

Everything works, is in the correct place, except the grey background (#ccc) isn't showing up on the sidebar.

I am using dreamweaver cs5 and when I test my page in firefox, it is the color that I chose ( a pink color), but when i test it in internet explorer, it is black (this is the background color). Does anyone know why this is happening and how to correct it?

Also, I made my page with tables and centered the table with no margins. well the page has a huge margin gap at the bottom in google browser, but it is fine in IE and firefox. any suggestions? Thanks.

Hello all,

When viewing in IE my background is dark red like it's suppose to be. When viewing the same site in Firefox the background is white. Firefox is not seeing that portion of code within my CSS file. Can someone shine some light for me?

Thanks in advance!! Please help I need

Please send me a message for URL. For some odd reason Dev won't allow me to post a link to my site for you.

how do you define the the color of a hyperlink before it has been clicked and after it has been clicked?

Thanks.

What is the best practice for giving an <a> a different color than the underline? Background image? <a><span></span></a>? Something else?

I have make css from page property and type a sample text and covert it into <a> tag as css <a> tag should come in green color bt it shows in purple color and i dont why please suggest asap as required for my institute.
thanks in advance
link is attached please check the css also
Code:

http://practice.zymichost.com/