CSS Removing blue outline on HTML email href images - html

Would like to check what are the approaches that I can use to remove the anonymous blue outline when an email consist of an image href link? I have tried
border: none;
outline: none;
text-shadow: none;
box-shadow: none;
but nothings works.

Remove the border from the image:
a img {
border-style: none;
}

Remove the border by this (if you gave any):
Border:none;
Also try :
<img src="abc.jpg" border="0" />
If there is text decoration then remove it by this:
text-decoration:none;
If there will no changes appear then please you put your code on JSFIDDLE

the problem is not the in a selector but in img selector so you have to remove the border (which is set by default).
since this is for email I would advise you to set border="0" in img, instead CSS above head, just to be more cross-client as possible
something like this:
<img src="img.jpg" alt="img" border="0" />
if you don't like this approach you can always do CSS inline
<img src="img.jpg" alt="img" style="border:0 none" />
See more info about emailing tags/selectors here

Related

Remove Blue border in IE 10 Compatibility View

How can I remove or just don't display the border links in every anchor with image? By the way, browser settings is in compatibility mode. Answers from other question doesn't suffice to solve my problem. I guess because it only applies with lower version of IE.
EDIT:
I'm currently creating a Custom share buttons where my client requires me.
<div>
<a onClick="window.open('https://twitter.com/intent/tweet?original_referer=#shareLink#&text=#shareTitle#&tw_p=tweetbutton&url=#shareLink#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/Twitter_Tweet.png" />
</a>
</div>
<div>
<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=#shareTitle#&p[summary]=#shareDesc#&p[url]=#shareLink#&p[images][0]=images/Telos.jpg','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/FaceBook_Share.png">
</a>
</div>
<div>
<a onClick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=#shareLink#&title=#shareTitle#&summary=#shareDesc#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/LinkedIn_Share.png">
</a>
</div>
<div>
<a onClick="window.open('https://plus.google.com/share?url=#shareLink#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/Google_PlusOne.png">
</a>
</div>
CSS:
a {
outline : none;
text-decoration: none;
}
a img {
outline : none;
}
img {
border : 0;
border-style: none;
}
div {
float: left;
padding-right: 10px;
}
Here's what it looks like with IE10:
how about this, try to add something like this
<img src="blah" style="border-style:none;">
I usually use this as part of my normal defaulting set up in my CSS:
img {border: none;}
This doesn't effect the other browsers negatively and is easy to over-ride at a later point if you place this near the top of you general css file e.g
img {border: none;}
img.some-class {border: 1px double blue}
Where the increased specificity will add an ugly border to your image just like IE loves doing.
I was having the exact same issue with IE10. I've just set up a CSS rule for the a tag and set the text colour to white. This removes the blue line from around an anchor image.

basic css issue removing hyperlink underlines

Bear with my rudimentary question.
http://jsbin.com/css-play-notfound/6
There is this blue underline thats annoyingly creeping up between my image and Text in the heading.
Two things you can do:
Change this code:
<img src="logo.png" alt="REUNIFY" height="35" />
to this:
<img src="logo.png" alt="REUNIFY" height="35" border="0" />
Also add this to your CSS stylesheet:
a { text-decoration:none }
Note that the above CSS will get rid of the underline on ALL links. So if you want your normal
text links to have the underline and just want this particular link to NOT have the underline,
then create a class like so:
a.noline { text-decoration:none }
and then change your HTML code to this:
<h1><span><a href="http://www.wikipedia.org" class="noline">
<img src="logo.png" alt="REUNIFY" height="35" border="0" />
</a></span>
Welcome
</h1>
Just add the css rule...
text-decoration: none;
... to your <a> element, or to one specific element by using a class or ID.
You can apply it to all hyperlinks like so:
a
{
text-decoration: none;
}
You should always add HTML5 and older browser CSS resets.
http://cssreset.com/ has the most popular ones of 2012. This way, you'll always be starting on a clean slate.
a
{
text-decoration: none;
}
add this in your css

html, displaying a link as normal text

