Basic styling bits surprisingly not being applied - html

Question

Having applied styling to my form certain elements of the form aren't adhering to the styling particularly:
1st issue: The width of 350px is only being applied on one of the five input elements i.e. the email field.
2nd issue: I'm applying an image on the input elements when engaged to indicate they are required but the image isnt appearing on any of the input elements when engaged.
3rd issue: I would like the div with the class social_sign_in to have a margin top which I have applied but isn't working.
4th issue: I'm attempting to have the form styling i.e. the class I call form_input_div to wrap itself round the form elements which are 350px in width whilst it remains in the centre. This seems not to be working.
As am slightly new to CSS I suspect I might have made some errors in the basics of styling so my apologies if that is the case.
EDIT: Here's the relevant HTML code:
<div class="page_content_main_div">
<div class="page_content_heading_div" >
<p> Log in with: </p>
</div>
<div class="social_sign_in_div">
<a class="btn-auth btn-facebook large" href="#">Log in with <b>Facebook</b></a>
</div>
<div class="social_sign_in_div">
<a class="btn-auth btn-google large" href="#">Log in with <b>Google</b></a>
</div>
<div class="btn_log_in_with_email_div">
<a class="btn-auth btn_log_in_with_email large" href="#">Log in with <b>ABCD details</b></a>
</div>
<hr class="hr"></hr>
<form action="#" method="GET" class="sign_up_form">
<div class="page_content_heading_div">
<p>Sign up:</p>
</div>
<div>
<input title="Enter first name" class="firstname" name="firstname" type="text" required placeholder="Enter first name">
</div>
<div>
<input title="Enter second name" class="secondname" name="secondname" type="text" required placeholder="Enter second name">
</div>
<div>
<input title="Enter your e-mail" class="email" name="email" type="email" required placeholder="Enter email">
</div>
<div>
<input title="Enter a password" class="password" name="password" type="password" required placeholder="Enter password">
</div>
<div>
<input title="Re-enter password" class="reenterpassword" name="reenterpassword" type="password" required placeholder="Re-enter password">
</div>
<div class="form_button_internal_div">
<button title="Type your second name" type="submit" class="btn_sign_up">Sign Up</button>
</div>
<div class="form_terms_of_service_internal_div">
<p class="terms_of_service">By signing up, I agree to the ABCD <b>Terms of Service</b> and <b>Privacy Policy</b>.</p>
</div>
</form>
</div>
EDIT: Here's the relevant CSS code:
/* Page content heading div */
.page_content_heading_div {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
color: #999999;
font-size: 40px;
font-weight: bold;
clear: both;
}
/* Page content main div */
.page_content_main_div {
clear: both;
}
/* Social sign in div */
.social_sign_in_div {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
margin-top: 10px;
}
/* Log in with email div */
.btn_log_in_with_email_div {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
margin-top: 10px;
}
/* hr styling */
.hr {
width: 350px;
height: 2px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
/* */
.sign_up_form {
width: 350px;
display: inline-block;
}
/* */
input[type="text"], input[type="password"], input[type="email"] {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
width: 100%;
height: 45px;
font-size: 20px;
color: #000000;
border: 1px solid #999999;
border-radius: 6px;
padding: 5px 5px 5px 5px;
margin-top: 10px;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
/* */
input:focus {
outline: solid #999999;
border-radius: 6px;
}
/* */
.form_button_internal_div {
margin-top: 10px;
margin-bottom: 10px;
}
/* Primary button */
.btn_sign_up {
right: 0px;
width: 150px;
height: 36px;
border:none;
font-weight: normal;
font-size: 20px;
margin-top: 10px;
background: #CCC;
background: -webkit-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: -moz-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: -ms-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: -o-linear-gradient(#A2E55A 0%,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
-pie-background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
-moz-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
color: #F5F5F5;
}
/* */
.btn_sign_up:hover {
background: -webkit-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -moz-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -ms-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -o-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
-pie-background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
}
/* */
.btn_sign_up:active {
background: -webkit-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -moz-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -ms-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -o-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
-pie-background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
}
/* */
.form_terms_of_service_internal_div {
margin-top: 10px;
margin-bottom: 10px;
}
/* */
.terms_of_service {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
font-size: 15px;
color: #999999;
}

Answer 1

The width of 350px is only being applied on one of the five input elements i.e. the email field.
This doesn't seem to be true...I'm seeing all inputs the same length.
I'm applying an image on the input elements when engaged to indicate they are required but the image isnt appearing on any of the input elements when engaged.
Your engaged inputs are identified by the class required, but they all have this class by default, so there really isn't a trigger. What you are looking for is a :focus, then apply the styling.
I would like the div with the class social_sign_in to have a margin top which I have applied but isn't working.
It's working, but 10px is not enough to see a difference. If you made this like 50px, you will see it moved.
I'm attempting to have the form styling i.e. the class I call form_input_div to wrap itself round the form elements which are 350px in width whilst it remains in the centre. This seems not to be working.
What purpose does the form_input_div serve? Why not remove the widths from the input, have them take 100% of their container, which is the form, and set the width on the form with some padding and you'll get what you want.
Also, required id is not a valid attribute to be putting on the input tags.