Hello-

I've been using CSS codes and they don't show up the same in Firefox and Opera. They're fine in Internet Explorer. First, I changed the color and hover color of my links. There are sidebar links (white & no underline, gray & no underline when hovered) and regular links (blue & no underline, black and underlined when hovered). Here is the code I'm using:

a.side { text-decoration: none; color: #FFFFFF; font-weight: bold; line-height: 1.3; }
a.side:hover { text-decoration: none; color="#999999"; font-weight: bold; }
a { text-decoration: none; color="#000099"; font-weight: bold; }
a:hover { text-decoration: underline; color="#000000"; font-weight: bold; }

The weird thing is that the side links turn white but have no hover effect and the regular links have the hover effect but don't change colors at all.

The other tag that is not working is the line-height.

p { line-height: 1.3; }

... is the code I'm using. Again, this works in Internet Explorer but no other browsers. I want these effects (mostly the links) but I didn't know they were browser-specific.

Thanks in Advance,
~anwipr

You have line-height set to 1.3 -- 1.3 WHAT ??? You have to specify a measurement - em, px or percent.

I need to see the rest of your css and html to figure out what's going on with the links. One thing you must remember, if you're going to use pseudo classes, then you MUST specify them in order: Link, Visited, Hover, Active - just remember LoVeHAte

Here is the section of my CSS code containing links.

a:link { 
 text-decoration: none; 
 color="#000099"; 
 font-weight: bold; }
 
a:visited { 
 text-decoration: none; 
 color="#000099"; 
 font-weight: bold; } 
 
a:hover { 
 text-decoration: underline; 
 color="#000000"; 
 font-weight: bold; } 
 
a.side:link { 
 text-decoration: underline; 
 color="#FFFFFF"; 
 font-weight: bold; }
 
a.side:visited { 
 text-decoration: underline; 
 color="#FFFFFF"; 
 font-weight: bold; }
 
a.side:hover { 
 text-decoration: underline; 
 color="#000099"; 
 font-weight: bold; }
 

The codes for links I am using on pages linked to the stylesheet above look like this:

<a href="site.php">Click here</a>
 
<a href="site.php" class="side">Click Here</a>

Is there anything wrong with these codes? These are the updated ones based on what you said and they still look fine in IE but cause even more problems in FF. Any suggestions?

Thanks!
~anwipr

(By the way, adding the units to line-height works. I'm not sure what "em" stands for, but it works! Adding some sort of units definately seems sensible, when I first read about the line-height tag, it said units weren't necessary; I guess they were mistaken...)

a:link {
text-decoration: none;
color="#000099";
font-weight: bold; }

Ok, it looks like you are mixing how you do attributes inside a tag and how its done inside style rules.

You need to replace all the pairs: color="#000099"; etc.

With ones formatted like this: color:#000099;

Do that and then see how it displays in all the browsers.

Your color rules are incorrect. It should read:
color: #000099;

NOT color="#000099";

Ohhh! Thank you all so much; I totally overlooked that mistake. I guess I'd been working with too much HTML... I'll go change that. Thanks!!