Underscore in Hyperlinked Graphic

[jwcane]

my css has the following specs for hot graphics:

 

a {

color: #CCCCCC;

border: 0;

}

a:hover {

background-color: #d3d3d3;

color: #000000;

text-decoration: none;

Line-height: 0;

border: none;

}

Would like to know the syntax to defeat the _underscore_ when hovering. Have looked around, and have tried a number of possibilities, without tumbling to the correct one.

Could one of you please show me the property that controls this behavior.

 

 

 

[Ingolme]

It's an underline. Setting text-decoration to none should solve that, which I see you've already tried. If you show a working example of the problem (the specific HTML and CSS code you're using or an online page that has the problem) then I can see what is causing it.

[dsonesuk]

Hot graphic?, hyperlinked graphic?, underscore? do you mean underline?, OR image border? difficult to pinpoint what you are talking about.

[Ingolme]

When you have an image within a link and there's whitespace between the <img> tag and the <a> tag it causes there to be an underline on either side of the image.

 

I believe "hot graphic" might be a literal translation from another language for an image with a hyperlink.

 

Trying to understand people is an important part of being an educator.

[jwcane]

"Hot graphic" above, refers to an image containing a hyperlink. Pls. excuse loose terminology.

 

Underscore occurs only on hovering. All of the css code that I am using is in the basic posting. For a running example, please see this page, and hover over any image in main window.

 

In reply to your earlier reply, there is no white space between code elements, and in any case the underline occurs only on hovering, not in the plain html output.

Edited September 24, 2014 by jwcane

[Ingolme]

What I'm seeing in the page you showed is that due to a background color on the link while it's hovering, the images on that page have a white line under them. You can remove the background color or set the vertical align to middle.

[jwcane]

OK the ohover attribute now reads as follows:

 

a:hover {

background-color: #d3d3d3;

color: #000000;

vertical-align: middle;

text-decoration: none;

Line-height: 0;

border: none;

}

Adding that line makes a barely perceptible change in alignment on hover, image shifting slightly downward, but underlining remains visible.

[dsonesuk]

The anchor is a inline element whose height is determine by font-size: you either have to

1) turn it into block element or inline-block element

2) or set font-size to 0 , but you have to target only the anchors around image only, else it will affect ALL

3) or change background to transparent, again you would have to target these specifically

a:hover {  background-color: #d3d3d3;  color: #000000;   vertical-align: middle;/*wrong*/  text-decoration: none;  Line-height: 0;/*wrong capital L*/  border: none;/*wrong*/}

You should only apply styling to :hover that changes so it should be

a { color: #CCCCCC;  vertical-align: middle;   line-height: 0;  /*border: none; there is no border on anchor*/}a:hover {  background-color: #d3d3d3;  color: #000000;   text-decoration: none;}

To Fix, because image anchors are not within div like the links at bottom of page, we will target anchor child elements whose parent is td element

1a) inline-block

a { color: #CCCCCC;  vertical-align: middle;   line-height: 0;  /*border: none; there is no border on anchor*/}td > a {    display: inline-block;}a:hover {  background-color: #d3d3d3;  color: #000000;   text-decoration: none;}

1b) block (transparent background)

a { color: #CCCCCC;  vertical-align: middle;   line-height: 0;  /*border: none; there is no border on anchor*/}td > a {    display: block;}a:hover {  background-color: #d3d3d3;  color: #000000;   text-decoration: none;}td > a:hover {    background-color: transparent;}

2) font-size

a { color: #CCCCCC;  vertical-align: middle;   line-height: 0;  /*border: none; there is no border on anchor*/}td > a {    font-size:0;}a:hover {  background-color: #d3d3d3;  color: #000000;   text-decoration: none;}

3) background

a { color: #CCCCCC;  vertical-align: middle;   line-height: 0;  /*border: none; there is no border on anchor*/}a:hover {  background-color: #d3d3d3;  color: #000000;   text-decoration: none;}td > a:hover {    background-color: transparent;}

[Ingolme]

Seting the vertical align on the image was what I was actually referring to.

a img {    vertical-align: middle;}

Removing the background color altogether would stop it from appearing as well.

[jwcane]

OK thanks to all of you, the underline is finally gone. Solution was a hybrid of Foxy's a img + Sacred's 1.a) less the vertical-align statement, as in:

 

a {

color: #CCCCCC;

line-height: 0;

}

td > a {

display: inline=block;

}

a img {

vertical-align: middle;

}

a:hover {

background-color: #d3d3d3;

color: #000000;

text-decoration: none;

}

[dsonesuk]

Should bedisplay: inline-block;

[jwcane]

Ok, done, tks