selection pseudoclasses in Internet Explorer?

[tomasio]

hi all,

As I want the color of a:link inside the footer of my page
(http://tomasio.laudatio.com/jobs/Cla...d_beauty.html),
I selected it as descendant element of the div:

here's the code (or visit
http://tomasio.laudatio.com/jobs/Cla...stylesheet.css)

div.Footer a {
color: #f9bddb;
text-decoration: none;
}

a:link {color: #9C1350; text-decoration: none;}
a:visited {color: #9C1350; text-decoration: none;}
a:hover {text-decoration: underline; background-color: #E181AD;
}
a:active {color: Maroon; text-decoration: none;}

---

In Mozilla the color of the link inside div.Footer changes as
expected, but IE seems to ignore this. Is there a way how to achieve
the color change in IE also?

TIA,
--
kind regards,
tomasio
"describing an issue reveals the way to solve it"

[Philipp Lenssen]

tomasio wrote:

here's the code (or visit
http://tomasio.laudatio.com/jobs/Cla...stylesheet.css)

div.Footer a {
color: #f9bddb;
text-decoration: none;
}

a:link {color: #9C1350; text-decoration: none;}
a:visited {color: #9C1350; text-decoration: none;}
a:hover {text-decoration: underline; background-color: #E181AD;
}
a:active {color: Maroon; text-decoration: none;}

Not sure what you want to do, but something like this might be a
solution:

a:link,
a:visited,
a:hover,
a:active
{
...
}

a:hover
{
...
}

a.Footer:hover,
a.Footer:link,
a.Footer:visited,
a.Footer:active
{
...
}

Note that CSS is case-sensitive so it must be <div
class="Footer">...</div> in your HTML as well.

--
Google Blogoscoped
http://blog.outer-court.com

[Steve Pugh]

tomasio <da****@jan.et> wrote:

As I want the color of a:link inside the footer of my page
(http://tomasio.laudatio.com/jobs/Cla...d_beauty.html),
I selected it as descendant element of the div:

here's the code (or visit
http://tomasio.laudatio.com/jobs/Cla...stylesheet.css)

div.Footer a {
color: #f9bddb;
text-decoration: none;
}

a:link {color: #9C1350; text-decoration: none;}
a:visited {color: #9C1350; text-decoration: none;}
a:hover {text-decoration: underline; background-color: #E181AD;
}
a:active {color: Maroon; text-decoration: none;}
Always set color and background-color together to avoid clashes with
user stylesheets.
In Mozilla the color of the link inside div.Footer changes as
expected, but IE seems to ignore this. Is there a way how to achieve
the color change in IE also?

Same colour in IE6, Opera 7 and Mozilla 1.6. Which version of IE on
which OS is giving you a problem?

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[tomasio]

"Philipp Lenssen" <in**@outer-court.com> schrieb:

Not sure what you want to do, but something like this might be a
solution:

a:link,
a:visited,
a:hover,
a:active
{
...
}

a:hover
{
...
}

a.Footer:hover,
a.Footer:link,
a.Footer:visited,
a.Footer:active
{
...
}

Note that CSS is case-sensitive so it must be <div
class="Footer">...</div> in your HTML as well.

Hi philipp,

thank you for your quick response. what i want is to give the
hyperlinks in div.Footer another color than the links in the rest of
the document. regarding to the book of eric meyer (CSS - Definitive
Guide) your approach is correct, but it does not work: neither in
mozilla nor in IE. maybe it has to do something with the cascade, or
that div.Footer is nested in another div?

Most be some stupid issue :(
--
kind regards,
tomasio
"describing an issue reveals the way to solve it"

[Els]

tomasio wrote:

"Philipp Lenssen" <in**@outer-court.com> schrieb:

Not sure what you want to do, but something like this might
be a solution:

a:link,
a:visited,
a:hover,
a:active
{
...
}

a:hover
{
...
}

a.Footer:hover,
a.Footer:link,
a.Footer:visited,
a.Footer:active
{
...
}

Note that CSS is case-sensitive so it must be <div
class="Footer">...</div> in your HTML as well.

Hi philipp,

thank you for your quick response. what i want is to give
the hyperlinks in div.Footer another color than the links
in the rest of the document. regarding to the book of eric
meyer (CSS - Definitive Guide) your approach is correct,
but it does not work: neither in mozilla nor in IE. maybe
it has to do something with the cascade, or that div.Footer
is nested in another div?

Most be some stupid issue :(

The thing is that a.Footer:link, is not saying anything about
an a element inside a div with class="Footer".

a.Footer means an a element with class="Footer".

If your code in html is like this:

<div class="Footer">
<a href="........">
</div>

Then you need this:

div.Footer a:link,
div.Footer a:visited,
div.Footer a:hover,
div.Footer a:active
{....}

HTH

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Neal]

On Thu, 24 Jun 2004 18:50:56 +0200, tomasio <da****@jan.et> wrote:

thank you for your quick response. what i want is to give the
hyperlinks in div.Footer another color than the links in the rest of
the document. regarding to the book of eric meyer (CSS - Definitive
Guide) your approach is correct, but it does not work: neither in
mozilla nor in IE. maybe it has to do something with the cascade, or
that div.Footer is nested in another div?

If you put the generic link styles after the classed or id'ed or div'ed
ones, they'll supercede. Be sure you have

a:link {}
a:visited {}
a:active {}
a:hover {}

and after it in the styles

div.class a:link {}
div.class a:visited {}
div.class a:active {}
div.class a:hover {}

The first style group changes all links to be something, the second
changes only links in <div class="class"> to be different.

[tomasio]

Hi Steve,

Thank you for your quick answer.

Always set color and background-color together to avoid clashes with
user stylesheets.

I set the background-color of "div.Footer a" to "white" and this time
IE reacted correct. There was a white background behind the Link-text.

In Mozilla the color of the link inside div.Footer changes as
expected, but IE seems to ignore this. Is there a way how to achieve
the color change in IE also?

Same colour in IE6, Opera 7 and Mozilla 1.6. Which version of IE on
which OS is giving you a problem?

I am using IE 6 under WinXP Prof. SP1. Are you sure that we are
talking about the same Link? I am referring to the "Top of Page"-Link
at the bottom of the page. The font-color should be a light pink and
thus brighter than its background. IE does the opposite and giving it
the color of the default a:link.

Strange thing, I still don't get the clue :(

--
kind regards,
tomasio
"describing an issue reveals the way to solve it"

[tomasio]

I got it! it was the correct ordering of pseudoclasses (div.Footer
a:link after a:link) that spoiled my CSS.

Thank you a lot,
you all safed my day ; )
--
kind regards,
tomasio
"describing an issue reveals the way to solve it"

[Wolfgang Wildeblood]

Neal <ne*****@yahoo.com> wrote:

If you put the generic link styles after the classed or id'ed or div'ed
ones, they'll supercede. Be sure you have

a:link {}
a:visited {}
a:active {}
a:hover {}

and after it in the styles

div.class a:link {}
div.class a:visited {}
div.class a:active {}
div.class a:hover {}

The first style group changes all links to be something, the second
changes only links in <div class="class"> to be different.
Are you saying that if you have the rulesets in this order:
div.class a:link {}
div.class a:visited {}
div.class a:active {}
div.class a:hover {}
a:link {}
a:visited {}
a:active {}
a:hover {}

- they will not have exactly the same effect?

--
"You're too late, my dear!"

[Neal]

On 24 Jun 2004 16:04:42 -0700, Wolfgang Wildeblood
<wo****************@yahoo.com.au> wrote:

Neal <ne*****@yahoo.com> wrote:

If you put the generic link styles after the classed or id'ed or div'ed
ones, they'll supercede. Be sure you have

a:link {}
a:visited {}
a:active {}
a:hover {}

and after it in the styles

div.class a:link {}
div.class a:visited {}
div.class a:active {}
div.class a:hover {}

The first style group changes all links to be something, the second
changes only links in <div class="class"> to be different.

Are you saying that if you have the rulesets in this order:

div.class a:link {}
div.class a:visited {}
div.class a:active {}
div.class a:hover {}
a:link {}
a:visited {}
a:active {}
a:hover {}

- they will not have exactly the same effect?

They SHOULD have the same effect - but there's no guarantee the browser
will respect the cascade. In this specific case it should be fine either
way, but it's smart to be logical just in case.

[Jan Roland Eriksson]

On 24 Jun 2004 16:04:42 -0700, wo****************@yahoo.com.au (Wolfgang
Wildeblood) wrote:

[...]

Are you saying that if you have the rulesets in this order:

div.class a:link {}
div.class a:visited {}
div.class a:active {}
div.class a:hover {}
a:link {}
a:visited {}
a:active {}
a:hover {}

- they will not have exactly the same effect?

It should not, but why gamble with implementations?

Why not do it correct and without ambigouty?

http://css.nu/faq/ciwas-aFAQ.html#QA08

(note the difference in the order of statements)

--
Rex