5 replies [Last post]
Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 1 year 51 weeks ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello

I have a short 'lost password' form with one input box for an email address and a text-link that uses CSS (and not JS). The 'submit' link works but it is installed inside the email field itself (please see attached screenshot) and I just can't seem to remove it and place it under the email field.

I have some CSS in my HTML tags apart from an external style-sheet (which contains some superfluous script which doesn't interfere with my HTML page). In my HTML tags I have this:

<style>
.buttonLink {
    border: 0;
    background: transparent;
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}
.buttonLink:hover {
    color: red;
}
</style>

and in my HTML I have this simple line:

<input type="submit" name="Submit" value="Submit" class="buttonLink" />

How would I remove the link from inside the input field and place it underneath that field, please? I know I need to add something to the input field, but I have tried all manner of things! I even messed about with JS until I was advised not to as some users have JS disabled.

Thank you.

Blueie

AttachmentSize
submit_image.jpg17.56 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Confusion reigns

I'm a little confused. Would you please post the entire form's markup and all applicable css?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 1 year 51 weeks ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello Gary Thank you for

Hello Gary

Thank you for getting back to me.

I have attached the style.css file and the password.asp file as text files. The actual page is here:

http://www.bayingwolf.com/Dima_Login/forgot/password.asp

I have managed to remove the link that was inside the input field but, despite my efforts, I can't get the same text-link to appear underneath that input field! I suspect something is interfering with it in my external style sheet and I have tried amending it - to no avail.

Thanks for any help.

Blue

AttachmentSize
password.txt 1.13 KB
style.txt 1.64 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Is this what you want?

I got a 404 error on the web-fonts.

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test Doc</title>
  <style type="text/css">
/*<![CDATA[*/
 
  @font-face { 
    font-family: "Droid Sans"; 
    src: url('http://www.bayingwolf.com/Dima_Login/fonts/DroidSans-webfont.eot'); 
    src: url('http://www.bayingwolf.com/Dima_Login/fonts/DroidSans-webfont.woff'); 
    } 
 
  @font-face { 
    font-family: "Jenna Sue";
    src: url('http://www.bayingwolf.com/Dima_Login/fonts/JennaSue-webfont.eot'); 
    } 
 
  body {
  background: white url("http://www.bayingwolf.com/Dima_Login/forgot/images/stripe.png") repeat;
    color: black;
    font: normal 100%/1.25 sans-serif;
    margin: 0;
    padding: 1.25em;
    }
 
  p {
    font-size: 1em;
    margin: 1.25em 0 0;
    }
 
  p+p {
    margin: 0;
    }
 
  h1 {
    font: bold 2.625em 'Jenna Sue', arial, sans-serif;
    color: #bd2cbb;
    }
 
  form {
    background-color: white;
    color: black;
    margin: 1.25em auto;
    padding: 1em 0 2em;
    text-align: center;
    width: 30em;
    }
 
  label {
    font: normal .875em 'Droid Sans', arial, sans-serif;
    }
 
  input[type=submit] {
    color: blue;
    }
 
  input[type=submit]:hover {
    color: red;
    }
 
 
  /*]]>*/
  </style>
</head>
 
<body>
  <form action="confirm.asp"
        method="post"
        id="password">
    <h1>Lost Password?</h1>
 
    <p><label for="email">Please enter a valid Email address</label></p>
 
    <p><input id="email"
           name="email"
           type="email">
       <input type="submit"
           value="GO"></p>
  </form>
</body>
</html>

Notice I did not include all those superfluous div elements. Forms and headings and paragraphs are perfectly good, semantic containers.

Also, the *{...} bit will just cause trouble, especially with form controls, and is of zero benefit. For an overview of the whole reset silliness, see Global resets considered harmful. For some odd reason there are still soi-disant experts pushing this insanity.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 1 year 51 weeks ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Thank you!!!!!!! :)

Hello Gary

Thank you for that. You have managed to compress the equivalent of about 5 pages of a Word document into half-a-page. I wasn't aware that it was possible to use the way you have it, namely:

<form action="confirm.asp"
        method="post"
        id="password">
    <h1>Lost Password?</h1>
 
    <p><label for="email">Please enter a valid Email address</label></p>
 
    <p><input id="email"
           name="email"
           type="email">
       <input type="submit"
           value="GO"></p>
  </form>

so thanks again. All I have done is add the bottom line here to keep in with the style of other pages:

@font-face { 
  font-family: Jenna Sue; 
    src: url('../fonts/JennaSue-webfont.eot'); 
    src: local("Jenna Sue"), url('../fonts/JennaSue-webfont.ttf'); 
} 

I am grateful for what you have done; if I wanted, in the future, to have a text-link that said 'Go' or 'Request Password' or something like that, is that possible without using JavaScript?

Cheers!

Blue

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 6 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Take a look at this HTML and

Take a look at this HTML and CSS based login with password resetter.

HTML code

CSS code

Hope this helped ya out Wink

Check Maximum Webdesign for your online solutions