IE vs Mozilla

problem with the way hyperlinks look.

[JonnyWales]

Everything works as intended in IE but now testing for Mozilla a couple of problems arise :-

1) Hyperlinks are being shown underlined which I don't want.
2) Hyperlinks are changing colors after being visited.

I used this code :-

a:link { color:#ffffff; text-decoration:none}
a:visited { color:#ffffff; text-decoration:none}
a:hover { color:#80B3FF; text-decoration:none}
a:active { color:#80B3FF; text-decoration:none}

This removes the underlines and changes the colors of links when the user moves the mouse onto them. Works fine for IE but not Mozilla - Any ideas?

[ShawnR]

2 suggestions:

1. Try a space between the colon and the attribute value. e.g.
   

   
   a:link { color: #ffffff; text-decoration: none } 
   

   
   
2. Try validate the CSS file (and the html file) just in case that gives you any clues. There might be a problem with your code, and IE might just be more forgiving.
   

Shawn

[WibbleWobble]

It may or may not be important - who knows just how strict Moz is - but you're lacking semi-colons after the text-decoration style, which should be added, even on the last attributes, to deliminate the end of the line.

[ShawnR]

The CSS spec doesn't require you to have the last semicolon. No harm if it is there, but it is not required. If that is the problem, there is a bug in the browser ;)

[RonPK]

The CSS works fine in my Mozilla, 1.3. Could there be something else that causes problems?

[JonnyWales]

Thanks for the comments. I think I've sorted the problem out which was to do with a comment being of the incorrect format within the style sheet.

[WibbleWobble]

The CSS spec doesn't require you to have the last semicolon.

Indeed not, Its just always seemed stupid [to me] to offer up one rule for normal attributes, and a different one for the final one in the style. Hardly breeds good consistency, does it?

[ShawnR]

"...just always seemed stupid ..."

True. Personally I have a habit of adding the last semi, mainly because that way I can copy and paste the line to other style classes in the .css file, and also so that I can add another attribute at the end of the list without foirgetting to put the semi before it.

Shawn

[papabaer]

Hello JonnyWales... /* you fixed it! */ right?

You gotta love the /* comment... */ it can go most anywhere in your CSS statements!

Try trimming the "fat"...

Consider style groupings--and make use of the cascade:

a { text-decoration: none;}
a:link, a:visited {color: #fff;} /* you can delete a:link since the initial anchor style covers it-and, use hex shorthand where possible. */

a:hover, a:active {color: #80b3ff;}

I always use the ending semi-colon because I got tired of going back to search for broken, cut n' paste code.

Write well, code clean, design with intent.

[ShawnR]

Ya lost me. Good advice re trimming the fat, but did he fix it, and was the problem related to comments?

[JonnyWales]

Hi guys, yep problem fixed and it does seem that the problem was related to comments.

Thanks

[DrOliver]

Just my 2 cts:

I had the very same problem too, and it was due to writing comments in the CSS like this:

// comment

which is wrong.

The only way comments may be noted in CSS is as follows:

/* comment */

Can also be more than on one line:

/*
Comment
More comment
Oh come on
*/

I am not happy with IE also be forgiving on that one.

[ShawnR]

I had the very same problem too, and it was due to writing comments in the CSS like this:

// comment

I'd recommend a syntax highlighting editor. Hard to make that kind of mistakes then.

But my real question is to papabaer. How did you know it had to do with comments? That is awesome mental telepathy!