473,846 Members | 1,861 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.ht ml"><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
Jul 20 '05 #1
5 6266
Headless wrote:
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.ht ml"><img src="foobar.jpg " alt="foobar"></a>

but not in Opera.
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.

I imagine that border colour normally defaults to transparent,
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#propde f-border-color>

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

but shouldn't that be replaced by the default colours for links if the
image is hyperlinked?


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#col ors> 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

Jul 20 '05 #2
Jim Dabell wrote:
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."
Bingo.
Is Mozilla in standards mode when this happens?


Definitely.
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;
}


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

Thanks,
Headless

--
Email and usenet filter list: http://www.headless.dna.ie/usenet.htm
Jul 20 '05 #3
Headless wrote:
Jim Dabell wrote:

[snip]
Is Mozilla in standards mode when this happens?


Definitely.


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.

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


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


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

Jul 20 '05 #4
Jim Dabell wrote:
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;
}


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


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


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
Jul 20 '05 #5
Headless wrote:
Jim Dabell wrote: [snip] 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?


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

Jul 20 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
2563
by: Albert Wagner | last post by:
Javascript doesn't allow a hyphen in names, therefore when creating an image element in javascript and wanting to specify 'z-index', I had to spell it 'zindex'(image.style.zindex = 10;). But I am now confused as to the proper way to handle hypenated CSS names. The 4th edition Definitive Guide has index entries for 'z-index' and 'zIndex', but not 'zindex'. The HTML context is 4.01 strict and the browser is Opera 7.21. What I am doing...
6
2260
by: Robert Lapes | last post by:
I'm just getting into using CSS and I'm having a problem getting Opera to display a Navigation Bar in the same way as IE6. Can someone please point me in the right direction? The site I'm working on can be seen at http://www.budbury.co.uk/itel/index.htm In Opera 6.05 the Nav Bar image floats behind the content division that follows the navbar.
3
2741
by: Jay | last post by:
I need help!! I'm using IE 6 and look at the bottom-left corner of the image border: http://pages.infinit.net/jaylac/image.html It does that when i use border="1" or any css border style. I saw that it is not happening in IE 5.5, neither in NS6 or OPera 7. Does anybody have ever seen that? I'm sure it wasn't like that a few weeks ago (still with IE 6)... Could it be IE updates??? I'm really
4
1976
by: Erik Sandblom | last post by:
Hello all, I made a nice frame around an image, using padding and border like this: <img style="padding: 5px; margin: 5px; border: 1px solid gray" src="./stuff/gde.gif" alt="Gewerkschaft der Eisenbahner" align="right" border="0" width="201" height="43"> But Opera 7.2 squishes the image. I think it's because I've sized the
8
128628
by: Chuck | last post by:
given that the img border >0, how is a border color specified? Chuck
2
1525
by: Stephen | last post by:
Ever since I ported VB my webform to C# the images in the following html have borders. <asp:EditCommandColumn footerText="New Item" EditText="<img src=images/edit.gif (border=0 alt='Edit line item'>" CancelText="<img src=images/cancel_1.gif (border=0 alt='Cancel update'>" UpdateText="<img src=images/save.gif (border=0 alt='Save changes'>"> The same webform using VB does not show the borders. Actually, I am not even sure they are...
7
2212
by: roN | last post by:
Hi, I have an image and I would like to draw a border around it, I tried: <p style="border:1px border-style:solid; border-color:#EEEEEE; background-color:#FFFFFF;"><img src="./images/header.jpg" width="800" height="130" border="0" ><br> but I don't get a border, why not? Where am I going wrong? Thank you! -- chEErs roN
4
3639
by: Gary | last post by:
Hello, I want a background image to display in the extreme bottom right corner. What I have works fine in IE7 and FF2 not so in Opera 9.1 Any suggestions? Page Posted at the the link. http://7ref.com/qzw
0
1725
by: shapper | last post by:
Hello, Can I apply a top and bottom border to a fieldset but using an image to define a custom border line? How can I do this? Thank You, Miguel
0
9879
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9725
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10640
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9477
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7877
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7050
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5714
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
4111
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3157
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.