fmz 14

I know this sound really lame, but efforts to remove a dotted underline from linked images on this page will not go away.

Here is the code that creates the underline:

a:hover, a:focus { color: #2c88b5; Text-decoration: none; border-bottom: 1px dotted #2c88b5; }

Here is my attempt to remove it from linked images.

a img:hover  { border-bottom: none; }

I would appreciate some help to get the code right so that when you mouse over the images it will not show a dotted underline.


  • It only shows the dotted line in Chrome for me.. Kyle Sevenoaks about 8 years ago

2 answers

KC Rajput 178
This was chosen as the best answer

hey you should use for link also like this

a {Text-decoration: none; border:none; }

a img{ border: none; }

add this in your css file .

Answered about 8 years ago by KC Rajput
  • I need to be able to keep the underline on the regular links - just remove it from the image links. fmz about 8 years ago
  • so you should use only for image you can use this a img{ border: none; } KC Rajput about 8 years ago

The reason that your style doesn't work is that the image itself already has no border. The border is actually on it's parent, a. You will have to find a way to reference that element. The easiest way is to simply add a class to the anchor: <a class="image_link" href=""> even though that may not be as elegant as I would like.

Answered about 8 years ago by kainosnous