When working on an HTML email signature, I wrote basic HTML for four linked images.
<a href="http://www.dwightfund1.com">
<img src="https://dwight.app.box.com/representation/file_version_28131628265/image_2048/1.png?shared_name=x116s7oza2gydr9tmlqgv7oad349y885" width="40" height="40" alt="capture"/>
</a>
<a href="http://www.dwightfund2.com">
<img src="https://dwight.app.box.com/representation/file_version_28131627701/image_2048/1.png?shared_name=97bbaqds6wg6up5ip12a5t55lts7mnd4" width="40" height="40" alt="capture" border="0">
</a>
<a href="http://www.dwightfund3.com">
<img src="https://dwight.app.box.com/representation/file_version_28131629073/image_2048/1.png?shared_name=w9ucedcax4fmcw3lelwl9rhgdbhyqvo4" width="40" height="40" alt="capture"/>
</a>
<a href="http://www.dwightfund4.com">
<img src="https://dwight.app.box.com/representation/file_version_28131628619/image_2048/1.png?shared_name=a3t36efnz0cs3kmcza2an0wehrnczu48" width="40" height="40" alt="capture"/>
</a>
When I view the code in my browser these weird lines appear next to the images like below:
Why are these lines there any how can I remove them?
They could be the link's default text-decoration: underline in the spaces between the images.
If this is for an E-Mail client (that don't support CSS style sheets), you'll probably have to do something like
<a style="text-decoration: none" href="http://www.dwightfund4.com">
This border is meant to inform users that the image is a link.
a{
text-decoration: none;
}
img{
border-style: none;
}
You can remove it with color of a element:
http://codepen.io/fedojo/pen/NqGKNX
for example :<a href="http://www.dwightfund1.com" style="color: #fff">
Related
This question already has answers here:
How to remove underline from a link in HTML?
(8 answers)
Closed 2 years ago.
I am writing HTML5 specifically for emails. As such, I have to do all my CSS styling inline. I have a table with three images (all hosted on google drive) but this strange blue underscore is showing up?
Pictured:
https://imgur.com/a/F4Metod
Relevant HTML:
<table align="center" style="max-width: 400px">
<tr align="center">
<td>
<a href='https://www.twitter.com'>
<img src="http://drive.google.com/uc?export=view&id=1txAOBZTXT_J8RcM7fDaKXT-oO8hWV1fb" width="40" height="40"/>
</a>
<a href='https://www.facebook.com'>
<img style="margin:0px 10px" src="http://drive.google.com/uc?export=view&id=1nFoCmmlS1Kl3nKXkJk9eDaRqglpTeVP1" width="40" height="40"/>
</a>
<a href='https://www.instagram.com'>
<img src="http://drive.google.com/uc?export=view&id=1LcrU78sAidvlnnzL28TgdaIYBY9xcN7q" width="40" height="40"/>
</a>
</td>
</tr>
</table>
Looks like these are the default underlines of the anchor tags (<a>) so adding style="text-decoration: none" on them should fix it.
Most likely the underscore is a space Character within your link. Try to remove all spaces between your tags within the link-tag. And remove all linebreaks in your source document within the links too.
To remove this blue underline, add text-decoration: none; to the style of the <a> element.
Here is your code:
a {
text-decoration: none;
}
<table align="center" style="max-width: 400px">
<tr align="center">
<td>
<a href='https://www.twitter.com'>
<img src="http://drive.google.com/uc?export=view&id=1txAOBZTXT_J8RcM7fDaKXT-oO8hWV1fb" width="40" height="40"/>
</a>
<a href='https://www.facebook.com'>
<img style="margin:0px 10px" src="http://drive.google.com/uc?export=view&id=1nFoCmmlS1Kl3nKXkJk9eDaRqglpTeVP1" width="40" height="40"/>
</a>
<a href='https://www.instagram.com'>
<img src="http://drive.google.com/uc?export=view&id=1LcrU78sAidvlnnzL28TgdaIYBY9xcN7q" width="40" height="40"/>
</a>
</td>
</tr>
</table>
A living demo: https://codepen.io/marchmello/pen/PoPjgZE?editors=1100
I'm adding custom social media icon links on my website (Wordpress) and there is a stubborn line that runs through them just like hyperlinks. The line disappears when mouse hovers over image, just link other hyperlinks on page.
This is the code used to create them:
.custom-social img {
text-decoration: none;
margin-right: 20px;
}
<div class="custom-social">
<a href="http://twitter.com/mrsideproject">
<img title="Twitter" alt="Twitter" src="http://coinpages.co/wp-content/uploads/2018/01/twitter-badge.png" width="35" height="35" />
</a>
<a href="http://medium.com/#mrsideproject">
<img title="Medium" alt="Medium" src="http://coinpages.co/wp-content/uploads/2018/01/medium-logo.png" width="35" height="35" />
</a>
<a href="http://instagram.com/mrsideproject">
<img title="Instagram" alt="Instagram" src="http://coinpages.co/wp-content/uploads/2018/01/Instagram-badge.png" width="29" height="30" />
</a>
</div>
The text-decoration is on the a, not the img.
Add text decoration in anchor tag. Use Css:
.custom-social a {
text-decoration: none;
margin-right: 20px;
}
Just as Daniel said, text-decoration:none is supposed on the anchor tag.
.custom-social a {
text-decoration: none;
}
.custom-social img{
margin-left:20px;
}
<div class="custom-social">
<a href="http://twitter.com/mrsideproject">
<img title="Twitter" alt="Twitter" src="http://coinpages.co/wp-content/uploads/2018/01/twitter-badge.png" width="35" height="35" />
</a>
<a href="http://medium.com/#mrsideproject">
<img title="Medium" alt="Medium" src="http://coinpages.co/wp-content/uploads/2018/01/medium-logo.png" width="35" height="35" />
</a>
<a href="http://instagram.com/mrsideproject">
<img title="Instagram" alt="Instagram" src="http://coinpages.co/wp-content/uploads/2018/01/Instagram-badge.png" width="29" height="30" />
</a>
</div>
OK, I figured it out! not entirely sure why text-decoration wasn't having any effect but this did the trick:
.custom-social a {
border:0;
}
in this piece of html,
<div>
<a href="http://www.facebook.com/" target="_blank">
<img border="0" width="26" height="25" src="facebook.gif" alt="Facebook"/>
</a>
<a href="http://twitter.com/" target="_blank">
<img border="0" width="26" height="25" src="twitter.gif" alt="Twitter"/>
</a>
</div>
when it's displayed in the browser, there's a small mark next to the first image. Why does it appear and how can i remove it?
Here's an image to show it :
Just try setting the text-decoration: none for the two links above.
The problem you are facing is that the links are underlined by default, and there might be a line-break after the image that is causing a white-space characters, and the default text-decoration: underline; is showing an underline under that white-space character.
Remove the white-space between <img ...> and </a> like this:
<div>
<a href="http://www.facebook.com/" target="_blank">
<img border="0" width="26" height="25" src="facebook.gif" alt="Facebook"/></a>
<a href="http://twitter.com/" target="_blank">
<img border="0" width="26" height="25" src="twitter.gif" alt="Twitter"/></a>
</div>
I don't know the reason as I too have been struggling with this for a long time (something to do with white-space). However, what I have found is that if you set the display to inline-block, this problem goes away.
a { display: inline-block; }
See this fiddle: http://jsfiddle.net/mznMY/
You are using an a anchor which contains underline symbol
Put text-decoration: none to your a.
<a href="service.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Sea Freight.png"/>
</a>
<a href="airfreight.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Air Freight.png">
</a>
<a href="projectcargo.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Project Cargo.png">
</a>
<br/>
<a href="customclearance.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Custom Clearance.png">
</a>
<a href="transportation.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Domestic Transportation.png">
</a>
<a href="thirdparty.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Warehousing and Distribution.png">
</a>
</br>
<a href="coastalcargo.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Coastal Cargo.png">
</a>
<a href="veseelchartering.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Vessel Chertring.png">
</a>
</br>
I have create button by using img tag within anchor.
why I am getting small dash at right corner??
thanks in advance
There is a default text-decoration:underline associated with an anchor <a> tag. Since there is a space in the <a> </a>, that underline is the line you see.
Use text-decoration:none on <a>, that should solve it.
a {
text-decoration: none;
}
This appears to happen when:
the closing anchor tag is on a separate line from the rest of the element
AND the visible text of the anchor is an image
AND you have multiple images on the same line
and also the anchor/image is not the last item in the horizontal series
In the following example, you will not see dashes after the third and fifth images, but the other images will show a dash to the right of the image/link:
<p>
<a href="#">
<img src="image.jpg" alt="Test 1" />
</a>
<a href="#"><img src="image.jpg" alt="Test 2" />
</a>
<a href="#">
<img src="image.jpg" alt="Test 3" /></a>
<a href="#"><img src="image.jpg" alt="Test 4" />
</a>
<a href="#"><img src="image.jpg" alt="Test 5" />
</a>
</p>
I can't find any information to say if this is a violation of an HTML rule regarding splitting elements across multiple lines. I replicated the same issue in Chrome, Firefox and IE 11.
I can only guess that a space is being added after the image, since the closing tag is on a separate line. And this relates to the answers given above - the space is being automatically styled with an underline. But I don't know why the space is added after an image but not after text, or why this only happens when the images are on the same line.
<a> is an inline element. If you leave space between enclosed elements and the </a> element, it will be formatted automatically which is with an underscore.
I am trying to create images hyperlinked to some URL's and hyperlinks donot seem to work.
I am using the code as given below at http://windchimes.co.in/index_w%20-%20Copy.html
Can you tell me why the hyperlinks to the icons are not workking?
<td width="29" style="padding-bottom: 42px;><img align="middle" title="blog" alt="blog" src="http://dl.dropbox.com/u/529534/windchimes/icon-blog.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="linkedin" alt="linkedin" src="http://dl.dropbox.com/u/529534/windchimes/icon-linkedin.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="facebook" alt="facebook" src="http://dl.dropbox.com/u/529534/windchimes/icon-facebook.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="twitter" alt="twitter" src="http://dl.dropbox.com/u/529534/windchimes/icon-twitter.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="Youtube" alt="Youtube" src="http://dl.dropbox.com/u/529534/windchimes/icon-youtube.gif"><td>
Don't know if there is more, but you're missing the closing quotes at:
<td width="29" style="padding-bottom: 42px;>
^^^
It is much easier to diagnose, maintain and adjust your web pages if you do the following.
Keep your concerns separated - your HTML should describe a document, not its style. Put your style rules into a cascading style sheet (CSS), which will also mean you'll satisfy the next rule
Don't repeat yourself. You had a width and style rule on all of these elements that was exactly the same. That means if you want to change the width to 30px, you'd have to find / replace each of these items (and if you automate your find and replace, you have to hope you don't accidentally replace something you didn't mean to.
Layout your code - by properly tabbing your HTML code, you will spot errors like missing closing tags as it will instantly look wrong to the eye.
Use validator.w3.org to make sure the code is correct - this will spot errors for you and will help you avoid the two problems in your code - a missing quote and a missing closing tag.
Here is a clean version of your code...
CSS:
td.myClass {
width: 29px;
padding-bottom: 42px;
text-align: center;
}
And HTML:
<td style="myClass">
<a href="http://windchimes.co.in/blog" target="_blank">
<img title="blog" alt="blog" src="http://dl.dropbox.com/u/529534/windchimes/icon-blog.gif">
</a>
</td>
<td style="myClass">
<a href="http://www.linkedin.com/groups?gid=120310" target="_blank">
<img title="linkedin" alt="linkedin" src="http://dl.dropbox.com/u/529534/windchimes/icon-linkedin.gif">
</a>
</td>
<td style="myClass">
<a href="http://www.facebook.com/group.php?gid=72425590275" target="_blank">
<img title="facebook" alt="facebook" src="http://dl.dropbox.com/u/529534/windchimes/icon-facebook.gif">
</a>
</td>
<td style="myClass">
<a href="http://twitter.com/windchimesindia" target="_blank">
<img title="twitter" alt="twitter" src="http://dl.dropbox.com/u/529534/windchimes/icon-twitter.gif">
</a>
</td>
<td style="myClass">
<a href="http://www.youtube.com/user/Windchimesindia" target="_blank">
<img title="Youtube" alt="Youtube" src="http://dl.dropbox.com/u/529534/windchimes/icon-youtube.gif">
</a>
</td>
A good idea is to run your code through the W3 Validator:
http://validator.w3.org/check?uri=http://windchimes.co.in/index_w%2520-%2520Copy.html
It will tell you in what ways your HTML is malformed.
Your last <td> tag isn't properly closed, either.
<td width="29" style="padding-bottom: 42px;>
...
<td>
should be </td> instead of <td> at the end.