Have the following searchbox image:
With the following code and css:
#searchcontainer {
margin: 40px 0 0 0;
}
.search {
float: right;
margin: 0;
padding: 0;
height: 21px;
width: 310px;
}
.search input,
.search button {
margin: 0;
padding: 0;
font-size: 0.9em;
color: #A7A9AC;
border: 0;
outline: none;
}
.search input.box {
margin: 0;
padding: 2px 5px 0 5px;
width:230px;
height: 19px;
background: #FFF url(images/search.gif) no-repeat top left;
}
.search input.btn {
margin: 0 0 0 -5px;
padding: 0;
width:70px;
height: 21px;
cursor:pointer;
cursor: hand; /* cross browser */
text-indent: -9999px;
background: #FFF url(images/search.gif) no-repeat top right;
}
<div id="searchcontainer">
<form id="searchform" class="search" method="post" action="#">
<input name="box" type="text" value="zoek..." class="box" />
<input name="btn" type="button" class="btn" />
</form>
</div>
In firefox it looks ok, but in ie and chrome the button "Zoek" goes down a bit, see image
In my opinion the css is ok. but can't find where it goes wrong.
Add float property and it will works.
.search input.btn {
width:70px;
height: 19px;
position: relative;
float: left;
cursor:pointer;
display: inline-block;
cursor: hand; /* cross browser */
background: #DDDDDD url(images/search.gif) no-repeat top right;
}
EDIT:
Example
Related
I was building a form with questions in the placeholder.
Now I want a red asterisk for the required fields.
Normally we could use span for giving different styles to the asterisk, but in my case, I can't add span in the placeholder.
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
height: auto;
margin: 8% auto;
background: #fff;
border-radius: 15px;
position: relative;
padding: 90px 0;
overflow: auto;
}
h2 {
text-align: center;
margin-bottom: 80px;
color: #333;
}
.container form {
width: 280px;
text-align: center;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
form input {
width: 100%;
padding: 10px 5px;
margin: 10px 0;
border: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
::placeholder {
color: #777;
}
.btn-box {
width: 100%;
margin: 30px auto 30px auto;
text-align: center;
}
<div class="container">
<form class="form1">
<h2>Let's Start Building!</h2>
<input type="email" placeholder="E-mail" required>
<div class="btn-box">
<button class="BN" type="button">Next</button>
</div>
</form>
</div>
https://paulund.co.uk/add-required-asterisk-with-css
Is there a way can use this website's method in my code?
This is not ideal, but since you said you can't add elements and didn't mention using JS, I tried a css only solution...again, not an ideal situation. I don't know what happens before or after this page. I added the asterisk using a ::before on the div containing the button and setting it to be position:relative, while the asterisk is set as position:absolute and moved next to the input field. I'm ready for the pitchforks and torches.
/*---------------------------------*/
input[type="email"][required]+.btn-box::before {
content: "*";
color: red;
display: block;
position: absolute;
top: -70px;
left: -10px;
}
input[type="email"][required]+.btn-box {
position: relative;
}
/*---------------------------------*/
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
height: auto;
margin: 8% auto;
background: #fff;
border-radius: 15px;
position: relative;
padding: 90px 0;
overflow: auto;
}
h2 {
text-align: center;
margin-bottom: 80px;
color: #333;
}
.container form {
width: 280px;
text-align: center;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
form input {
width: 100%;
padding: 10px 5px;
margin: 10px 0;
border: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
::placeholder {
color: #777;
}
.btn-box {
width: 100%;
margin: 30px auto 30px auto;
text-align: center;
}
<div class="container">
<form class="form1">
<h2>Let's Start Building!</h2>
<input type="email" placeholder="E-mail" required>
<div class="btn-box">
<button class="BN" type="button">Next</button>
</div>
</form>
</div>
I can probably safely assume the reason why OP (aka Original Poster) won't use a <span> is because <input> has width: 100%. Whenever an display: inline (ie <span>) or inline-block proceeds an element that has width: 100%, that element is forced to occupy the space underneath the preceding element of width: 100%.
Simply decrease the width of the <input> and use a <span>
Demo A is exactly like OP's demo with the exception of the <input> having width: 90% and a <span class='asterisk'>*</span> proceeding it.
Demo B and Demo C are improved versions that:
uses semantic elements like <fieldset> and <legend>.
has some ineffective styles removed.
has the <div class="btn-box"> removed.
has altered margins, padding, text-align, and font-size that are ascetically better IMO.
has the property type='button' removed. See <button> in a <form> section below.
In addition Demo B uses the following to display an asterisk:
A <label> instead of a <span> for semantics's sake.
In addition Demo C uses the following to display an asterisk:
The CSS property ::after is assigned to the <fieldset> element instead of actually using an extra element like a <label> or <span> used in the previous demos.
Note: In all demos a special character was used for the actual asterisk called "combining asterisk above". This character appears at the top of the line much like a super-scripted character.
Also Note: The font-sizes are absolute values (px😬) which I would not normally use but the OP's demo is not responsive.
<button> in a <form>
A <button> within a <form> has inherit behavior when the user clicks it, the <form> will validate according to whatever applicable instructions are set within the HTML or JavaScript then if everything is proper it submits the data. If a <button> has type="button", that <button> doesn't do anything without JavaScript which means the HTML property required is limited to validating user input by showing a message when <input> is hovered on.
In Demo B and Demo C the <button> does not have type="button". Enter something that is not an email address and compare the behavior to Demo A. When a valid e-mail address is entered in Demo B or Demo C, the entered data disappears which means it was submitted (of course it doesn't have any JavaScript so it just submits to nowhere).
Demo A
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
height: auto;
margin: 8% auto;
background: #fff;
border-radius: 15px;
position: relative;
padding: 90px 0;
overflow: auto;
}
h2 {
text-align: center;
margin-bottom: 80px;
color: #333;
}
.container form {
width: 280px;
text-align: center;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
form input {
width: 90%;
padding: 10px 5px;
margin: 10px 0;
border: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
.asterisk {
font-size: 3ch;
color: red;
}
::placeholder {
color: #777;
}
.btn-box {
width: 100%;
margin: 30px auto 30px auto;
text-align: center;
}
<div class="container">
<form class="form1">
<h2>Let's Start Building!</h2>
<input type="email" placeholder="E-mail" required>
<span class='asterisk'>⃰</span>
<div class="btn-box">
<button class="BN" type="button">Next</button>
</div>
</form>
</div>
Demo B
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
padding: 90px 0;
margin: 8% auto;
background: #fff;
border-radius: 15px;
}
form {
width: 280px;
margin: 0 auto;
text-align: center;
}
form * {
font-size: 18px;
}
fieldset {
width: 100%;
border: 0;
}
.asterisk {
font-size: 3ch;
color: red;
cursor: help;
}
legend {
font-size: 24px;
font-weight: bold;
margin: 0 auto 20px auto;
color: #333;
}
input {
width: 90%;
padding: 10px 5px;
border: 0;
border-bottom: 1px solid #999;
outline: none;
text-align: center;
}
::placeholder {
text-align: center;
opacity: 0.3;
}
.next {
margin-top: 30px;
padding: 3px 15px;
border-radius: 6px;
cursor: pointer;
}
<section class="container">
<form>
<fieldset>
<legend>Let's Start Building!</legend>
<input type="email" placeholder="E-mail" required>
<label class='asterisk' title=' E-mail is required '>*</label>
</fieldset>
<button class="next">Next</button>
</form>
</section>
Demo C
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
padding: 90px 0;
margin: 8% auto;
background: #fff;
border-radius: 15px;
}
form {
width: 280px;
margin: 0 auto;
text-align: center;
}
form * {
font-size: 18px;
}
fieldset {
width: 100%;
border: 0;
}
.required::after {
content: '*';
font-size: 22px;
color: red;
}
legend {
font-size: 24px;
font-weight: bold;
margin: 0 auto 20px auto;
color: #333;
}
input {
width: 90%;
padding: 10px 5px;
border: 0;
border-bottom: 1px solid #999;
outline: none;
text-align: center;
}
::placeholder {
text-align: center;
opacity: 0.3;
}
.next {
margin-top: 30px;
padding: 3px 15px;
border-radius: 6px;
cursor: pointer;
}
<section class="container">
<form>
<fieldset class='required'>
<legend>Let's Start Building!</legend>
<input type="email" placeholder="E-mail" required>
</fieldset>
<button class="next">Next</button>
</form>
</section>
If it is possible for you to add to your HTML, a label associated with the input would be helpful, see for example MDN
Associating a with an element offers some major advantages:
The label text is not only visually associated with its corresponding
text input; it is programmatically associated with it too. This means
that, for example, a screen reader will read out the label when the
user is focused on the form input, making it easier for an assistive
technology user to understand what data should be entered. You can
click the associated label to focus/activate the input, as well as the
input itself. This increased hit area provides an advantage to anyone
trying to activate the input, including those using a touch-screen
device.
It remains after the placeholder has disappeared so the user is reminded what is needed, and you can format it. For example:
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
height: auto;
margin: 8% auto;
background: #fff;
border-radius: 15px;
position: relative;
padding: 90px 0;
overflow: auto;
}
h2 {
text-align: center;
margin-bottom: 80px;
color: #333;
}
.container form {
width: 280px;
text-align: center;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
form input {
width: 100%;
padding: 10px 5px;
margin: 10px 0;
border: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
label[for="email"]::after {
content: ' (required)';
color: red;
}
input[required] {
border: solid red;
}
::placeholder {
color: #777;
}
.btn-box {
width: 100%;
margin: 30px auto 30px auto;
text-align: center;
}
<div class="container">
<form class="form1">
<h2>Let's Start Building!</h2>
<label for="email">Please type in your email address</label>
<input id="email" type="email" placeholder="E-mail" required>
<div class="btn-box">
<button class="BN" type="button">Next</button>
</div>
</form>
</div>
How to make the zipcode field & CHECK button on oneline using CSS. My website page is responsive. I am providing you the css file of this section. I had tried but output is not coming which i want. I want the CHECK button to the right side of the textfield. I am attaching the screehshot. Any help will be appreciated. I had added the HTML & CSS code below for any queries.
#media only screen and (min-width: 300px) and (max-width: 767px) {
.z-btn button {
background: #000 none repeat scroll 0 0;
position: unset;
}
.z-btn input.product-custom-option {
border: 0 none;
float: right !important;
height: auto;
line-height: 31px;
margin-left: 7px;
width: 80%;
}
}
div.product-view .add-to-cart {
padding-bottom: 15px;
}
div.product-view .add-to-cart-buttons {
float: right;
margin-right: 0px;
max-width: 100%;
width: 82%;
}
.z-btn label {
background: rgba(0, 0, 0, 0) url("img/van-icon.png") no-repeat scroll right 2px top 3px / 96% auto;
float: left;
font-size: 13px;
height: auto;
line-height: 28px;
text-indent: -9999px;
width: 37px;
}
. .z-btn button {
background: #000 none repeat scroll 0 0;
float: right !important;
font-size: 13px;
padding: 6px 20px;
/*margin-top: -31px;*/
position: absolute;
}
.input-box > div#cod_msg {
display: inline-block;
float: left;
font-size: 22px;
text-align: center;
width: 100%;
}
.cod-suc,
.cod-error {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: #fff none repeat scroll 0 0;
border-color: -moz-use-text-color #ccc #ccc;
border-image: none;
border-style: none solid solid;
border-width: 0 1px 1px;
float: left;
margin-bottom: 10px;
padding: 2px 11px 3px;
position: relative;
text-align: center;
top: -3px;
width: 100%;
}
#cod_msg img {
display: inline-block;
float: none;
text-align: center;
width: 3%;
}
.cod-error {
color: #ff0000;
}
.cod-suc {
color: #009036;
}
div.product-view .add-to-cart-buttons button#zip-check.button {
line-height: 32px;
min-height: auto;
width: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<input placeholder="Enter your pincode" value="" name="cod" class="product-custom-option required-entry" id="cod" size="29" style="color:black; font-size:12px" type="text">
<button id="zip-check" class="button" type="button" onclick="checkCOD();" name="zip-check" title="Check">
Bootstrap button on the right
Using the code posted in the answer:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<input type="text" placeholder="enter your zip code"/>
<button type="button" class="btn btn-primary">Check</button>
I tried customizing a file upload button using css.
<label class="custom-file-input">
<input type="file" name="file" id="videofile" /> <!--class="dropzone"-->
</label>
Full Code in jsfiddle. https://jsfiddle.net/2e7dLvoy/
How can i show the file name that is choosen just like a normal file upload button?
Use this
HTML:
<div class="form-group upload_btn">
<div class="fileUpload pull-left">
<span>Browse</span>
<input type="file" class="upload " id="uploadBtn">
</div>
<input disabled="disabled" class="input pull-left" placeholder="Upload your resume" id="uploadFile">
</div>
Css:
.form-group.upload_btn {
overflow: hidden;
margin-bottom: 20px;
}
.fileUpload {
background: #e1e1e1 none repeat scroll 0 0;
color: #626262;
display: inline-block;
font-size: 18px;
font-weight: 300;
overflow: hidden;
padding: 5.5px 10px;
position: relative;
}
.pull-left {
float: left;
}
.fileUpload input.upload {
cursor: pointer;
font-size: 20px;
left: 0;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
top: 0;
}
.upload_btn .input {
width: 79%;
}
.input {
border: 0px;
padding: 8px;
box-shadow: none;
background-color: #fff;
}
Js:
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
Here is the jsfiddle link
try this:
fiddle with jquery: https://jsfiddle.net/2e7dLvoy/4/
HTML
<label class="custom-file-input">
<input type="file" name="file" id="videofile" /> <!--class="dropzone"-->
<p id="selectedFile"></p>
</label>
CSS
.custom-file-input {
display: inline-block;
position: relative;
color: #533e00;
}
.custom-file-input input {
visibility: hidden;
width: 100px
}
.custom-file-input:before {
content: 'Drag & Drop';
display: block;
background: -webkit-linear-gradient( -180deg, #ffdc73, #febf01);
background: -o-linear-gradient( -180deg, #ffdc73, #febf01);
background: -moz-linear-gradient( -180deg, #ffdc73, #febf01);
background: linear-gradient( -180deg, #ffdc73, #febf01);
border: 3px solid #dca602;
border-radius: 10px;
padding: 5px 0px;
outline: none;
white-space: nowrap;
cursor: pointer;
text-shadow: 1px 1px rgba(255,255,255,0.7);
font-weight: bold;
text-align: center;
font-size: 10pt;
position: absolute;
left: 0;
font-size: 12px;
}
.custom-file-input:hover:before {
border-color: #febf01;
}
.custom-file-input:active:before {
background: #febf01;
}
p {
float: left;
margin: -5% 14% 0% 32%;
}
jQuery
$('input[type=file]').change(function(e){
$in=$(this);
$('#selectedFile').html($in.val());
});
I am trying to get my search box to work but the box is showing on top of my and the css i gave for my fieldset. it looks like the original text input box is on top of the modified fieldset text box (which i want to use for my wesite). the fieldset box is longer ans perfect but i cannot type into that box because the original small box is on top of the fieldset css. thank you
index:
<form id="search-form" action="/properties/search" method="get">
<fieldset>
<input type ="text "name="q" placeholder="Search for a Website" autocomplete="off">
<button type="button" data-hasqtip="5" oldtitle="search" title aria- describedby="qtip-5"> </button>
</fieldset>
</form>
css:
#search-form {
display: block;
margin-top: 9px;
float: left;
}
#search-form fieldset {
position: relative;
width: 425px;
height: 22px;
padding: 0;
background-color: #fdfdfd;
border: 1px solid #ced8dd;
}
#search-form input[type="text"] {
position: relative;
font-size: .8125em;
line-height: 1.3846153846153846;
padding: 0;
margin: 2px 0 0 5px;
border-width: 0;
width: 380px;
}
search-form button {
position: absolute;
right: 0;
width: 18px;
height: 16px;
padding: 0;
margin: 3px 3px 0 0;
border: 0;
border-left: 1px solid #ced8dd;
background-color: #fdfdfd;
background-repeat: no-repeat;
background-image: url("http://images.househappy.org/icon_sprite_1x_v14.png");
background-position: -10px -22px;
}
It's been said in the comments, but really all you need to do is clean up your code.
Have a fiddle!
HTML
<form id="search-form" action="/properties/search" method="get">
<fieldset>
<input type="text" name="q" placeholder="Search for a Website" autocomplete="off" />
<button type="button" data-hasqtip="5" oldtitle="search"> </button>
</fieldset>
</form>
CSS
#search-form {
display: block;
margin-top: 9px;
float: left;
}
#search-form fieldset {
position: relative;
width: 425px;
height: 22px;
padding: 0;
background-color: #fdfdfd;
border: 1px solid #ced8dd;
}
#search-form input[type="text"] {
position: relative;
font-size: .8125em;
line-height: 1.3846153846153846;
padding: 0;
margin: 2px 0 0 5px;
border-width: 0;
width: 380px;
}
#search-form button {
position: absolute;
right: 0;
width: 18px;
height: 16px;
padding: 0;
margin: 3px 3px 0 0;
border: 0;
border-left: 1px solid #ced8dd;
background-color: #fdfdfd;
background-repeat: no-repeat;
background-image: url("http://images.househappy.org/icon_sprite_1x_v14.png");
background-position: -10px -22px;
}
I'm working on a form and need to include a note above the reCAPTCHA field. I've got everything in place, but the spacing between the *To submit your message, please type the words shown below: note and reCAPTCHA is way off, I need to figure out how to bring the two elements closer together vertically.
I'm using a paragraph tag in the form for the note, I'm not sure if that's bad form??
Website Link
CSS:
/*Prayer Request Form*/
#prayer-form {
margin-bottom: 20px;
width: 960px;
height: 520px;
padding: 40px 30px;
margin-left: auto;
margin-right: auto;
}
form, fieldset, input, textarea {
margin: 0; padding: 0; border: 0; outline: none;
}
label {
float: left; clear: left; margin: 11px 20px 0 0; width: 65px;
text-align: left; font-size: 14px; color: #000000;
}
input {
width: 370px; height: 20px; padding: 5px 10px 5px 10px; margin: 0 0 23px 0;
background: #EDEDED;
border: 1px solid #808080;
font-family: sans-serif; font-size: 14px; color: #000000;
}
textarea {
width: 650px; height: 120px; padding: 10px 10px 5px 10px; margin: 0 0 20px 0;
background: #EDEDED;
border: 1px solid #808080;
overflow: auto;
font-family: sans-serif; font-size: 14px; color: #000000;
}
input[type=submit] {
width: 95px; height: 30px; float: left; clear: left; padding: 2px 5px 2px 5px; margin: 20px 0 0 85px;
color: #FFFFFF;
border: 1px solid #0000CD;
background: -moz-linear-gradient(top, #00BFFF 0%, #0000CD 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00BFFF), color-stop(100%,#0000FF)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00BFFF', endColorstr='#0000CD');
cursor: pointer;
}
input[type=reset] {
width: 95px; height: 30px; float: left; padding: 2px 5px 2px 5px; margin: 20px 0 0 20px;
border: 1px solid #858585;
background: -moz-linear-gradient(top, #EDEDED 0%, #999999 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EDEDED), color-stop(100%,#999999)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#EDEDED', endColorstr='#999999');
cursor: pointer;
}
p captcha{
float: left; padding: 2px 0 0 85px;
font-family: sans-serif; font-size: 14px; color: #000000;
}
#captcha {
float: left; margin: 11px 0 20px 0; width: 445px; height: 110px; padding: 2px 5px 2px 85px;
}
HTML:
<!--/ Show Prayer Request Form-->
<div id="prayer-form">
<form name="prayer-form" action="send-mail.php" method="POST">
<label for="field_name">Name:</label> <input type="text" id="field_name" name="sender_name" placeholder="First Name, Last Name">
<br>
<label for="field_email">Email:</label> <input type="text" id="field_email" name="sender_email" placeholder="example#domain.com">
<br>
<label for="field_phone">Phone:</label> <input type="text" id="field_phone" name="sender_phone" placeholder="(444) 444-4444">
<br>
<label for="field_message">Prayer Request:</label>
<textarea id="field_message" name="sender_message" placeholder="How can we pray for you?"></textarea>
<p id="captcha"><b>*To submit your message, please type the words shown below:</b></p>
<div id="captcha">
<?php
require_once('recaptchalib.php');
$publickey = "*****************AzBk";
echo recaptcha_get_html($publickey);
?>
</div>
<input type="submit" name="send_message" value="Submit"> <input type="reset" value="Reset">
</form>
</div>
Your help is much appreciated.
You need to adjust the following rule in your style sheet:
#captcha {
float: left;
margin: 11px 0 20px 0;
width: 445px;
height: 110px;
padding: 2px 5px 2px 85px;
}
You don't need to specify the height, just use height: auto or omit it all together.
You can also omit the padding, using margin alone will give you enough control.
Finally, you may not need to float the paragraph.
It looks like it's the height setting in your captcha CSS:
#captcha {
float: left;
margin: 11px 0 20px 0;
width: 445px;
height: 110px;
padding: 2px 5px 2px 85px;
}
When I disable the height setting of 110px, the spacing is more reasonable.
I think that you have set your with the same id as the actual captcha form you must change the id on the tag, plus it is not good to have 2 ID's.
change to this -
<p id="captcha-notice"><b>*To submit your message, please type the words shown below:</b></p>
<div id="captcha">
<?php
require_once('recaptchalib.php');
$publickey = "*****************AzBk";
echo recaptcha_get_html($publickey);
?>
</div>
then add your styles
#captcha-notice{
/* styles */
}
Simple, change this css code:
#captcha {
float: left;
height: 110px;
margin: 11px 0 20px;
padding: 2px 5px 2px 85px;
width: 445px;
}
to
#captcha {
float: left;
/*height: 110px;
margin: 11px 0 20px;*/
padding: 2px 5px 2px 85px;
width: 445px;
}