CSS differences between IE and Firefox...

[Ness_du_Frat]

Hi !!!
Here is something I don't understand at all... Maybe you can give me a hand on this one.
Ok, I have a page ( waooo, really ??? :) ) and on this page, I have anchors.
So, of course, I don't want my anchors to look like links, and I gave them a class...
The problem is the following : I don't get AT ALL the same results in IE and FF...

Here is the code :


<p><a class="anchor" name="histoire" id="hista" href="#menumap" ><strong>Histoire :</strong></a> eh bien, si c'est pas clair, je vois pas... Vous
y trouverez les chapitres des Enfants de l'&Ocirc;, au fur et &agrave; mesure
des mises &agrave; jour. Et peut-&ecirc;tre quelques teasers, on verra.</p>

( I put only one here )

and here is my css :

/* Links */
a:link, a:visited, a:active {
text-decoration: none;
}
a:hover {
text-decoration: underline overline;
font-weight:bold;
}

.anchor, .anchor:link, .anchor:visited, .anchor:hover, .anchor:active {
text-decoration:none;
font-weight:bold;
}

p, .normal { /* normal assigns the value 12px to the font */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
}
p:first-letter { /* puts the first letter of each p element in bold, 16px */
font-size:16px;
font-weight:bold;
}



My problem is :
In IE : the anchor has the properties from both the p element, and the anchor class.
In FF, it's the same, until I put my mouse on the anchor ( hover ). Then , all the properties from p disappear.
What I don't understand is why the element gets any properties from p at all, and why it's so different on IE and FF.
I tried assigning the first-letter parameter to my anchor class, and it worked fine on FF, but on IE, I had the underline and overline, exactly like my default a css, although I specified : text-decoration : none;

I don't really know if it's a bug, or if it's something I've done wrong...
Any help would be great !!!

( what I'd like to have is what I have in IE : an anchor with the look of the p element ( first-letter ) )

edit : Maxthon, IE and Opera react the same, whereas Netscape and FF do the strange hover thing... ( not very surprising, as the core is the same )

[Mr J]

Remove the commas from your rules



/* Links */
a:link a:visited a:active {
text-decoration: none;
}
a:hover {
text-decoration: underline overline;
font-weight:bold;
}

.anchor .anchor:link .anchor:visited .anchor:hover .anchor:active {
text-decoration:none;
font-weight:bold;
}

p .normal { /* normal assigns the value 12px to the font */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
}
p:first-letter { /* puts the first letter of each p element in bold, 16px */
font-size:16px;
font-weight:bold;
}

[Ness_du_Frat]

Ok, I'll try that...
But are the commas wrong ? I always used commas, and never had any problems with them...
Anyway, I'll keep you informed...

[MstrBob]

Whoah, what Mr J gave you is very different from your original. Just an example:


p, .normal


p .normal


Okay, now the first rule means "All <p> elements, and all elements with a class of 'normal'"

The second means "All elements with a class name of 'normal' that are a descendant of a <p> element."

This:

.anchor .anchor:link .anchor:visited .anchor:hover .anchor:active

Means:

"An element with a class name of 'anchor' that is active that is a descendant of an element with a class name of 'anchor' that is in the hover state that is a descendant of an element with a class name of 'anchor' that is visited that is a descendant of ..." you get the picture. While this:


.anchor, .anchor:link, .anchor:visited, .anchor:hover, .anchor:active

means:

"An element with a class name of 'anchor', and an element with a class name of 'anchor' that's a link, and an element with a class name of 'anchor' that is visited, and ..."

Very different meanings. Watch your syntax.

[Mr J]

Thanks MstrBob

Some extremely useful information there.

I must confess that CSS is not one of my string points and I for one have definately learned a thing or two here :D

Sorry if I confused you Ness_du_Frat :o

[MstrBob]

Try this:


/* Links */
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline overline;
font-weight:bold;
}

.anchor:link, .anchor:visited, .anchor:hover, .anchor:active {
text-decoration:none;
font-weight:bold;
}

p, .normal { /* normal assigns the value 12px to the font */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
}
p:first-letter { /* puts the first letter of each p element in bold, 16px */
font-size:16px;
font-weight:bold;
}
a strong:first-letter {
font-size:16px;
font-weight:bold;
}


The text is actually in <strong> which is in <a> which is in <p>, so, for whatever reason, Gecko isn't applying the style.

[Ness_du_Frat]

Thanks, MstrBob ! Actually, I figured out something similar this morning, but I didn't have access to the net, so I couldn't post it here.
I removed the strong element, I figured out that it would be difficult for the browser to understand that it didn't have to take it into account. So, I just set the anchor to be bold. :)
And I also gave the anchor a first letter thing.
Mr J, it's ok, you didn't confuse me. I thought it was a trick that i could try on FF, but as I know what writing different elements without any commas mean, I kinda figured out quite quickly that it wouldn't work.

Stupid me for not realising this useless strong tag was blocking the css... :)
( actually, I set it first, and then, after doing the css, I forgot all about it... silly me... :)