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.
Related
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
I have a forum # http://forum.banaisbul.com
If you check the site you can see there's a problem with the header background. I want to change the entire header background to the color of the logo background. But I don't know which codes to put where.
Matthew Rath gave you the correct answer to the problem that you wrote. But the bigger problem that you have revealed is that you do not know how to use your resources. Take some time and learn to use your web developer tools (web inspector, etc). Then you can solve these issues quickly by yourself.
It's #404040 - Tested in Photoshop:
HTML:
<div style="background-color: #404040;">
<a href="http://forum.banaisbul.com">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</a>
</div>
Photoshop Image:
From the looks of it you can simply add some CSS to the div that contains the header image.
<div class="imgheader">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
Then in your CSS file out could do
.imgHeader{
background-color: #3D3D3D;
}
Alternatively,
<div style="background-color: #3D3D3D">
</div>
The hardest part will likely be matching the CSS color hex code (e.g. #3D3D3D) to your image. You may want to look here to try to get an exact match : Paletton.com
You need to style the container div which currently has no selector assigned to it:
http://puu.sh/blDRr.png
This being the case you could do:
.cnt-container > div {
background-color: "your colour"
}
you could also add it directly in your page-template (this is called 'inline styling'):
a couple of lines below your opening body tag you'll find
<div>
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
and you need to change it to
<div style="background-color:#404040">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
Here is an HTML code to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).
Why does it happen and how to fix it?
I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.
Let's change our code to demonstrate this:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
The result is the following:
As you can see, the extra space is needed to render the text without clipping!
I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:
This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.
Same issue in FireFox and IE and Chrome.
You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)
<div style="width:800px; margin:0 auto;border:solid;height:40px;">
<img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>
Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable)
img {padding:none;margin:none;display:block;}
http://jsfiddle.net/h6wrA/
Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/
The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).
.image { background:red; }
.image-fix { line-height:0; }
Image without Fix:
<div class="image">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<br>
Image with Fix:
<div class="image image-fix">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
This is not a issue , you just need to write a correct CSS. Try
height:40px;display:block; for div tag and keep margin:0,padding:0
Thats all...
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>HAHAHA</title>
<STYLE TYPE="text/css" media="screen">
*
{
padding: 0;
margin: 0;
}
body
{
padding: 0;
margin: 0;
}
#flexbox
{
//display: -webkit-box;
//-webkit-box-orient: horizontal;
//-webkit-box-align: stretch;
//width: auto;
}
</STYLE>
</head>
<BODY style="padding:0;margin:0;border:0;">
<!--<div id="flexbox">
<img src="1.jpg" width="100px" style="padding:0;margin:0;"/>
<img src="1.jpg" width="100px"/>
<img src="1.jpg" width="100px"/>
</div>-->
<img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
<img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
</BODY>
</html>
Why do these images always have a small space in between them, even if i have padding & margin set to 0 on body and all other elements in page?
OK this is the full unedited code.
EDIT: just found out its the line break between the two IMG.
SO... i cannot press enter between the two elements? lol... :)
i cannot press enterin between the two elements? lol... :)
Nothing distinguishes one type of white space from another in most parts of HTML.
You can, however, format your code such:
<img src="..." alt="..."
><img src="..." alt="...">
… to remove the space between the elements.
images are displayed inline by default, which is likely your issue. White-space characters in HTML are condensed, however they will still appear as a space if any exist between HTML elements.
The following HTML will render with a slight space between images.
<div class="images">
<img src="http://placehold.it/400x300" />
<img src="http://placehold.it/400x300" />
</div>
If you'd like to make them flush against each other, you could try floating the images:
img {
float: left;
}
Floating comes with its own issues if you're new to CSS.
An alternative is to adjust the markup to get rid of extra white-space characters. A common way to do this is called "fishy" syntax:
<div class="images"
><img src="http://placehold.it/400x300"
/><img src="http://placehold.it/400x300"
/></div>
The way it works is that the closing > character of each element is moved to just before the beginning < character such that there's no white-space within any HTML element as content. Instead, the white-spaces for indentation are within the HTML tags, where the white-space is ignored completely.
There was a w3c feature request for a new property on white-space, which could theoretically allow CSS to remove all spaces from an element. The orignal proposal was white-space: ignore; however I much prefer (and suggested) white-space: none;.
It appears, however, that updating white-space is not likely to happen, and instead the suggestion was to use flexbox to remove spaces appropriately:
extending off the original HTML example:
.images {
display: flex;
}
Of course, it will be some time before flexbox has enough cross-browser support to be useful in a commercial environment, so for the time being I recommend sticking with the fishy syntax.
There's a good trick to overcome this:
Place your images inside a <div> and then set
font-size:0px;
to the <div>.
You can continue keeping the elements on separate lines.
I believe this is also necessary if you are viewing in an older version of IE
img {
border:0
}
While I think the problem is coming from another point in your mark-up, and/or CSS, I would suggest ensuring that you've zeroed out both margin, padding and border for the img element:
img {
margin: 0;
padding: 0;
border-width: 0;
}
This should take care of the problem, but if not we may need to see your real html and css (or a live demo that reproduces the problem, at JS Bin, or JS Fiddle) to help you further.
I have the following:
<a href="#" style="border:solid 1px gray; line-height: 5px;">
<img src="x.gif" style="border:solid 0px gray;">
</a>
Lets say x.gif's dimensions are 5x5 px. How can i make the hyperlink wrap tightly around x.gif? Right now the width is right but there seems to be padding on top and bottom of x.gif.
Try something like this:
<a href="#" style="border:solid 1px gray; display: inline-block;">
<img src="x.gif" style="display: block;">
</a>
If you need to support IE7 then you'll probably have to replace the inline-block with block in an IE7-specific stylesheet.
Try adding margin:0; padding:0; to your image.
This is MSIE specific behaviour. It's sensitive to whitespace around the <img> tag as well.
To fix it, you could just remove any whitespace around it:
<img src="x.gif" style="border: 0;" width="5" height="5">
Note that giving a zero-wide border a color and style doesn't make sense, so I removed it from the image's style as well.
This worked for me across the latest browsers I tested on including IE9
<a href="#" style="font-size:0;text-decoration:none;">
<img src="x.png" style="border:1px red solid;">
</a>
However while it looked pretty close in IE6/7 they produced a weird artefact on the bottom let corner of the border. I had to mimic the look in IE6/7 by cheating the border with background-color and padding. I also had to give the A element "layout" using zoom:1 to get it to behave (and loose some extra padding).
<a href="#" style="font-size:0;text-decoration:none;background-color:red;padding:1px;zoom:1;">
<img src="x.png" style="border:none">
</a>
Annoyingly this didn't work with the "Standards" browsers so you'd have to use conditional comments and target low versions of IE with their own styles if you can't live with the artefact.