Hyperlinked image border in Opera

The following code renders a visible border around the hyperlinked image
using the UA's default colours for links in IE and Moz:

a img{border-width:1px}

<a href="foobar.html"><img src="foobar.jpg" alt="foobar"></a>

but not in Opera.

I imagine that border colour normally defaults to transparent, but
shouldn't that be replaced by the default colours for links if the image
is hyperlinked?


Headless

--
Email and usenet filter list: http://www.headless.dna.ie/usenet.htm

re: Hyperlinked image border in Opera

Headless wrote:
[color=blue]
> The following code renders a visible border around the hyperlinked image
> using the UA's default colours for links in IE and Moz:
>
> a img{border-width:1px}
>
> <a href="foobar.html"><img src="foobar.jpg" alt="foobar"></a>
>
> but not in Opera.[/color]

The initial value of the 'border-style' properties are 'none'. You need to
change this to 'solid', otherwise "the computed value of border-width is
forced to 0."

Is Mozilla in standards mode when this happens? It sounds like a bug.

[color=blue]
> I imagine that border colour normally defaults to transparent,[/color]

The initial values of the border-color properties default to the 'color'
property's value.

<URL:http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-color>

In any case, you can check for transparent borders by setting the
border-width to something stupidly big, like 10em.

[color=blue]
> but shouldn't that be replaced by the default colours for links if the
> image is hyperlinked?[/color]

Not necessarily, at least according to the CSS 2 specification. Whether it
makes sense for user-agents to do this is another matter, I would say that
it does.

The initial value will be the color property of the image.
<URL:http://www.w3.org/TR/REC-CSS2/colors.html#colors> says that the
initial value for the 'color' property "depends on [the] user-agent".

I would suggest adding the following rule:

a img {
color: inherit;
}

(a used instead of :link, :visited for browser compatibility, this is only
significant in corner cases, I think.)


--
Jim Dabell

re: Hyperlinked image border in Opera

Jim Dabell wrote:
[color=blue]
>The initial value of the 'border-style' properties are 'none'. You need to
>change this to 'solid', otherwise "the computed value of border-width is
>forced to 0."[/color]

Bingo.
[color=blue]
>Is Mozilla in standards mode when this happens?[/color]

Definitely.
[color=blue][color=green]
>> but shouldn't that be replaced by the default colours for links if the
>> image is hyperlinked?[/color]
>
>I would suggest adding the following rule:
>
>a img {
> color: inherit;
>}[/color]

Added (only I changed it to border-color :)

Thanks,


Headless

--
Email and usenet filter list: http://www.headless.dna.ie/usenet.htm

re: Hyperlinked image border in Opera

Headless wrote:
[color=blue]
> Jim Dabell wrote:[/color]
[snip][color=blue][color=green]
>>Is Mozilla in standards mode when this happens?[/color]
>
> Definitely.[/color]

Well I guess you can get around calling it a bug by saying that the
user-agent stylesheet has the rule:

:link img,
:visited img {
border-style: solid;
border-width: 2px;
}

I guess the defined initial values in the specifications aren't worth much.

[color=blue][color=green][color=darkred]
>>> but shouldn't that be replaced by the default colours for links if the
>>> image is hyperlinked?[/color]
>>
>>I would suggest adding the following rule:
>>
>>a img {
>> color: inherit;
>>}[/color]
>
> Added (only I changed it to border-color :)[/color]

That wasn't a typo/thinko, but your version is probably more reliable :)


--
Jim Dabell

re: Hyperlinked image border in Opera

Jim Dabell wrote:
[color=blue][color=green][color=darkred]
>>>> but shouldn't that be replaced by the default colours for links if the
>>>> image is hyperlinked?
>>>
>>>I would suggest adding the following rule:
>>>
>>>a img {
>>> color: inherit;
>>>}[/color]
>>
>> Added (only I changed it to border-color :)[/color]
>
>That wasn't a typo/thinko, but your version is probably more reliable :)[/color]

Yes on reflection this is a bit of a funny one. I suppose it can be said
that the hyperlink element itself does not render, but rather that it
manipulates the hyperlinked content to make it recognizable as a link.
In the case of inline content such as text the colour of the content
itself is changed, in the case of replaced inline content like images a
border is applied around the image.

The question then is; does <a> have a color/border-color that can be
inherited by descendant elements, and does it depend on what is being
hyperlinked?


Headless

--
Email and usenet filter list: http://www.headless.dna.ie/usenet.htm

re: Hyperlinked image border in Opera

Headless wrote:
[color=blue]
> Jim Dabell wrote:[/color]
[snip][color=blue]
> The question then is; does <a> have a color/border-color that can be
> inherited by descendant elements, and does it depend on what is being
> hyperlinked?[/color]

On my reading of the spec:

It doesn't have a border (the initial value of border-style is none,
according to the spec).

Browsers typically include default styles that set the 'color' property,
although this isn't in the spec.

:link { color: blue; }
:visited { color: purple; }
:active { color: red; }

According to the spec, its children, unless they explicitly specify a value,
will inherit the value of the 'color' property.

Unless they explicitly specify a value, they will use the value of their
'color' property for border colours as well.

I can't think of any situation in any browser where this doesn't work like
this, or where the contents matter. Your Opera bug can be explained away
by not setting the border style. In every other visual browser I can think
of, a default border-style is set for elements that can be selected with
:link img, :visited img (and I thought Opera did this as well). There's no
need to suggest anything relating to borders for link elements, the 'color'
property inheritance does the work.


--
Jim Dabell