4 replies [Last post]
cybershot
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2007-09-07
Posts: 33
Points: 0

i am using an image as a hyperlink and when i do that, the image get a blue border. i tired border:none; in my css but it's not working. i have also tried text-decoration:none; but the border refuses to go away. How can i solve this please?

cybershot
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2007-09-07
Posts: 33
Points: 0

SOLVED. I put border:0 as an

SOLVED. I put border:0 as an inline style.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Using inline styles is

Using inline styles is generally a Bad Idea®. In your stylesheet, usea img { border: none; }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

cybershot
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2007-09-07
Posts: 33
Points: 0

I did change it to the style

I did change it to the style rule. but 2 questions please. I just finished a class online through a local college here in my home town and they didn't say anything about inline styles being bad. infact i just asked the prefessor yesterday if i could use inline styles with the class. Like class="image" style="border:0"

1. why do you think using inline styles in generally a bad idea

2. why is it (a img) and not just (img)

Thank you for your response

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

That you can do it does not

  1. That you can do it does not imply that you should do it. The rationale behind css is that presentation is removed from structure/semantics (html). By using the style attribute, you negate the advantage of that separation. In this example, you'd have to add the style attribute to every case of an image in a link.

  2. It's a matter of specificity. For example, the Firefox default stylesheet has this:
    *|*:-moz-any-link img, img[usemap], object[usemap] {
      border: 2px solid;
    }
    which says that an image, descended from any kind of link, has a border. You must be more specific in order to override the default. The "a" is more specific than the "*", thus "a img". If you only used "img", the "* img" would have the higher specificity.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.