Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old July 20th, 2005, 09:12 PM
Headless
Guest
 
Posts: n/a
Default 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
  #2  
Old July 20th, 2005, 09:12 PM
Jim Dabell
Guest
 
Posts: n/a
Default 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

  #3  
Old July 20th, 2005, 09:12 PM
Headless
Guest
 
Posts: n/a
Default 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
  #4  
Old July 20th, 2005, 09:12 PM
Jim Dabell
Guest
 
Posts: n/a
Default 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

  #5  
Old July 20th, 2005, 09:13 PM
Headless
Guest
 
Posts: n/a
Default 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
  #6  
Old July 20th, 2005, 09:13 PM
Jim Dabell
Guest
 
Posts: n/a
Default 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

 

Bookmarks

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles