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.
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
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">
<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 made my first attempt here to create my own webpage.. But what can be the error in the code i wrote here?
<div align=center>
<img src="icons/twittergrey.png" alt="Twitter" name="Twitter" width="48" height="48" border="0" id="Twitter" />
<img src="icons/facebookgrey.png" alt="Facebook" name="Facebook" width="48" height="48" border="0" id="Facebook" />
<img src="icons/youtubegrey.png" alt="YouTube" name="YouTube" width="48" height="48" border="0" id="YouTube" />
<img src="icons/rssgrey.png" alt="RSS" name="RSS" width="48" height="48" border="0" id="RSS" />
<img src="icons/androidgrey.png" alt="Android Market" name="Android Market" width="48" height="48" border="0" id="Android Market" />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Twitter','','icons/twitter.png',1)">
<a href="#" target="_blank" onmouseover="MM_swapImage('YouTube','','icons/youtube.png',1)" onmouseout="MM_swapImgRestore()">
Sorry i got this loong lines here.. Dunno how i could make it look like a list..
Well there's only two problems I can see, the first is that the center should be in speech marks, so it should look like ="center". Secondly you need to add </div> at the end... Should work then :D
After breaking your lines, a couple of your anchors are missing the </a> on them, which I'm sure is going to be causing some problems for you.
Also, align="center" is deprecated. Use style="text-align: center" instead.
P.S. You really shouldn't write your code all on one line like that (at least hopefully you aren't). All that will cause is problems like this.
You have an embedded anchor tag in an anchor tag (may cause problems) you also are missing two ending anchor tags and an ending div tag as noted by others.
Your markup is really confusing though XD
cleaned up (a little) version of your markup
http://jsfiddle.net/MZge2/1
You need to Close
<div align=center> with </div>
<div align=center> Should be <div align="center">
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.