SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    email button in html4

    From all I've read (and experienced) about adding an email button to a page in html 4.01 without resorting to javascript is not that easy to do for mulitple platforms.
    I've currently got a simple button that is not only ugly, it is also buggy; it works in one browser but not in others.

    I can live with the ugly, but not with the buggy.
    What is the most reliable way to make life easy for vistiors using a variety of browers and operating systems, to send emails?

  2. #2
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would be great if you shared the link or code to know better of what you have used or what you are looking for!

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    What I used in my old style was buggy, so won't be using that again.

    What I am looking for is fairly simple:
    1st choice would be anything that works reliably over multi platform, using only html 4.01 code, and not bothered about looks.
    2nd choice would be something that involves more than straight html code, but sill reliable over multiplatform.
    Functionality is king, looks are a very minor bonus.

    I have so far managed to get my testpage to look virtually identical for Chrome, Firefox, IE, and Opera under Windows, as well as Safari under Apple, anywhere in display range of 240x200 to 2000x1400 and zoom from 25% to 300%. The text wraps slightly differently when zooming, but I can live with that.

    Now I am looking for a solution in line with this, hence the need for multiplatform and large display range compatibility, with low demands for looks; if it works well, I'm happy.

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,357
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    The easiest way to add an e-mail link is to use mailto: e.g. <a href="mailto:enquiries@mydomain.co.uk">enquiries@mydomain.co.uk</a>. When the link is clicked, it will open the visitor's e-mail client. I usually run the address through this encoder, to help hide it from spambots. It's not foolproof, but it certainly helps.

    Alternatively, you can use a contact form - or both. A contact form can be used by somebody who may not be at their own computer and therefore not able to send from their own e-mail. Personally, I dislike using contact forms, so I would always give an e-mail address as well.

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    How very odd. That is the method I used in the "old style" lay out, but when I test it in different browsers, it ONLY works when the page is viewed in Opera.
    When I click the button in Firefox, IE or Chrome: zippo nada di nothing.
    I put this down to my most commonly used browser is Opera, which I also use for computer based email. I'll have to do some testing on other computers to see if it works in mutiple browsers on those.
    Gawd, this is hard work.

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,357
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Do you have a link to a page where we can take a look at it for you?

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Do you have a link to a page where we can take a look at it for you?
    This is my test page with adapted button for email.

    http://www.boiler-breakdown-repair-l...st-london.html

    It looks a bit funny as I have not worked out what the best way is to position the button in line with the phone numbers and directly on the left. I have enlarged that bit with a "span-id" command, which is probably not the most sophisticated way of doing it.

    Like I mentioned before: testpage for experiment in rather steep learning curve.

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,357
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Well, it works OK for me in Firefox and Chromium, although neither shows a "hand" cursor when I move over the button, which I found a bit disconcerting. Personally, I'd abandon all the <input type="button"> stuff and stick to a simple link, as per my example above. If you want, you can use an image for the link, with suitable alt text in case images are off. e.g.
    Code:
    <a href="mailto:enquiries@mydomain.co.uk"><img source="images/email.gif" width="90" height="30" "alt="send question by e-mail"></a>
    I would also recommend showing your e-mail address, as well as using the mailto: convention. As far as I know (and I may very well be wrong) mailto: does not work with browser-based web mail, so anybody using that would need to see your actual e-mail address to contact you.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    To add to what has been said, you haven't explained what you mean by an "email button". There are different ways to understand this. It may just be a link (like TechnoBear showed) styled to suit your design, or the standard <input> or <button> elements in HTML.

    Show us a sample of your code so we can understand better what you mean.

  10. #10
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    More a matter of "what it should be" than "what code there is currently".

    What I want to achieve, is for any viewer no matter how web-savvy (including not at all), to click on a button and go straight to their email screen.
    Personally, I don't care which code is used, as long as there is a recogniseable button that says something like:"click here to send email". Text on the button is better than near it, as different screensizes and zoomsettings will wrap in differrent ways and the "email notice" could be removed from the button if it is not "in" the button.

    This is what there is now.

    <p> <input style="BACKGROUND-IMAGE: url(button200F.gif); text-align: center; BACKGROUND-COLOR: white; WIDTH: 200px; HEIGHT: 50px; font-size: 1.8em; CURSOR: hand" onclick="window.location.href= ('mailto:info@boiler-breakdown-repair-london.co.uk')" value="email question" type="button" name="button">

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    It would be better the use the code that TechnoBear gave, as this is the job for a standard link. That's also the easiest way to make it look the same in all browsers.

  12. #12
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    This is probably repetitious but maybe it will help:

    1) WHY are you choosing to use a BUTTON/INPUT to send an email? Do you need some sort of additonal .js action?
    If the answer is NO then you can get the same functionality from a link,as TB suggested.
    2)"But I wanted to look like...."
    THIS is where CSS comes in.. give the LINK a class, lets say "button" and define its look in the CSS of your document

    Code:
    	a.button {
    		font-size: 90%;
    		color:#000;
    		text-decoration:none;
      		padding:.3em 1em;
    		border:1px solid #555;
    		text-align:center;
    		background: #eee;
    		font-family: sans-serif;
    		text-shadow:1px 1px 0 #ccc;
    
    		-moz-border-radius:1em;
    		-webkit-border-radius:1em;
    		-o-border-radius:1em;
    		border-radius:1em;
    		
    		box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff,  0 0 2px 1px #aaa ; 
    		-webkit-box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff,  0 0 2px 1px #aaa ; 
    		-moz-box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff,  0 0 2px 1px #aaa ; 
    	}
    
    <a href="#" class="button" >Email A Question</a>
    hope that helps

  13. #13
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Many thanks y'all.
    I've applied the suggested changes, and shall now spend some time on finding out the how and why of the working of those changes. in the hopes of one day ( in the not TOO distant future ) being able to do something all by myself without having to consult 4 different books followed by asking you folks to explain that what is still a mystery.
    Rewriting the old pages that kind of worked, but were a complete mess in webdesign terms into some that works properly, consistantly and over all common platforms, proves a lot harder than I though. If it wasn't for the understanding of the most powerful force known to mankind, I'd probably have given up by now.

  14. #14
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,357
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by benbob View Post
    Rewriting the old pages that kind of worked, but were a complete mess in webdesign terms into some that works properly, consistantly and over all common platforms, proves a lot harder than I though.
    The first time I rewrote a site (from somebody else's code) I was amazed how much harder I found it than starting from scratch myself. So the second time, I did just that - ignored the existing version and started from scratch. Fortunately, both were small sites and easily manageable.

    But hang on in there. One of these days, everything will start falling into place and you'll be glad you persevered.

  15. #15
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    ...hang on in there. One of these days, everything will start falling into place and you'll be glad you persevered.
    Yes, I will get there, and the help I've found on this forum is a significant contribution to that. My site was originally built by somebody else on one of these diy template suppling "host" companies. Getting more and more dissatisfied, I took it over myself about a year and a half ago, but knew only the very basics about webdesign. I was desparate to keep the site, as it ranked quite well and brought in enough work to survive. This lead me to improve things rather than start from scratch. I read books, online info, visited forums and with a lot of trial and error managed to get rid of all the template rubbish and make it into something half decent.
    I have very spefic ideas about how I want my site to look, which are rather different than the mainstream things. I am now nearly at a point where my testpage is good enough for the time being, at which point I will alter all my pages to that format. Once that is done, I will carry on learning and making it better.
    In doing this, I apply the principle of "compound interest" that according to Einstein is the most powerful force known to mankind. My aim is to upgrade my knowledge by at least 1% per week. May not seem a lot, but it guarantees an increase of at least 3 times in 2 years, 5 times in 3, and 8 times in 4. Chuck in a bit extra when I have some spare time, and you can double those figures. Following this principle, I will have 15 times more than basic knowledge by xmas 2014. Should be enough for some pretty nice results.

  16. #16
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pstpl View Post
    It would be great if you shared the link or code to know better of what you have used or what you are looking for!
    Link in post #7
    The buttons are now working, but that is for 90% due to ready code being given here (and most gratefully and graciously received), and for only 10% by my increased understanding.
    I have yet to find a book or other source that explains the more intricate aspects of CSS in a format that makes sense to me. The books I have found so far, are either (to me) incomprehensible listings of code, or endless explanatory waffle that does nothing but confuse me more.
    I've looked at numerous books and other sources, including “previews” of some promoted here on Sitepoint, but yet to find one that suits me.
    Any and all suggestions for further learning materials very welcome.

  17. #17
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,357
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by benbob View Post
    Any and all suggestions for further learning materials very welcome.
    I have a number of books I've found very helpful. One I particularly enjoyed was "Web Standards Solutions" by Dan Cederholm. I like his writing style.

  18. #18
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    1) templates suck. Pay a professional or learning yourself always provides better results.

    2) Remember that web design is two languages, not one .. Semantic HTML and CSS


    3) As a beginner I found the book "Transcending CSS" by Andy Clake.

    4) Speaking of watching your code I have the following suggestions:

    a) Get rid of the div around the UL .. it's redundant as a UL is essentially a DIV ( block elements ) for LIs ( ULs and OLs can only contain LIs)
    b) It's a good idea to wrap lose IMGs ( IMGs not in Ps or DIVs) in Ps or DIVs
    c) You have a stray <p> tag right before that DIV (P tags cannot contain block elements such as DIVs or ULs) Besides you should be careful to properly close all tags! This is VERY VERY IMPORTANT




    Your new, cleaned up, code:
    Code:
     a{display:inline;} /* for IE;*/
    .logo{float: right; margin: 59px 9px 96px 3em;}
    .nav {float:left ;  margin: 59px 2em 52px 0; padding:0; list-style:none; }
    .nav  li{padding:0 0 1em 0;  max-width:300px;}
    .nav a, a.button {
    		display:inline-block;
    		text-align:center;
    		font-size: 90%;
    		color:#000;
    		text-decoration:none;
      		padding:.3em 1em;
    		border:1px solid #555;
    		background: #eee;
    		font-family: sans-serif;
    		text-shadow:1px 1px 0 #ccc;
    margin:0;
    		-moz-border-radius:1em;
    		-webkit-border-radius:1em;
    		-o-border-radius:1em;
    		border-radius:1em;
    		
    		box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff,  0 0 2px 1px #aaa ; 
    		-webkit-box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff,  0 0 2px 1px #aaa ; 
    		-moz-box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff,  0 0 2px 1px #aaa ; 
    }
    
    
    <div class="logo"><img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="200" height="200" ></div>
    <ul class="nav">
    <li><a href="index.html">homepage</a></li>
    <li><a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-waterleak-repairs-southeast-london.html">waterleaks</a></li>
    <li><a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-gas-leak-repairs-bromley-south-east-london.html">gasleaks</a></li>
    <li><a href="mailto:info@boiler-breakdown-repair-london.co.uk">Email A Question</a></li>
    </ul>
    Replaces
    Code:
    <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="200" height="200"  style="float: right; margin: 59px 9px 96px 99px; ">
    ...
    </ul>
    </div>
    Hope that helps

  19. #19
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    1) templates suck. Pay a professional or learning yourself always provides better results...
    Yes, I fully agree with the sentiment. I must admit that I am somewhat puzzled as to what the remark aims at, as I don't use templates. I am currently putting a fair effort into learning html and css use properly.
    Quote Originally Posted by dresden_phoenix View Post
    ...2) Remember that web design is two languages, not one .. Semantic HTML and CSS ...
    Ah, semantic html. I've heard about but would be lying if I said I have more than the vagues notion what it means.
    Quote Originally Posted by dresden_phoenix View Post
    ...3) As a beginner I found the book "Transcending CSS" by Andy Clake. ...
    I shall look that one up.
    Quote Originally Posted by dresden_phoenix View Post
    ...4) Speaking of watching your code I have the following suggestions:

    a) Get rid of the div around the UL .. it's redundant as a UL is essentially a DIV ( block elements ) for LIs ( ULs and OLs can only contain LIs)
    b) It's a good idea to wrap lose IMGs ( IMGs not in Ps or DIVs) in Ps or DIVs
    c) You have a stray <p> tag right before that DIV (P tags cannot contain block elements such as DIVs or ULs) Besides you should be careful to properly close all tags! This is VERY VERY IMPORTANT...
    Again, I fully agree. The divs were only a temporary trial to get rid of a display problem with the buttons, and the stray p was a leftover from one on the countless alterations. When you are at my level of understanding, it is a damn site quicker to do it that way.
    I shall have a good look at your suggested changes, and see if I can work out how they work and what they do when I apply them



    Your new, cleaned up, code:
    Code:
     a{display:inline;} /* for IE;*/
    .logo{float: right; margin: 59px 9px 96px 3em;}
    .nav {float:left ;  margin: 59px 2em 52px 0; padding:0; list-style:none; }
    .nav  li{padding:0 0 1em 0;  max-width:300px;}
    .nav a, a.button {
    		display:inline-block;
    		text-align:center;
    		font-size: 90%;
    		color:#000;
    		text-decoration:none;
      		padding:.3em 1em;
    		border:1px solid #555;
    		background: #eee;
    		font-family: sans-serif;
    		text-shadow:1px 1px 0 #ccc;
    margin:0;
    		-moz-border-radius:1em;
    		-webkit-border-radius:1em;
    		-o-border-radius:1em;
    		border-radius:1em;
    		
    		box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff,  0 0 2px 1px #aaa ; 
    		-webkit-box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff,  0 0 2px 1px #aaa ; 
    		-moz-box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff,  0 0 2px 1px #aaa ; 
    }
    
    
    <div class="logo"><img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="200" height="200" ></div>
    <ul class="nav">
    <li><a href="index.html">homepage</a></li>
    <li><a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-waterleak-repairs-southeast-london.html">waterleaks</a></li>
    <li><a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-gas-leak-repairs-bromley-south-east-london.html">gasleaks</a></li>
    <li><a href="mailto:info@boiler-breakdown-repair-london.co.uk">Email A Question</a></li>
    </ul>
    Replaces
    Code:
    <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="200" height="200"  style="float: right; margin: 59px 9px 96px 99px; ">
    ...
    </ul>
    </div>
    Quote Originally Posted by dresden_phoenix View Post
    ...Hope that helps
    It most certainly does, many thanks.

  20. #20
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    1)
    Your new, cleaned up, code:
    Code:
     a{display:inline;} /* for IE;*/
    .logo{float: right; margin: 59px 9px 96px 3em;}
    .nav {float:left ;  margin: 59px 2em 52px 0; padding:0; list-style:none; }
    .nav  li{padding:0 0 1em 0;  max-width:300px;}
    .
    After going through the differences in the actual coding, I think I understand the reason for most of it. The one thing I don't get, is the significance of the "em" in this bit:
    " .nav li{padding:0 0 1em 0; max-width:300px;} "

    and the function/importance of this line:

    " a{display:inline;} /* for IE;*/"

    Can you shed any light on that?


    ps

    I validated my page, and the stray <p> was not a left over from editing, but a fundamental misconception on my part with regards of the functioning, use and correct nesting of divs and paragraphs. The attempt to correct it by simpy removing/rearranging p-tags failed consistently, and experimenting to get it right lead to correcting this flaw in my knowledge.
    A nice side effect of striving for correct coding by using validation.

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by benbob View Post
    one thing I don't get, is the significance of the "em" in this bit:
    " .nav li{padding:0 0 1em 0; max-width:300px;} "
    An em is a measurement similar to px, except that it is based on the size of the text rather than a specific number of pixels. As a very rough guide, 1em is around 16 px, though that will vary a lot. Another way to think of it is that it's the width of the letter "m".

    the function/importance of this line:

    " a{display:inline;} /* for IE;*/"
    It's a hack to help older versions of Internet Explorer.

  22. #22
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph. Do I understand it correctly that apart form 1 "em" being roughly 16px, there is not difference in the working i.e. if I subsitute 320 px by 20 em, the result will be pretty much the same?

  23. #23
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I like using EMs because in WEB DESIGN the end user has control over font size. In other word if grandma cant see she can press a button and poof the default size goers from 16px to 80px. If you set measurements in px in your css they stay that size, but EMs are relative to the current container font size, insuring the layout retains most of it's proportions regardless of the user's chosen font size.

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by benbob View Post
    Do I understand it correctly that apart form 1 "em" being roughly 16px, there is not difference in the working i.e. if I subsitute 320 px by 20 em, the result will be pretty much the same?
    To add to theabove, there are lots of informative threads about this around here, such as this one:

    http://www.sitepoint.com/forums/show...sibility/page7


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •