Jump to content

Underscore in Hyperlinked Graphic


jwcane
 Share

Recommended Posts

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.

 

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

"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 by jwcane
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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;}
Link to comment
Share on other sites

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;
}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...