How do to remove border and underline from an image

HTML & CSS
1

Hi,

We offer a social network based News service, and we want to remove the border and underlines for images that are hyper linked. For example in this page:

An ULTIMATE Con Job: Republicans claims that they are worrie - RealNewsPost.com

we would want to remove the border and underline from the Printer icon that you can see on upper right corner of the article.

We tried this CSS but it is not working:


.clean_show  {
        border: none; 
}


.clean_show:a  {
        text-decoration: none;
}

and class clean_show is then added to the href tag, like:

<div class=“image-float-right”>
<a href=“<?php echo $_SERVER[‘PHP_SELF’] . ‘?print=yes’; ?>” class=“clean_show”>
<img src=“images/Printer-icon-2.png” width=“62” height=“62” title=“Printer friendly Mode” border=“0”></a>
</div>

We also tried inserting the class=“clean_show” in the wrapper div and that did not do the job too.

ThanX,

2

The border on the printer image is caused by this:

.image-float-right {
  [COLOR="Red"]border: 1px solid black;[/COLOR]
  clear: right;
  float: right;
  margin: 5px 2px 10px 15px;
  padding: 3px;
}

If you remove that border, it will be removed from all of the other right-floated images. So maybe just remove the .image-float-right class from the printer image.

3

Like ralph.m said, the border is on the underlying div and not on the image itself.
If you don’t want to adjust the image-float-right class, you could fix the problem by adding the clean_show class to the image-float-right div like so:


<div class="image-float-right clean_show">
<a href="<?php echo $_SERVER['PHP_SELF'] . '?print=yes'; ?>">
<img src="images/Printer-icon-2.png" width="62" height="62" title="Printer friendly Mode" border="0"></a>
</div>
4

Hi,

I tried what you suggested but the border is still there as well as the underline on the image!

ThanX,

5

Hi,

Your suggestion worked in regard to removing the border.
That is I set the border for
.clean_show {

border: 0px;

}

and now border is removed.
But how do we remove the underline on hyperlinked printer image?

ThanX,

6 
a img {position:relative; top:2px;}

That shifts the image down by 2px, but without changing anything else on the page, so it will now cover up the underline (unless you’ve got any transparent pixels at the bottom of the image). It’s a bit of a hack, but it achieves the right result.

7

Hi,

Since I do not want this to apply to all hyperlinked images but this particular printer icon image, I tried this:

.clean_show: a img {position:relative; top:2px;}

with clean_show being class used for these printer icon buttons.
But it is not working! That is the unerline is still there.

8

You’ve got a colon in there that shouldn’t be there, after .clean_show - try getting rid of that and see how it goes.

9

Hi,

I removed that :, but it still the same!

ThanX,

10

Yeah, the image is transparent, so the dots will show behind it anyway. And 2px isn’t enough. Try this:

.clean_show a img {
  position:relative; 
  top:5px; 
  background:white;
}