Non-web designer flailing....Can anyone please help me?!?

Hi there, fine web-designing folks. I'm not a web designer and I know barely enough about html code to be dangerous.

I'm trying to create an email signature in Thunderbird using the guidance of an online tutorial called "How to Create HTML Signatures in Thunderbird without Learning HTML." I'm using an image, then five lines of formatted text, then another image.
In order for it to look right, I need two spaces before each line of text (I used &nbsp&nbsp
but one of the lines is an email address hyperlink, and the spaces before the hyperlink are being underlined, which is no good.

I got the signature looking how I wanted it to, then used the feature in Thunderbird that converts it to html code, then copied and pasted the code into the email account settings signature field. I've attached a PDF of the result I'm getting, and the code (mostly Greek to me) is as follows: (Except that I added the &nbsp  myself.) Any help would be greatly appreciated!

<br>
<div class="moz-signature"><br>
  <div class="moz-signature"><br>
    <div class="moz-signature"><br>
      <div class="moz-signature"><br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <img alt=""
src="file:///C:/Users/Cheri/Desktop/Eric%20Email%20Signature/ProofFinal_html_3c1aef9d.png"
          height="25" width="130"><font style="font-size: 16pt" size="4"
          face="Candara"><small><br>
               &nbsp&nbsp;Eric Edscorn</small></font><font face="Candara,
          sans-serif"><font style="font-size: 15pt" size="4"><small><font
                face="Candara"><br>
                    &nbsp&nbsp;Captain</font><u> </u></small></font></font><u> </u><font
          color="#000080"><span lang="zxx"><br>
            <font size="4"><font face="Gentium Basic">   </font></font><u><a
                href="mailto:captain@myjustjs.com"><font face="Gentium
                  Basic"><font size="4"><small><span style="font-weight:
                        normal">&nbsp&nbsp;captain@myjustjs.com</span></small></font></font></a></u></span></font><small><font
            size="4" face="Cambria"><small><br>
                  &nbsp&nbsp;US Cell: +1 603 765 7781</small></font></small><font
          face="Cambria"><font size="4"><small><br>
                  &nbsp&nbsp;Boat Cell: +1 614 205 2840</small></font></font><br>
        <font face="Cambria"><font size="4"> <img alt=""
src="file:///C:/Users/Cheri/Desktop/Eric%20Email%20Signature/ProofFinal_html_m78349f13.gif"
              height="104" width="328"></font></font><br>
        <font face="Cambria"><font size="4"> </font></font> <br>
      </div>
    </div>
  </div>
</div>

Code (markup):

 

Use jsfiddle to work on your code: https://jsfiddle.net/vc75q7r8/1/

Make changes then click Run. Don't like it? Make changes again.

 

Hi there CluelessHack,

and a warm welcome to these forums.

Try using this simplified code...

<img style="margin-left:40px;" src="file:///C:/Users/Cheri/Desktop/Eric%20Email%20Signature/ProofFinal_html_3c1aef9d.png" alt="">
<div style="margin-left:40px;font:17px candara;text-indent:10px;">Eric Edscorn</div>
<div style="margin-left:40px;font:17px candara;text-indent:10px;">Captain</div>
<a style="display:inline-block;margin-left:40px;font:17px cambria;color:#4690e3;text-indent:0.6em;" href="mailto:captain@myjustjs.com">captain@myjustjs.com</a>
<div style="margin-left:40px;font:14px cambria;text-indent:10px;">US Cell: +1 603 765 7781</div>
<div style="margin-left:40px;font:14px cambria;text-indent:10px;">Boat Cell: +1 614 205 2840</div>
<img style="margin-left:40px;" src="file:///C:/Users/Cheri/Desktop/Eric%20Email%20Signature/ProofFinal_html_m78349f13.gif" alt="">

Code (markup):

coothead

 

@denis bayly -- that's REALLY not actually helping. E-mail clients are such utter dumbasses that many of them will ignore the style attribute, don't even know what CSS is -- or worse actively block it for "security" reasons -- and on the whole will fail MISERABLY at what's trying to be done if you try to do it the way you just did. For anything going into a HTML e-mail you have to pretend it's 1997 and that most of HTML 4 and all of CSS flat out doesn't exist. ANYONE telling you otherwise doesn't know what they are talking about... so say hello to worst of the worst "browser wars" era practices.

@CluelessHack -- first up thanks for being honest with us and coming right out to say "I don't know what I'm doing" at the start. SO many people will blindly post questions in a manner that makes you THINK they have some idea what they are doing, then get their knickers in a twist when you tell them exactly what's wrong.

First get rid of ALL style attributes, they usually will NOT be obeyed. You have a whole slew of empty tags in there for nothing, so those need to go too. I would probably have a BR+HR+BR at the start instead of the massive list of BR, and there is no legitimate reason in a HTML e-mail content or signature to use a DIV with an ID on it. Some mail clients will show borders around those images so you have to use the outdated border attribute (despite said attribute having zero business on any website written after 1997, welcome to the HELL that is e-mails), and lands sake plug in some alt text on those images

Your REAL problem though is the path to those images are a local file on the hard drive -- other people will not have access to YOUR harddrive so you need to have a website to host those images so OTHER people can see them! Hence those src attributes in your HTML need to be changed so that they point at a http address, not a file address!

So the markup I'd be aiming for would go something like this:

<br>
<hr>
<br>
<img
	src="/ProofFinal_html_3c1aef9d.png"
	alt="Just J's"
	height="25" width="130"
	border="0"
><br>
<font size="5" face="Candara">&nbsp;&nbsp;Eric Edscorn</font><br>
<font size="4">
	&nbsp;&nbsp;Captain<br>
	&nbsp;&nbsp;<a href="mailto:captain@myjustjs.com">captain@myjustjs.com</a><br>
</font>
<font size="3" face="Cambria">
&nbsp;&nbsp;US Cell: +1 603 765 7781<br>
&nbsp;&nbsp;Boat Cell: +1 614 205 2840<br>
</font>
<img
	src="/ProofFinal_html_m78349f13.gif"
	alt="A Yacht"
	height="104" width="328"
	border="0"
>

Code (markup):

Though dicking around changing the font-face so much looks somewhat unprofessional, and again you need to put those images on a website and use the URL to that website location as your img src="". Also YES, that greatly limits what you can do for "style" in your mail. Get used to it. If dicking around in a paint program or WYSIWYG for websites is utter and complete rubbish resulting in nothing but broken incompatible inaccessible websites, it's only a million times worse when it comes to e-mails.

Now, all that said... don't.... JUST DON'T. HTML in e-mails is often used as a trigger to see if a mail is spam or not. If it's sent as HTML and only HTML it has a pretty good shot at being flagged as spam, and being taken by the hand off to never-never land. Something's wrong, shut the light; heavy thoughts tonight, and they're not of Snow White... Dreams of war, dreams of liars, dreams of dragons fire, and the things that will bite!

HTML in e-mails as a whole are a broken, buggy, gibberish dead-end that is only used by people who don't know any better or hope to take advantage of people who, well... have the same failing. IF you are going to send HTML in a e-mail you don't do it from a mail client, you do it from a server so you can configure the mail as what's called "multipart" so you can also send a text-only version so it's not instantly flagged by spam and phishing filters as rubbish.

So, while the above code would have the most compatibility, I wouldn't waste time or effort on something that's going to make it likely that 15% or more of possible recipients won't see your mail unless they check their spam box.

 

Hi there deathshadow,

thank you for gently pointing out the error of my ways.

Unfortunately, I am often plagued by prolonged attacks of "Brain Farts".

coothead​

 

Who isn't... I'm dealing with a parkinsonism mated to after-effects of a stroke. Part of why I try to help people as much as I do is to get the information I have out to others BEFORE I lose it all.

Well, that and I suck at just sitting here with my thumb up my arse on doctors orders not to "work". It's just not in my makeup to do that.

 

Hi there deathshadow,

Well, let's hope that this forum, like others I know,
does not ban you before you finish your mission.

I, personally, have always enjoyed your entertaining 'Spiel'.
​

coothead

 

I highly doubt DP will ban @deathshadow - he's too entertaining, and too knowledgeable - it would be a loss/loss. And, of course, those of us that tend to spew hatred and cussing at approx the same speed as him find him... quite to our taste

 

If @deathshadow or @PoPSiCLe were to be banned, it better be for a damned good reason. I'd follow them to where they went next personally.

But honestly to even think that would happen is rather foolish. @deathshadow does not usually call people names, he typically says that what you are doing is stupid.

 

I prefer to use the term ignorant when directly applied to people -- it's not an insult to say someone is ignorant, it just means they didn't know -- which I'd ASSUME is why they're here.

I only go to the name calling (mouth breathing halfwit and so forth) when people who should know better do something ignorant... or when something people are choosing en-masse has as about as much basis in reality as creationism.

Stems from a business concept I learned in the '80's... attack the work, not the person. Stripping the work down and gutting the hell out of it to build it back up stronger is the only way anything improves.

Fake plastered on smiles, platitudes, and telling people everything is ok when it clearly isn't might be standard operating procedure these days, doesn't make it the least bit right or helpful -- no matter how many thin skinned wussies dive for the "if you can't say anything nice" cop-out.

 

Thank you, kind sirs, for your replies. I have a sick puppy emergency at the moment (literally a sick puppy, not a depraved individual) but when I get that taken care of I will try to tackle this again. I would have never dreamed it could be so complicated!