Change Visited Link Colour of an Image

[Fuzzyman]

Hello all,

I'm using a website creation tool (called `rest2web
<http://www.voidspace.org.uk/python/rest2web/>`_) that lets me store my
content in a text based format ( `ReStructuredText
<http://docutils.sf.net>`_ and inserts the *generated* HTML into a
template.

When it creates the HTML for an image which is also a link, it
generates the following :

<a class="reference image-reference"
href="images/screenshot_big.jpg"><div align="center"
class="align-center"><img alt="Building with rest2web" class="image
align-center" src="images/screenshot.jpg" style="width: 410px; height:
308px;" /></div></a>

Once the link the image points to has been visited, the image acquires
an ugly purple border.

I'd like to change that, so I tried the following CSS (with umpteen
permutations). Firefox steadfastly ignored my efforts :

..image-reference a:visited {
text-decoration: none
border-colour: black;
}

Any hints ? Which class should I style to have the desired effect ?

Below are the other CSS rules in play, in case any are overriding :
img.align-center {
display: block;
margin: auto;
text-align: center;
}
img {
border:0;
}
I think that's it.

TIA

Fuzzyman
http://www.voidspace.org.uk/python/index.shtml

[Schraalhans Keukenmeester]

Fuzzyman wrote:

Hello all,

I'm using a website creation tool (called `rest2web
<http://www.voidspace.org.uk/python/rest2web/>`_) that lets me store my
content in a text based format ( `ReStructuredText
<http://docutils.sf.net>`_ and inserts the *generated* HTML into a
template.

When it creates the HTML for an image which is also a link, it
generates the following :

<a class="reference image-reference"
href="images/screenshot_big.jpg"><div align="center"
class="align-center"><img alt="Building with rest2web" class="image
align-center" src="images/screenshot.jpg" style="width: 410px; height:
308px;" /></div></a>

Once the link the image points to has been visited, the image acquires
an ugly purple border.

I'd like to change that, so I tried the following CSS (with umpteen
permutations). Firefox steadfastly ignored my efforts :

.image-reference a:visited {
text-decoration: none
border-colour: black;
}

Any hints ? Which class should I style to have the desired effect ?

Below are the other CSS rules in play, in case any are overriding :
img.align-center {
display: block;
margin: auto;
text-align: center;
}
img {
border:0;
}
I think that's it.

TIA

Fuzzyman

Apart from the somewhat unorthodox placement/over-use of divs and
classes (which is perhaps expected when using autogenerated html, but
better be avoided in general) you made some mistakes.

You created a style for every <a> following a class image-reference.
What you want to do is create a style for <a> _having_ the class
image-reference. The pseudo-class :visited can simply be appended. Then
you forgot a ; after the first property and used colour (English) where
you should have used color (US-English).
You tried to set a border property for a link (<a>) and you should have
used color instead.

So a style rewrite for your example:

<style>
a.image-reference:visited {
text-decoration : none; /* not required here */
color : black;
}
</style>

Hope this helps,
Sh.

[Fuzzyman]

Schraalhans Keukenmeester wrote:

Fuzzyman wrote: [snip..] Apart from the somewhat unorthodox placement/over-use of divs and
classes (which is perhaps expected when using autogenerated html, but
better be avoided in general) you made some mistakes.

You created a style for every <a> following a class image-reference.
What you want to do is create a style for <a> _having_ the class
image-reference. The pseudo-class :visited can simply be appended. Then
you forgot a ; after the first property and used colour (English) where
you should have used color (US-English).
You tried to set a border property for a link (<a>) and you should have
used color instead.

So a style rewrite for your example:

<style>
a.image-reference:visited {
text-decoration : none; /* not required here */
color : black;
}
</style>

Hope this helps,
Thanks very much for your explanation and fix. It works like a charm.

Much Appreciated.

Fuzzyman
http://www.voidspace.org.uk/python/index.shtml
Sh.

[Fuzzyman]

Schraalhans Keukenmeester wrote:
[snip..]

Apart from the somewhat unorthodox placement/over-use of divs and
classes (which is perhaps expected when using autogenerated html, but
better be avoided in general) you made some mistakes.

You created a style for every <a> following a class image-reference.
What you want to do is create a style for <a> _having_ the class
image-reference. The pseudo-class :visited can simply be appended. Then
you forgot a ; after the first property and used colour (English) where
you should have used color (US-English).
You tried to set a border property for a link (<a>) and you should have
used color instead.

So a style rewrite for your example:

<style>
a.image-reference:visited {
text-decoration : none; /* not required here */
color : black;
}
</style>

Hmmm... actually this works for Firedox, but not IE. :-(

Fuzzyman
http://www.voidspace.org.uk/python/index.shtml
Hope this helps,
Sh.