I was wondering if you could display a link as normal text.
<a id="" href="" target="_parent"><img src="" width="121" height="20" alt="">
<div style="position:absolute;left:163px;top:1px;font-size: 12px; display: block">
<font color="white">Log in</font></a>
I'm trying to overlap an image that is also a button, with the text "Log in", it works as it is with the code above, but I was wondering if I can change the "log in" which displays as blue and underlined to appear as normal text.
In css:
a {
color: inherit;
text-decoration: inherit;
}
These values can also be stuck in your anchor tag's style attribute.
Should result in your anchor tags looking the same as the text color and decoration of the parent(s).
If you have a look at Cascading Style Sheets (CSS) you can change the colour and the text style of the link.
In your example, you could use
<a id="" href="" target="_parent" style="color: white; text-decoration: none;"><img src="" width="121" height="20" alt="">
<div style="position:absolute; sleft:163px;top:1px;font-size: 12px; display: block">
<font color="white">Log in</font>
</div>
</a>
However I would learn how to use external stylesheets and link them to your HTML through the <link> tag in the <head> of your html. You can then style up individual tags through the tag name, an id or a css class. So an updated example would be:
<link rel="stylesheet" href="link-to-your-css-file" />
in your css file have
a.imgLink{
color: white; text-decoration: none;
}
div.imgLink{
position: absolute; left: 163px; top: 1px; font-size: 12px; display: block;
}
Then your html would be
<a class="imgLink" id="" href="" target="_parent">
<img src="" width="121" height="20" alt="">
<div class="imgLink">
Log In
</div>
</a>
Not only does it make your HTML "dry" but it gives you greater control over the styles of your html by only changing the css file.
If you don't want the link to be underlined,
set " text-decoration:none"
use this code in your html file
<style>
a {
text-decoration: none;
color: #000; /* or whatever colour your text is */
}
</style>
Short answer: yes.
Longer answer:
Yes, here is a fiddle, but you probably don't want to hide links from your user.
stslavik makes a good point with "text-decoration: inherit". Here is another fiddle. On my browser the "blam" and "stslavic" both show with strike-through, but I'd go with the "inherit" versus the "none"; just seems better to me.
(P.S not advertising this and no spam. Click on 'Hate AI' to reach my project)
You can do this =>
<h1><a style="text-decoration: none; color: inherit;" href="https://obnoxiousnerd.github.io/hate-ai">Hate AI</a></h1>
<p>A personal assistant that hates you but still helps you.</p>
The logic here was adding a style to the a tag which contains the following:-
text-decoration: none;
color: inherit;
text-decoration for removing the underline under the text.
color: inherit for removing the usual purple color of links.
Sure - just adjust the CSS for 'a' elements on the page.
Just a simple snippit to show some size/coloring possibilities, to make your link fit thematically when the rest of your text a bit better.
Wow, Look at this website! It's called Website! It's a shame that this link looks horrible, though!
<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.website.com/">Oh, boy! You can now click here to visit Website's website without the link looking bad!</a></h2>
<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.bing.com/">Uh oh, the Website website is broken! Visit the pinnacle of innovation, Bing, instead!</a></h2>

Erase blue border on image in HTML email

