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;
}
Related
so im designing a website using html, php, all that fun stuff & im trying to make facebook, twitter, youtube & instagram links that will open a new tab and take you to the website. but at the moment the URL is going to localhost/horizonphotography/www.facebook.com instead of opening the new tab and THEN going to www.facebook.com.
heres my HTML
<div class="social">
<a href="www.facebook.com" target="_blank">
<img border="0" alt="Facebook" src="img/facebook.png" width="50" height="50">
</a>
<a href="www.twitter.com" target="_blank">
<img border="0" alt="twitter" src="img/twitter.png" width="50" height="50">
</a>
<a href="www.youtube.com" target="_blank">
<img border="0" alt="youtube" src="img/youtube.png" width="50" height="50">
</a>
<a href="www.instagram.com" target="_blank">
<img border="0" alt="instagram" src="img/instagram.png" width="50" height="50">
</a>
</div>
and my css 'if' required.
.social {
position: fixed;
bottom: 0;
right: 7%;
width: 300px;
}
thanks in advance!
Try using a protocol like http:// or // to external links like this :
<a href="http://www.facebook.com" target="_blank">
<img border="0" alt="Facebook" src="img/facebook.png" width="50" height="50">
</a>
See this good answer on SO : https://stackoverflow.com/a/8951636/6028607
You need to specify the protocol, or put // at the start of the href attribute. For example:
http://www.youtube.com
Or
//www.youtube.com
Awesome, needed to identify the protocol as suggested. working well now! thanks everyone!
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">
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 have some HTML where I have img tags inside of an href tag to use as a button. Everything works fine except that when I open it in IE, I get a border around the img tag.
Here's some code:
<img src="button.png" width="25" height="25" style="margin-top:600px;" />
<img src="button.png" width="25" height="25" style="margin-top:600px;" />
<img src="button.png" width="25" height="25" style="margin-top:600px;" />
<img src="button.png" width="25" height="25" style="margin-top:600px;" />
<img src="button.png" width="25" height="25" style="margin-top:600px;" />
<img src="button.png" width="25" height="25" style="margin-top:600px; text-decoration:none" />
How can I get rid of the blue border, which only appears in IE?
Simple fix, in your stylesheet create a style similar to this:
a img{
border:0;
}
In your case, you could update your style to include some of the inline styles you have in your HTML. For example, your stylesheet would be updated to:
a{
cursor:pointer;
text-decoration:none
}
a img{
margin-top:600px;
}
Add border="0" attribute to the img tag
Regarding the minor issue with Internet Explorer and the grayed box around the anchor tag - this is outline. To hide the outline box you can use following CSS:
a img{outline:none;}