Stylesheets - selection pseudoclasses in Internet Explorer?

Author

selection pseudoclasses in Internet Explorer?

tomasio

2004-06-24, 7:17 pm

hi all,

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

here's the code (or visit
http://tomasio.laudatio.com/jobs/Cl.../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

2004-06-24, 7:17 pm

tomasio wrote:

>
> here's the code (or visit
> http://tomasio.laudatio.com/jobs/Cl.../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

2004-06-24, 7:17 pm

tomasio <damnit@jan.et> wrote:

>As I want the color of a:link inside the footer of my page
>(http://tomasio.laudatio.com/jobs/Cl...ted_beauty.html),
>I selected it as descendant element of the div:
>
>here's the code (or visit
>http://tomasio.laudatio.com/jobs/Cl.../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 <steve@pugh.net> <http://steve.pugh.net/>

tomasio

2004-06-24, 7:17 pm

"Philipp Lenssen" <info@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

2004-06-24, 7:17 pm

tomasio wrote:

> "Philipp Lenssen" <info@outer-court.com> schrieb:
>
>
> 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

2004-06-24, 7:17 pm

On Thu, 24 Jun 2004 18:50:56 +0200, tomasio <damnit@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

2004-06-24, 7:17 pm

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.

>
>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

2004-06-24, 7:17 pm

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

2004-06-24, 11:16 pm

Neal <neal413@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

2004-06-25, 4:15 am

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

> Neal <neal413@yahoo.com> wrote:
>
>
> Are you saying that if you have the rulesets in this order:
>
>
> - 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

2004-06-25, 4:15 am

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

[...]

>Are you saying that if you have the rulesets in this order:
>
>
>- 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