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=http://www.webdeveloper.com/forum/archive/index.php/"#menumap" ><strong>Histoire :</strong></a> eh bien, si c'est pas clair, je vois pas... Vous
y trouverez les chapitres des Enfants de l'Ô, au fur et à mesure
des mises à jour. Et peut-ê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 )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;
}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...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.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
Sorry if I confused you Ness_du_Frat
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.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...
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=http://www.webdeveloper.com/forum/archive/index.php/"#menumap" ><strong>Histoire :</strong></a> eh bien, si c'est pas clair, je vois pas... Vous
y trouverez les chapitres des Enfants de l'Ô, au fur et à mesure
des mises à jour. Et peut-ê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 )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;
}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...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.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
Sorry if I confused you Ness_du_Frat
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.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...