Im trying to send a HTML email and I have this piece of code:
UP ;<img src="arrow.png" /></div>
But theres a blue border JUST around my image. How can I get rid of it. Thanks.
Unfortunately, the best solution is to use the deprecated border attribute since not all email readers parse/apply CSS... as a separate style section, a separate sheet, or embedded in the HTML. If you have a guaranteed audience (all using the same email viewer) then by all means use CSS if you can.
UP ;<img src="arrow.png" border="0" /></div>
For testing here's a simple HTML document that should show all the proposed solutions:
<html>
<head>
<title>IMG border example</title>
<style>.rion a img {border:0 none;}</style>
</head>
<body>
<div>1) Default:
UP ;<img src="arrow.png" /></div>
<div>2) Img border 1:
UP ;<img src="arrow.png" border="1" /></div>
<div>3) Img border 0:
UP ;<img src="arrow.png" border="0" /></div>
<div>4) A style border none:
UP ;<img src="arrow.png" /></div>
<div>5) Img style border none:
<a href="#" >UP ;<img src="arrow.png" style="border:none" /></a></div>
<div class="rion">6) Stylesheet a img style border none:
<a href="#" >UP ;<img src="arrow.png" /></a></div>
</body>
</html>
In my browser (Firefox) 1,2,4 show borders (default border on 1,4 is thicker), while 3,5,6 show none... however 5 & 6 rely on the email client being able to parse CSS, 6 in particular can get really dodgy with webmail clients (which mess around with style classes on base elements because they have their own CSS).
have you tried something like this:
UP <img src="arrow.png" style="border:none">
?
Setting the border: 0 none; CSS property should fix that, if you wanted it to occur on all images wrapped in links, you could use it as such:
a img
{
border: 0 none;
}
For use in an e-mail, you may have to include a style block in the actual e-mail:
<style type='text/css'>
a img
{
border: 0 none;
}
</style>
jsFiddle Example
Your image is inside a link tag (<a>). The blue border is caused by the default style of the link. To fix this overwrite de CSS styles of the link setting the border property to 0:
UP <img src="arrow.png" >
To be on the extra safe side, specify no border in both tags.
UP <img src="arrow.png" style="border: 0;">
This question is a few months old, but I ended up here with the same question, so hopefully this may save someone the time I wasted.
The td has a background color of that neon blue, and by default has a bit of padding.
I just styled the td with...
style="background:none;"
I knew all about the border style defaults, and hadn't had the td background default in the mail clients I had previously tested, but it kept popping up in gmail.
See if this works:
UP <img src="arrow.png" style="border: 0 !important;" border="0" />
Please let me know if this works.
Adding style="background:none;" to td or adding <style>a img {border:0 none;}</style> has worked for me.

Remove line under image in link

I have a few instances where I place image within a link. Normally if you set border="0" there line under a link does not apply to the image. However, I had to specify DOCTYPE to be and now in FF I see the line under all images.
I still would like to have my links underlined, but not the images within.
<img src="img.png" height="16" width="16" border="0"> link
I've tried to solve it with CSS by adding
a img {
text-decoration:none
}
Unfortunately it did not work. I also tried:
a img {
border:0
}
IE does not "underline" my images within a link... Any suggestions would be highly appreciated.
Example Link
I still would like to have my links underlined, but not the images within.
If you want to have a special case for links with images, give the a element a class and remove the text-decoration for that class:
HTML:
<img height="16" width="16" />
CSS:
a img
{
border: 0 none;
}
.image-link
{
text-decoration: none;
}
This is great if you only have an image within the link, however you have both text and images within the anchor.
The solution for that would be to add a span around the text within the anchor:
<img height="16" width="16" /> <span>link text here</span>
and add an additional style in the stylesheet:
.image-link span
{
text-decoration: underline;
}
A solution would be to use the image as a background image instead of in the html, possibly the background of the parent element of the a.
In case anyone cares, here's an alternative solution that I came up with to circumvent the issue:
.nl {
text-decoration:none;
}
<img src="img.png" height="16" width="16" border="0"><u>link</u>
a { text-decoration: none }
The underline is from the A-tag not the IMG
For those cases where editing the markup isn't an option (inaccessibility to templates and/or surrounding issues), you can use a little jQuery. You may need to adjust the syntax to override your CSS:
jQuery('a > img').parent().css({'text-decoration' : 'none'});
Solved
<img src="img.png" height="16" width="16" border="0"> link
If you are linking to an image, try the following:
a[href$=jpg], a[href$=png] {
text-decoration: none;
}
My two cents:
$('a').each(function(){
var images = $(this).find("img");
images.parent().addClass('no_border_img');
});
Loop all links and find images inside, then for each one add CSS style to the link.
Only for a image with link inside a previous link style. Remember to create the style for 'no_border_image'.