For some reason I have a tiny horizontal line to the bottom right of each of my social media images I've placed on a header on my website. I've tried to find an explanation on why they appear and more importantly, how to hide them. Does anyone know how to remove them? Thank you very much.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title> Chilun</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style type="text/css">
#font-face /* support for browsers & IE v10 onwards*/
{font-family:homefont; src: url("font.ttf");}
{font-family:headerfont; src: url("playball.ttf");}
body {background:url('img/mybackground3.jpg') no-repeat center center fixed;}
<!-- Make Header Sticky -->
#header_container {background:#00E5EE; border:0px solid #666; height:70px; left:0; position:fixed; width:100%; top:0;}
#header{padding: 0.3em 0; border-bottom: 0px; overflow: hidden; zoom: 1; line-height:0px; margin:0 auto; width:940px; text-align:right;display:inline-block; float:right;vertical-align:bottom;}
#wrapper{width:900px;margin:0 auto;}
a{color:#444;}
.logo{margin-left:600px;margin-top:100px;background:#fff;padding:10px;}
.bigtitle{font-family: homefont; font-size:120px; text-align:center; margin-top:200px;}
.header{top:100%; left:50%; font-family: headerfont; font-size:20px; color:#FFFFFF; font-style:italic; padding-top:0px; padding-bottom:0px; padding-right:20px; padding-left:0px;}
</style>
</head>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header"><p class="header"> Follow me on:
<a href="https://www.facebook.com/chilunliuTheBOSSE"><img src="/img/facebook-lnk.gif" alt="View my Facebook Profile" width="40" height="40" border="0">
<a href="https://plus.google.com/u/0/+chilunliu/posts/p/pub"><img src="/img/googleplus-lnk.gif" alt="View my Google Plus Profile" width="40" height="40" border="0">
<a style="margin:0; href="http://www.linkedin.com/pub/chilun-liu/1b/297/416"; View my Linkedin Profile </a><img src="/img/linkedin-lnk.gif" width="40" height="40">
<a style="margin:0; href=""; Email me </a><img src="/img/email-lnk.gif" width="40" height="40">
<a style="margin:0; href="http://www.youtube.com/user/chilunliu"; View my Youtube Channel</a><img src="/img/youtube-lnk.gif" width="40" height="40">
</div>
</p>
</div>
<!-- END: Sticky Header -->
<div id="wrapper">
<h2 class="bigtitle">
<p>
Chilun
Liu
</p>
</h2>
</div>
</body>
</html>
You are missing all of the </a> closing tags...
<a style="margin:0;" href="http://www.linkedin.com/pub/chilun-liu/1b/297/416"> View my Linkedin Profile</a> <img src="/img/linkedin-lnk.gif" width="40" height="40">
<a style="margin:0;" href=""> Email me </a><img src="/img/email-lnk.gif" width="40" height="40">
<a style="margin:0;" href="http://www.youtube.com/user/chilunliu"> View my Youtube Channel</a><img src="/img/youtube-lnk.gif" width="40" height="40">
this is how your a tags should be closed
Next what all the others says about closing the <a> tags with </a>. You need to set this in your css. I had the same problem and text-decoration: none; was the solution for me.
Css
a { text-decoration: none};
Check the changed tag.
<a style="margin:0;" href="http://www.linkedin.com/pub/chilun-liu/1b/297/416"> View my Linkedin Profile </a>
<img src="/img/linkedin-lnk.gif" width="40" height="40">
<a style="margin:0;" href=""> Email me </a>
<img src="/img/email-lnk.gif" width="40" height="40">
<a style="margin:0;" href="http://www.youtube.com/user/chilunliu"> View my Youtube Channel</a><img src="/img/youtube-lnk.gif" width="40" height="40">
Below is the result of the tag and there is no underline :)
View my Linkedin Profile
Email me
View my Youtube Channel
Hope this helps.
Related
I am trying to create an email signature using html and an image I designed in Photoshop. I have sliced the image in PS and saved the slices out onto my PC. I now want to add links to certain slices and have managed to do this but the code is very messy and poor so I know that there is a better way to do it. I have attached the code below.
The links are not the actual links and are just placeholders for now. I also know that I need to save the images externally and will get round to it but just want to try and get the code sorted for now. I also understand that the image size is massive for an email signature so can I just add a "max-width" and "max-height" to the code to size it down or do I have to individually change all the sizes of each slice?
Finally, will this a spliced html image display well as an email signature or, because there are so many images attached to it, will it just go straight into spam?
<!DOCTYPE html>
<html>
<style>
div {
position: absolute;
}
</style>
<head></head>
<body>
<a href="" />
<div style="background-image:url('img/img1.jpg'); left:0px; top:0px; width:2000px; height:122px"></div>
<a href="" />
<div style="background-image:url('img/img2.jpg'); left:0px; top:122px; width:124px; height:222px"></div>
<a href="https://www.linkedin.com" />
<div style="background-image:url('img/img3.jpg'); left:124px; top:122px; width:866px; height:198px"></div>
<a href="" />
<div style="background-image:url('img/img4.jpg'); left:990px; top:122px; width:1010px; height:102px"></div>
<a href="" />
<div style="background-image:url('img/img5.jpg'); left:990px; top:224px; width:246px; height:576px"></div>
<a href="https://www.bing.com" />
<div style="background-image:url('img/img6.jpg'); left:1236px; top:224px; width:630px; height:120px"></div>
<a href="" />
<div style="background-image:url('img/img7.jpg'); left:1866px; top:224px; width:134px; height:576px"></div>
<a href="" />
<div style="background-image:url('img/img8.jpg'); left:124px; top:320px; width:866px; height:24px"></div>
<a href="" />
<div style="background-image:url('img/img9.jpg'); left:0px; top:344px; width:122px; height:456px"></div>
<a href="https://www.google.com" />
<div style="background-image:url('img/img10.jpg'); left:122px; top:344px; width:540px; height:150px"></div>
<a href="" />
<div style="background-image:url('img/img11.jpg'); left:662px; top:344px; width:328px; height:456px"></div>
<a href="" />
<div style="background-image:url('img/img12.jpg'); left:1236px; top:344px; width:630px; height:42px"></div>
<a href="" />
<div style="background-image:url('img/img13.jpg'); left:1236px; top:386px; width:48px; height:414px"></div>
<a href="https://www.bing.com" />
<div style="background-image:url('img/img14.jpg'); left:1284px; top:386px; width:482px; height:56px"></div>
<a href="" />
<div style="background-image:url('img/img15.jpg'); left:1766px; top:386px; width:100px; height:414px"></div>
<a href="" />
<div style="background-image:url('img/img16.jpg'); left:1284px; top:442px; width:482px; height:42px"></div>
<a href="" />
<div style="background-image:url('img/img17.jpg'); left:1284px; top:484px; width:62px; height:316px"></div>
<a href="https://www.linkedin.com" />
<div style="background-image:url('img/img18.jpg'); left:1346px; top:484px; width:94px; height:90px"></div>
<a href="https://www.facebook.com" />
<div style="background-image:url('img/img19.jpg'); left:1440px; top:484px; width:60px; height:82px"></div>
<a href="https://www.twitter.com" />
<div style="background-image:url('img/img20.jpg'); left:1500px; top:484px; width:94px; height:90px"></div>
<a href="https://www.instagram.com" />
<div style="background-image:url('img/img21.jpg'); left:1594px; top:484px; width:92px; height:82px"></div>
<a href="" />
<div style="background-image:url('img/img22.jpg'); left:1686px; top:484px; width:80px; height:316px"></div>
<a href="" />
<div style="background-image:url('img/img23.jpg'); left:122px; top:494px; width:540px; height:30px"></div>
<a href="" />
<div style="background-image:url('img/img24.jpg'); left:122px; top:524px; width:2px; height:88px"></div>
<a href="https://www.google.com" />
<div style="background-image:url('img/img25.jpg'); left:124px; top:524px; width:418px; height:62px"></div>
<a href="" />
<div style="background-image:url('img/img26.jpg'); left:542px; top:524px; width:120px; height:276px"></div>
<a href="" />
<div style="background-image:url('img/img27.jpg'); left:1440px; top:566px; width:60px; height:234px"></div>
<a href="" />
<div style="background-image:url('img/img28.jpg'); left:1594px; top:566px; width:92px; height:234px"></div>
<a href="" />
<div style="background-image:url('img/img29.jpg'); left:1346px; top:574px; width:94px; height:226px"></div>
<a href="" />
<div style="background-image:url('img/img30.jpg'); left:1500px; top:574px; width:94px; height:226px"></div>
<a href="" />
<div style="background-image:url('img/img31.jpg'); left:124px; top:586px; width:418px; height:26px"></div>
<a href="https://www.google.com" />
<div style="background-image:url('img/img32.jpg'); left:122px; top:612px; width:406px; height:62px"></div>
<a href="" />
<div style="background-image:url('img/img33.jpg'); left:528px; top:612px; width:14px; height:188px"></div>
<a href="" />
<div style="background-image:url('img/img34.jpg'); left:122px; top:674px; width:406px; height:126px"></div>
</body>
</html>
Email is not web! Absolute positioning is an advanced trick that requires lots of hacks to work, and even <div>s are problematic, for Outlooks. Background images are also very tricky (there are plenty of answers on SO about these things individually).
Nobody knows all the spam rules, because otherwise people would subvert them, however, having so many links at the bottom of your message could easily be considered spammy. It's also risky because it's not normal. So I would advise against this method.
You will want to produce a HTML table, with <img>s (or just one image). However, best practice is to write out text in HTML, rather than have it in the image. I can't see the image so I can't give you sample code, other than something generic for a scalable image:
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#">
<img src="https://via.placeholder.com/600x200" width="600" style="max-width:100%;height:auto;" />
</a>
</td>
</tr>
</table>
</body>
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;
}
I just started learning webdesign and I'm having this ongoing problem and I've posted a question about it before. Everything I tried didn't work but I made a few changes so I wanted to rephrase the question and add some more details.
I'm making a simple website for a Romanian artist and it will have an English version and a Romanian version (switching languages with tiny flags in the nav bar).
It's all written in WordPad, using just html and css, and all pages are in the same root folder. I have several html files and one css file (so it's an external file), which is linked in the head of each page. I have English versions and Romanian versions and they're all linked accordingly from the navigation.
Now, my issue is that the CSS will only work on the main English page and refuses to on any of the others, no matter which language, despite all of them having the same head, header and footer structure.
I tried Firefox and Chrome and it's the same story.
I clicked on "Page Source" on all the pages when opened in a browser, corrected any errors showing up, and the link to the css and all pages works when I click it.
I initially had several CSS files, one for each html file, but I deleted them except for one (I misunderstood the process initially and didn't realize they can all have the same css file). So now there is only one CSS file in the root folder "Style.css".
All html files are saved in "Unicode" encoding.
Except for the modified words, this is the exact css, as well as html structure of the main English page (on which the CSS works):
h1 {
display: inline-block;
font-family: Tahoma;
}
nav {
display: inline-block;
float: right;
font-family: Tahoma;
}
address {
float: right;
}
article.figures figure {
display: inline-block;
float: left;
}
aside {
float: right;
Font-family: Verdana;
}
footer {
color: grey;
font-family: Tahoma;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Name</title>
<LINK rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="description" content="Name, visual artist">
<meta name="keywords" content="Name, visual artist, abstract, painting, fine art">
<meta name="author" content="Me">
</head>
<body>
<header>
<img src="images\paint logo.jpg" width="150" height="110" alt="artists logo">
<h1>Name </h1>
<nav>
<a href=///C:/Users/.../main page in English.html>Galleries</a>
<a href=file:///C:/Users/.../News.html>News</a>
<a href=file:///C:/Users/.../About.html>About</a>
Shop
<a href="file:///C:/Users/.../webpageinRomanian.html">
<img src="images\romanian flag.jpg" width="20" height="15" alt="Romanian">
</a>
</nav>
</header>
<address>email</address>
<article class="figures">
<figure>
<img src="images\painting.jpg" width="335" height="325" alt="painting">
<figcaption>Paintings from 2010 - 2015</figcaption>
</figure>
<figure>
<img src="images\2.jpg" width="335" height="325" alt="painting 2">
<figcaption>2009 - 2000</figcaption>
</figure>
<figure>
<img src="images\3.jpg" width="335" height="325" alt="painting 3">
<figcaption>1990 - 1999</figcaption>
</figure>
</article>
<footer>copyright Name
<br>
<A HREF="https://www.facebook./...">
<IMG SRC="images/fb logo.png" width="30" height="30" ALT="Facebook">
</A>
<A HREF="https://www.behance....">
<IMG SRC="images/behance logo.png" width="30" height="30" ALT="Behance">
</A>
<br>Webdesign by me
</footer>
</body>
</html>
This is a page on which the same CSS doesn't work:
h1 {
display: inline-block;
font-family: Tahoma;
}
nav {
display: inline-block;
float: right;
font-family: Tahoma;
}
address {
float: right;
}
article.figures figure {
display: inline-block;
float: left;
}
aside {
float: right;
Font-family: Verdana;
}
footer {
color: grey;
font-family: Tahoma;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Name News</title>
<LINK rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="description" content="Name, visual artist">
<meta name="keywords" content="Name, visual artist, abstract, painting, fine art">
<meta name="author" content="Me">
</head>
<body>
<header>
<img src="images\paint logo.jpg" width="150" height="110" alt="artists logo">
<h1>Name </h1>
<nav>
<a href=///C:/Users/.../main page in English.html>Galleries</a>
<a href=file:///C:/Users/.../News.html>News</a>
<a href=file:///C:/Users/.../About.html>About</a>
Shop
<a href="file:///C:/Users/.../webpageinRomanian.html">
<img src="images\romanian flag.jpg" width="20" height="15" alt="Romanian">
</a>
</nav>
</header>
<address>email</address>
<h2>What's New</h2>
<h3>Upcoming exhibitions:</h3>
<ul>
<li>July 2016</li>
<li>October 2016</li>
</ul>
<footer>copyright Name
<br>
<A HREF="https://www.facebook./...">
<IMG SRC="images/fb logo.png" width="30" height="30" ALT="Facebook">
</A>
<A HREF="https://www.behance....">
<IMG SRC="images/behance logo.png" width="30" height="30" ALT="Behance">
</A>
<br>Webdesign by me
</footer>
</body>
</html>
Which might work on this website, but I swear, it won't work in my browsers.
It's driving me nuts.
I'd be extremely grateful for any help!
EDIT:
This is what shows up in the developers console for the 'News' page:
And this is the root folder:
Try this inside your <head>
Source: w3schools
<base href="http://www.yourwebsite/" target="_blank">
Well it is working for me... make sure that the html and css files actually are in the same folder
/folder
--thing.html
--other.html
--style.css
And as pointed out in comment don't use c:/ to referer to files
Okay, so I and some other people are build a site in webplus X5, and when we open the html in IE 10 (Chrome seems to not be opening lately, but thats another problem) we get this:
And, this is what that page is in webplus.
HTML code as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Generator" content="Serif WebPlus X5">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<title>Home</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style type="text/css">
body {margin: 0px; padding: 0px;}
.Artistic-Body-C
{
font-family:"Arial Black", sans-serif; font-weight:700; text-decoration:underline; font-size:54.0px; line-height:1.41em;
}
.Artistic-Body-C-C0
{
font-family:"Arial Black", sans-serif; font-weight:700; font-size:54.0px; line-height:1.41em;
}
.Artistic-Body-C-C1
{
font-family:"Arial Black", sans-serif; font-weight:700; text-decoration:underline; font-size:32.0px; line-height:1.41em;
}
.Body-C
{
font-family:"Arial Black", sans-serif; font-size:27.0px; line-height:1.41em;
}
.Body-C-C0
{
font-family:"Arial Black", sans-serif; font-size:15.0px; line-height:1.47em;
}
.Artistic-Body-C-C2
{
font-family:"Arial Black", sans-serif; color:#ffffff; font-size:19.0px; line-height:1.42em;
}
.Body-C-C1
{
font-family:"Arial Black", sans-serif; color:#ffffff; font-size:16.0px; line-height:1.44em;
}
.Button1,.Button1:link,.Button1:visited{text-decoration:none;display:block;position:absolute;background-color:transparent;}
.Button1:focus{outline-style:none;}
.Button1 span,.Button1:link span,.Button1:visited span{color:#000000;font-family:"Arial Black",sans-serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:0px;top:0px;width:107px;height:20px;font-size:16px;display:block;position:absolute;cursor:pointer;}
.Button2,.Button2:link,.Button2:visited{text-decoration:none;display:block;position:absolute;background-color:transparent;}
.Button2:focus{outline-style:none;}
.Button2 span,.Button2:link span,.Button2:visited span{color:#5c7e13;font-family:"Arial Black",sans-serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:0px;top:0px;width:107px;height:20px;font-size:16px;display:block;position:absolute;cursor:pointer;}
.Button2:hover span{color:#000000;}
.Button2:active span{color:#000000;}
</style>
<script type="text/javascript" src="wpscripts/jspngfix.js"></script>
<link rel="stylesheet" href="wpscripts/wpstyles.css" type="text/css">
<script type="text/javascript">var blankSrc = "wpscripts/blank.gif";
</script>
</head>
<body text="#000000" style="background-color:#ffffff; text-align:center; height:900px;">
<div style="background-color:transparent;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:1440px;height:900px;">
<img src="wpimages/wp817e53a4_06.png" width="1440" height="900" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:0px;top:0px;">
<img src="wpimages/wpc73afde9_06.png" width="202" height="193" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:15px;top:13px;">
<div style="position:absolute;left:270px;top:17px;width:649px;height:76px;">
<div class="Wp-Artistic-Body-P">
<span class="Artistic-Body-C">S.N.A.K.E.S</span><span class="Artistic-Body-C-C0"> </span><span class="Artistic-Body-C-C1">Animal shelter</span></div>
</div>
<div id="txt_1" style="position:absolute;left:250px;top:202px;width:937px;height:590px;overflow:hidden;">
<p class="Wp-Body-P"><span class="Body-C">Here at S.N.A.K.E.S, (Serpent National Anti-Kruelty* Eviromental Shelter) we care
for those that are not typically considered as pets, in the form of snakes! Our slithery
friends are not what those that are faint-hearted consider pets, but those adventurous
souls out there may happily adopt on of our various serpents. Those people can look
here to donate and look at these snakes, as well as contact us, and apply to volunteer
as a snake carer.</span></p>
<p class="Wp-Body-P"><span class="Body-C">-To navigate, use the links on the left. Click the logo or the home button to return
here. There is various images along the<img src="wpimages/wp2f8a775f_06.png" width="920" height="900" border="0" onload="OnLoadPngFix()" title="" alt="" style="display:block;position:absolute;top:0px;left:0px;"> right: they are just images or funny snake-things
we have found.</span></p>
<p class="Wp-Body-P"><span class="Body-C-C0"><br></span></p>
<p class="Wp-Body-P"><span class="Body-C-C0">*Kruelty is spelt wrong on purpose, to allow the name to work.</span></p>
</div>
<img src="wpimages/wp82934362_05_06.jpg" width="265" height="166" border="0" alt="" style="position:absolute;left:1175px;top:0px;">
<form id="site_search_1" action="" onSubmit="return false;" style="position: absolute; top:212px; left:0px; width:250px; height:22px;margin: 0; padding: 0;">
<input id="site_search_1_input" name="site_search_1_input" onkeypress="if (event.keyCode==13) window.location.href='page4.html?site_search_results_1='+document.getElementById('site_search_1_input').value+'&depth=0';" style="width: 107px;" type="text"><div style="display: inline"><button onclick="window.location.href='page4.html?site_search_results_1='+document.getElementById('site_search_1_input').value+'&depth=0';" style="width: 133px;">Search this site!</button></div>
</form>
<img src="wpimages/wpa7694a4a.gif" width="267" height="151" border="0" alt="" style="position:absolute;left:1173px;top:166px;">
<img src="wpimages/wpccc61754_06.png" width="98" height="38" border="0" title="" alt="Home" onload="OnLoadPngFix()" style="position:absolute;left:251px;top:169px;">
<div style="position:absolute;left:267px;top:90px;width:601px;height:73px; background-image:url('wpimages/wpaff7835e_06.png');">
<span>Home</span>
<span>Volunteer</span>
<span>Donations</span>
<span>Contact us</span>
<span>Gallery</span>
</div>
<img src="wpimages/wp90a589a8_06.png" width="1440" height="101" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:0px;top:799px;">
<div style="position:absolute;left:7px;top:799px;width:185px;height:27px;">
<div class="Wp-Artistic-Body-P">
<span class="Artistic-Body-C-C2">Explore the site</span></div>
</div>
<map id="map0" name="map0">
<area shape="rect" coords="212,6,335,26" href="page6.html" alt="">
<area shape="rect" coords="86,5,206,25" href="page3.html" alt="">
<area shape="rect" coords="1,4,67,28" href="home page.html" alt="">
</map>
<img src="wpimages/wp70aa4b65_06.png" width="339" height="27" border="0" title="" alt="Donations" onload="OnLoadPngFix()" usemap="#map0" style="position:absolute;left:8px;top:836px;">
<map id="map1" name="map1">
<area shape="rect" coords="210,7,300,26" href="page9.html" alt="">
<area shape="rect" coords="0,3,128,26" href="page10.html" alt="">
</map>
<img src="wpimages/wpd689eff4_06.png" width="302" height="27" border="0" title="" alt="Gallery" onload="OnLoadPngFix()" usemap="#map1" style="position:absolute;left:8px;top:863px;">
<img src="wpimages/wp5533b116.gif" width="64" height="24" border="0" title="" alt="Home" style="position:absolute;left:9px;top:840px;">
<img src="wpimages/wp8183884b_06.png" width="326" height="55" border="0" title="" alt="Share this site" onload="OnLoadPngFix()" style="position:absolute;left:479px;top:797px;">
<img src="wpimages/wp2ce0a75d_06.png" width="47" height="47" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:478px;top:853px;">
<img src="wpimages/wpb26f87b1_06.png" width="51" height="51" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:535px;top:849px;">
<img src="wpimages/wp2f8a775f_06.png" width="48" height="47" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:593px;top:853px;">
<img src="wpimages/wp007bb409_06.png" width="48" height="48" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:648px;top:852px;">
<div id="txt_37" style="position:absolute;left:950px;top:799px;width:490px;height:101px;overflow:hidden;">
<p class="Wp-Body-P"><span class="Body-C-C1">All images Copyrighted by their rightful owners. The SNAKES logo is copyrighted to
SNAKES Animal shelter © 2015 The Facebook, Twitter, Google+ and Instagram logos are
property of their relevant companies.</span></p>
</div>
</div>
</body>
</html>
(I Would add the 'webplus' tag, but there is not one :(
-EDITS-
Edit 1 - Since the ghost copy matches the dimensions of the original, i tried modifying th original. The result of this was a pixelated version of my problem.
-Edit 2- I have worked out it seems to be related to the text box. We don't know why, but that text seems to be causing it. Will tinker with it 16/10/15
Alright, so I know this is not a universal fix ( Or even a fix) but I found out that, for some bizarre reason, the text:
Here at S.N.A.K.E.S, (Serpent National Anti-Kruelty* Eviromental Shelter) we care
for those that are not typically considered as pets, in the form of snakes! Our slithery
friends are not what those that are faint-hearted consider pets, but those adventurous
souls out there may happily adopt on of our various serpents. Those people can look
here to donate and look at these snakes, as well as contact us, and apply to volunteer
as a snake carer.
Plus The font, ariel black, plus the text size, makes it happen. upon removing and re-adding the text with a larger font, it disappeared! Yay, no more scaring people at 8.30 in the morning.
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">