Mon, 2014-03-31 18:48
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
| Attachment | Size |
|---|---|
| submit_image.jpg | 17.56 KB |
Mon, 2014-03-31 21:30
#1
Confusion reigns
I'm a little confused. Would you please post the entire form's markup and all applicable css?
cheers,
gary
Mon, 2014-03-31 23:13
#2
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
| Attachment | Size |
|---|---|
| password.txt | 1.13 KB |
| style.txt | 1.64 KB |
Tue, 2014-04-01 01:34
#3
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
Tue, 2014-04-01 02:21
#4
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
Wed, 2014-04-02 10:53
#5
