I'm trying to make a login form with two input fields with an inset padding, but they end up exceeding the parent's bounds. What's causing this?
JSFiddle snippet: http://jsfiddle.net/4x2KP/
#mainContainer {
line-height: 20px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: rgba(0,50,94,0.2);
margin: 20px auto;
display: table;
-moz-border-radius: 15px;
border-style: solid;
border-color: rgb(40, 40, 40);
border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
border-radius: 2px;
border-radius: 2px 5px / 5px;
box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}
.loginForm {
width: 320px;
height: 250px;
padding: 10px 15px 25px 15px;
overflow: hidden;
}
.login-fields > .login-bottom input#login-button_normal {
float: right;
padding: 2px 25px;
cursor: pointer;
margin-left: 10px;
}
.login-fields > .login-bottom input#login-remember {
float: left;
margin-right: 3px;
}
.spacer {
padding-bottom: 10px;
}
/* ELEMENT OF INTEREST HERE! */
input[type=text],
input[type=password] {
width: 100%;
height: 20px;
padding: 5px 10px;
background-color: rgb(215, 215, 215);
line-height: 20px;
font-size: 12px;
color: rgb(136, 136, 136);
border-radius: 2px 2px 2px 2px;
border: 1px solid rgb(114, 114, 114);
box-shadow: 0 1px 0 rgba(24, 24, 24,0.1);
}
input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
background:rgb(242, 242, 242) !important;
}
input[type=submit]:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -10px 10px rgba(255,255,255,0.1);
}
<div id="mainContainer">
<div id="login" class="loginForm">
<div class="login-top">
</div>
<form class="login-fields" onsubmit="alert('test'); return false;">
<div id="login-email" class="login-field">
<label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
<span><input name="email" id="email" type="text"></input></span>
</div>
<div class="spacer"></div>
<div id="login-password" class="login-field">
<label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
<span><input name="password" id="password" type="password"></input></span>
</div>
<div class="login-bottom">
<input type="checkbox" name="remember" id="login-remember"></input>
<label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
<input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"></input>
</div>
</form>
</div>
</div>
According to the CSS basic box model, an element's width and height are applied to its content box. Padding falls outside of that content box and increases the element's overall size.
As a result, if you set an element with padding to 100% width, its padding will make it wider than 100% of its containing element. In your context, inputs become wider than their parent.
You can change the way the box model treats padding and width. Set the box-sizing CSS property to border-box to prevent padding from affecting an element's width or height:
border-box : The width and height properties include the padding and border, but not the margin... Note that padding and border will be inside of the box.
Note the browser compatibility of box-sizing (IE8+).
At the time of this edit, no prefixes are necessary.
Paul Irish and Chris Coyier recommend the "inherited" usage below:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
For reference, see:
* { Box-sizing: Border-box } FTW
Inheriting box-sizing Probably Slightly Better Best-Practice.
Here's a demonstration in your specific context:
#mainContainer {
line-height: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: rgba(0, 50, 94, 0.2);
margin: 20px auto;
display: table;
-moz-border-radius: 15px;
border-style: solid;
border-color: rgb(40, 40, 40);
border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
border-radius: 2px;
border-radius: 2px 5px / 5px;
box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
}
.loginForm {
width: 320px;
height: 250px;
padding: 10px 15px 25px 15px;
overflow: hidden;
}
.login-fields > .login-bottom input#login-button_normal {
float: right;
padding: 2px 25px;
cursor: pointer;
margin-left: 10px;
}
.login-fields > .login-bottom input#login-remember {
float: left;
margin-right: 3px;
}
.spacer {
padding-bottom: 10px;
}
input[type=text],
input[type=password] {
width: 100%;
height: 30px;
padding: 5px 10px;
background-color: rgb(215, 215, 215);
line-height: 20px;
font-size: 12px;
color: rgb(136, 136, 136);
border-radius: 2px 2px 2px 2px;
border: 1px solid rgb(114, 114, 114);
box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
box-sizing: border-box;
}
input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
background: rgb(242, 242, 242);
!important;
}
input[type=submit]:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);
}
.login-top {
height: auto;/*85px;*/
}
.login-bottom {
padding: 35px 15px 0 0;
}
<div id="mainContainer">
<div id="login" class="loginForm">
<div class="login-top">
</div>
<form class="login-fields" onsubmit="alert('test'); return false;">
<div id="login-email" class="login-field">
<label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
<span><input name="email" id="email" type="text" /></span>
</div>
<div class="spacer"></div>
<div id="login-password" class="login-field">
<label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
<span><input name="password" id="password" type="password" /></span>
</div>
<div class="login-bottom">
<input type="checkbox" name="remember" id="login-remember" />
<label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
<input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in" />
</div>
</form>
</div>
</div>
Alternatively, rather than adding padding to the <input> elements themselves, style the <span> elements wrapping the inputs. That way, the <input> elements can be set to width:100% without being affected by any additional padding. Example below:
#login-form {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: rgba(0, 50, 94, 0.2);
margin: 20px auto;
padding: 10px 15px 25px 15px;
border: 4px solid rgb(40, 40, 40);
box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
border-radius: 2px;
width: 320px;
}
label span {
display: block;
padding: .3em 1em;
background-color: rgb(215, 215, 215);
border-radius: .25em;
border: 1px solid rgb(114, 114, 114);
box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
margin: 0 0 1em;
}
label span:hover {
background: rgb(242, 242, 242);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);
}
input[type=text],
input[type=password] {
background: none;
border: none;
width: 100%;
height: 2em;
line-height: 2em;
font-size: 12px;
color: rgb(136, 136, 136);
outline: none;
}
.login-bottom {
margin: 2em 1em 0 0;
}
input#login-button {
float: right;
padding: 2px 25px;
}
input#login-remember {
float: left;
margin-right: 3px;
}
<form id="login-form">
<label>E-mail address
<span><input name="email" type="text" /></span>
</label>
<label>Password
<span><input name="password" type="password" /></span>
</label>
<div class="login-bottom">
<label>
<input type="checkbox" name="remember" id="login-remember" />Remember my email
</label>
<input type="submit" name="login-button" id="login-button" value="Log in" />
</div>
</form>
The other answers seem to tell you to hard-code the width or use a browser-specific hack. I think there is a simpler way.
By calculating the width and subtracting the padding (which causes the field overlap). The 20px comes from 10px for left padding and 10px for right padding.
input[type=text],
input[type=password] {
...
width: calc(100% - 20px);
}
If all above fail, try setting the following properties for your input, to have it take max space but not overflow:
input {
min-width: 100%;
max-width: 100%;
}
Try changing the box-sizing to border-box. The padding is adding to width of your input elements.
See Demo here
CSS
input[type=text],
input[type=password] {
width: 100%;
margin-top: 5px;
height: 25px;
...
}
input {
box-sizing: border-box;
}
+box-sizing
try code this
*, ::after, ::before {
box-sizing: border-box;
}
Padding is added to the overall width. Because your container has a pixel width, you are better off giving the inputs a pixel width too, but remember to remove the padding and border from the width you set to avoid the same issue.
This is tricky, and situational. There is a bit of confusion in these comments, let's summarize the solutions:
The first valid approach is explained by showdev in the accepted answer. BUT, this is not final.
In fact: if you add some padding to the input, now it works. If you add some margin it is still overflowing. It seems that box-sizing is ignored. Also fiddling with min-width and max-width is useless.
To apply margin, the only working solution is explained by Al Zziwa, using calc() to reduce the width by the amount of margin. For example, adding margin to left and right:
input {
margin: 0 20px;
width: calc(100% - 40px);
}
If you don't like this solution, the workaround is to avoid the margin in the input, instead use a wrapper where you apply padding or margin.
You also have an error in your css with the exclamation point in this line:
background:rgb(242, 242, 242);!important;
remove the semi-colon before it. However, !important should be used rarely and can largely be avoided.
I tried these solutions but never got a conclusive result. In the end I used proper semantic markup with a fieldset. It saved having to add any width calculations and any box-sizing.
It also allows you to set the form width as you require and the inputs remain within the padding you need for your edges.
In this example I have put a border on the form and fieldset and an opaque background on the legend and fieldset so you can see how they overlap and sit with each other.
<html>
<head>
<style>
form {
width: 300px;
margin: 0 auto;
border: 1px solid;
}
fieldset {
border: 0;
margin: 0;
padding: 0 20px 10px;
border: 1px solid blue;
background: rgba(0,0,0,.2);
}
legend {
background: rgba(0,0,0,.2);
width: 100%;
margin: 0 -20px;
padding: 2px 20px;
color: $col1;
border: 0;
}
input[type="email"],
input[type="password"],
button {
width: 100%;
margin: 0 0 10px;
padding: 0 10px;
}
input[type="email"],
input[type="password"] {
line-height: 22px;
font-size: 16px;
}
button {
line-height: 26px;
font-size: 20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Log in</legend>
<p>You may need some content here, a message?</p>
<input type="email" id="email" name="email" placeholder="Email" value=""/>
<input type="password" id="password" name="password" placeholder="password" value=""/>
<button type="submit">Login</button>
</fieldset>
</form>
</body>
</html>
In your parent div set .parent { height: fit-content; }
I leave this here in case it may help someone even if it's not the case in the code of the question but I think it can be related to the question subject itself.
I just stumbled in an occasion I was using a form styled with CSS grids and the inputs were overflowing.
The solution has been to add:
grid-template-columns: 100%
as the default auto value was causing the overflow.
Padding is essentially added to the width, therefore when you say width:100% and padding: 5px 10px you're actually adding 20px to the 100% width.
Do you want the input fields to be centered?
A trick to center elements: specify the width of the element and set the margin to auto, eg:
margin : 0px auto;
width:300px
A link to your updated fiddle:
http://jsfiddle.net/4x2KP/5/
Related
.contact-form {
transition: .3s;
margin-top: 120px;
/*border: 2px solid black;*/
background-color: rgb(243, 243, 243);
border-radius: 6px;
box-shadow: -4px 12px 11px 5px rgba(0, 0, 0, 0.521);
width: 475px;
height: 550px;
margin-left: 11px;
text-align: left;
align-items: center;
position: sticky;
left: 60%;
top: -20%;
user-select: all;
z-index: 4;
}
.benefit-card {
margin: 20px;
background-color: white;
text-align: center;
border: 1px solid black;
width: 300px;
height: 450px;
top: 0%;
left: 22%;
box-shadow: 2px 2px 12px 2px black;
user-select: none;
}
.benefit-card-header {
border-bottom: 3px dotted black;
padding-bottom: 11px;
}
.benefit-card-image {
-webkit-user-drag: none;
padding-top: 11px;
padding-bottom: 19px;
width: 200px;
filter: drop-shadow(2px 2px 6px black);
}
#help-me {
position: relative;
z-index: 8;
margin-top: -515px;
}
<div class="contact-form">
<h2 class="contact-form-header">Get Your Quote Today!</h2>
<form class="form-bg-pls-send-help">
<label class="contact-input-header" for="email">Email<span class="important-contact-field"> *</span></label>
<br>
<input class="contact-input" name="email" type="email" autocomplete="off" required placeholder="Your company email" />
<label class="contact-input-header" for="company">Company</label>
<br>
<input class="contact-input" name="company" type="text" required placeholder="Who do you work for?" />
<label class="contact-input-header" for="subject">Subject</label>
<input class="contact-input" name="subject" type="text" placeholder="Subject " />
<label class="contact-input-header" for="about">About</label>
<textarea class="long-input contact-input" name="about" type="text" placeholder="What does your company do?"></textarea>
<br><br>
<input class="getquote-button" type="submit" value="Get Quote" />
</form>
</div>
<div id="help-me">
<div class="benefit-card" id="bc">
<h1 class="benefit-card-header" id="bch">World Wide</h1>
<h3 class="benefit-card-description" id="bcd">No matter where you're from or where you're located we will help you grow your company!</h3>
</div>
</div>
I am building a sample website of a company. I have a contact form set up, but the inputs are not clickable when they are in a div tag, but I need the form in one so I can properly style the form.
The form is supposed to require the input, when I click on the Get Quote button it allows me to edit the first input tag. This has never happened to me before and I have tried user-select, checking if the disabled attribute was used, and just about everything I can think of.
Update your css file to:
#help-me{
position: relative;
z-index: -1;
margin-top: -515px;
}
This element is covering the whole screen.
Update the z-index when you need to show it.
Your inputs are not clickable because #help-me covers all of .contact-form due to the way you have used margin-top to position it higher compared to where it would naturally sit.
Consider using flexbox to achieve your layout instead.
.layout {
display: flex
}
.contact-form {
flex: 1 1 auto;
background-color: rgb(243, 243, 243);
border-radius: 6px;
box-shadow: -4px 12px 11px 5px rgba(0, 0, 0, 0.521);
}
#help-me {
flex: 1 1 auto;
}
<div class="layout">
<div id="help-me">
#help-me
</div>
<div class="contact-form">
.contact-form
</div>
</div>
I want to inherit the width of my suggestion div from the input field's width and at the same time overlap it from the objects. My CSS below overlaps but does not inherit the width of the input field. I've tried making it to 100% but it becomes longer than the input field.
.suggestion {
cursor: pointer;
background: #FFF;
box-shadow: 0 2px 2px 0 rgba(34,36,38,.15);
padding: 5px 20px 5px 20px;
border-radius: .28571429rem;
border: 0px solid rgba(34,36,38,.15);
z-index: 1;
position: absolute;
width: inherit;
}
.search-res{
margin-bottom: 5px;
}
.search-res:hover{
margin-bottom: 5px;
color: #2196f3;
}
.warning {
color: orange
}
<input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32">
<div class="suggestion" *ngIf="suggestions">
<div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)">
{{suggestion.name}}
</div>
</div>
Here's an example:https://codepen.io/anon/pen/KvgoPX
What I changed was:
For the suggestion div to be absolute, it'll need to be relative to the input in some way. That's what there's an input container around the outside. That can be any width you want.
There's another object in there to show that it overlays.
.inputContainer {
width:200px;
position:relative;
background:green;
}
input {
width:100%;
}
.suggestion {
cursor: pointer;
background: #FFF;
box-shadow: 0 2px 2px 0 rgba(34,36,38,.15);
padding: 5px 20px;
border-radius: .28571429rem;
border: 0px solid rgba(34,36,38,.15);
z-index: 1;
box-sizing:border-box;
text-align:center;
position: absolute;
width: 100%;
}
.search-res{
margin-bottom: 5px;
}
.search-res:hover{
margin-bottom: 5px;
color: #2196f3;
}
.warning {
color: orange
}
<div class="inputContainer">
<input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32">
<div class="suggestion" *ngIf="suggestions">
<div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)">
{{suggestion.name}}
</div>
</div>
</div>
<div class="otherStuff"> This is where other objects are </div>
I am trying to make my textbox and button look responsive and stays inline-block even when I use mobilephone.I want the width of the text boxes to expand based on the browser to use more of the screen.
My html look like this:
<div id="wrapper">
<li class="input-button">
<div style="float:left;">
<input type="text" id="KUNDE" placeholder="Search by name or ID." value="" size="60"/>
<div id="loader" style="display:none;"><img src="loader.gif" /></div>
</div>
<div style="float:left;margin-left:10px;">
<button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button>
</div>
</li>
</div>
and css part look like this:
body{
background: #f5fffa;
font-family: 'Lora', serif;
font-family: 'Montserrat', sans-serif;
}
#wrapper {
max-width: 940px;
margin:0 auto;
padding:0;
}
.input-button
{
margin:20px auto;
display:inline-block;
}
#KUNDE{
padding: 10px 5px;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #a4c3ca;
background: #f1f1f1;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
.btn-style {
padding:5px;
border: 1px solid #00748f;
height: 42px;
width: 100px;
cursor: pointer;
font: bold 12px Arial, Helvetica;
border-radius: 5px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
background-color: lightblue;
}
I have tried to implement CSS3 flexbox and CSS calc() like adding #Kunde { display: flex; } and .input-button input { width: calc(100% - 160px); }
and removing the size="60" from html and using width attribute in CSS like #KUNDE{ width=100%; }. Those methods did not help me out the solve problems or I couldn't use them in the proper way :(
Any suggestion will be highly appreciated.
Try the following. Use cal() and width: 100% in necessary place to achieve this
body {
background: #f5fffa;
font-family: 'Lora', serif;
font-family: 'Montserrat', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0;
}
.input-button {
display: inline-block;
width: 100%;
}
.input-wrapper {
width: calc(100% - 140px)
}
#KUNDE {
padding: 10px 5px;
font: bold 16px'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #a4c3ca;
background: #f1f1f1;
border-radius: 5px;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
.btn-style {
margin: 0 10px;
padding: 5px;
border: 1px solid #00748f;
height: 42px;
width: 100px;
cursor: pointer;
font: bold 12px Arial, Helvetica;
border-radius: 5px;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
background-color: lightblue;
}
<div id="wrapper">
<li class="input-button">
<div class="input-wrapper" style="float:left;">
<input type="text" id="KUNDE" placeholder="Search by name or ID." value="" />
<div id="loader" style="display:none;">
<img src="loader.gif" />
</div>
</div>
<div style="float:left;margin-left:10px;">
<button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button>
</div>
</li>
</div>
your html is pretty messy so I removed all unnecessary tags:
<div id="wrapper">
<form name="searchbar">
<input type="text" id="KUNDE" placeholder="Search by name or ID." value=""/>
<button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button>
<div id="loader" style="display:none;"><img src="loader.gif" /></div>
</form>
</div>
basic idea is to express the widths of the elements in percentage and if you want to fine tune it you can add media queries for different sizes:
body{
background: #f5fffa;
font-family: 'Lora', serif;
font-family: 'Montserrat', sans-serif;
}
#wrapper {
max-width: 940px;
margin:0 auto;
padding:0;
}
.input-button {
margin:20px auto;
display:inline-block;
}
form {
width: 100%;
}
form input {
width: 79%;
box-sizing: border-box;
}
form button {
float: right;
width: 19%;
box-sizing: border-box;
}
#KUNDE{
padding: 10px 5px;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #a4c3ca;
background: #f1f1f1;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
.btn-style {
padding:5px;
border: 1px solid #00748f;
height: 42px;
cursor: pointer;
font: bold 12px Arial, Helvetica;
border-radius: 5px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
background-color: lightblue;
}
css could be little bit cleaner also but I don't want to mess with your styles :)
here it is in action:
http://codepen.io/1GR3/pen/mAqyZr?editors=1100
There's a number of solutions to your problem. I've outlined three options with some example code below. Some adjustments will need to be made to meet your specific needs but should be trivial.
* {
box-sizing: border-box;
}
[id] {
margin: 10px 0;
}
input {
width: 100%;
margin-right: 10px;
}
#example-1 input {
/* minus button width + input margin */
width: calc( 100% - 85px );
}
#example-1 button {
width: 75px;
}
#example-2 {
margin-left: -10px;
margin-right: -10px;
overflow: hidden; /* clearfix */
}
#example-2 div {
float: left;
padding: 0 10px;
}
#example-2 div:nth-child(1) {
width: 60%;
}
#example-2 div:nth-child(2) {
width: 40%;
}
#example-2 button {
width: 100%;
}
#example-3 {
display: flex;
justify-content: space-around;
}
<h2>Floated with Calc() - <small>Fixed Size Button</small></h2>
<div id="example-1">
<input type="text"><button type="text">Fixed Width</button>
</div>
<h2>Constrain Width with Container Elements - <small>Percentage Size Button</small></h2>
<div id="example-2">
<div>
<input type="text">
</div>
<div>
<button type="text">Percentage Width</button>
</div>
</div>
<h2>Flexbox</h2>
<div id="example-3">
<input type="text"><button type="text">Hent</button>
</div>
The first example shows the use of calc(). I'm guessing you were close before but might have applied it to the wrong elements and/or applied incorrect values.
The second example show a grid approach where you place elements inside of other elements that make a grid. Those elements are then set to take up a certain portion of their containing element. This is similar to Bootstrap and other CSS frameworks.
For the second example I also added a demonstration of making the button with a flexible width. Though not required for that solution, if a fixed size is used then you would want to switch to example one or three if both items need to take up the full width of the parent element.
The third example shows flexbox.
I can use all the help with making my contact form responsive according the eagle sprite I have on this page: http://demo.chilipress.com/epic3/
The idea is to have the eagle's mouth over the form while the screen gets resized.
As you can see, the sprites are completely responsive and so is the form. However the form does not stick to the eagle's mouth when resizing.
HTML:
<section id="two" class="window">
<img src="assets/contact.jpg" alt="background image">
<div id="sprite1_contact"></div>
<div id="sprite2_contact"></div>
<div id="content">
<div class="contact">
<form>
<fieldset class="name group">
<label for="name" class="name">Name</label>
<input id="name" name="name" required aria-required=”true” pattern="[A-Za-z-0-9]+\s[A-Za-z]+" title="firstname lastname"/>
</fieldset>
<fieldset class="email group">
<label for="email" class="email">Email</label>
<input type="email" id="email" name="email" required title="Submit a valid Email">
</fieldset>
<fieldset class="phone group">
<label for="phone" class="phone">Telephone</label>
<input type="tel" id="phone" name="phone" pattern="(\+?\d[- .]*){7,17}" required title="Submit an international, national or local phone number"/>
</fieldset>
<fieldset class="message group">
<label class="message">Message</label>
<input type="text" id="message" required/>
</fieldset>
<fieldset class="send group">
<input type="submit" value="Send" class="sendButton">
</fieldset>
</form>
</div>
</div>
</section>
CSS
#sprite1_contact{
background-image: url('sprite_contact2.png');
width: 35.2%;
height: 0;
padding-bottom: 7%;
background-position: 0 0;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 32.3%;
z-index: 2;}
#sprite2_contact {
background-image: url('sprite_contact2.png');
width: 27.5%;
height: 0;
padding-bottom: 29%;
background-position: 0 27%;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 35.8%;
z-index: 1;}
#content{
max-width: 50.694%;
position: absolute;
bottom: 0;
background: none repeat scroll 0 0 rgba(0, 0, 0, .55);
border-radius: 13px;
width: 678px;
margin: 0 0 7.6% 25.9167%;
box-shadow: 0 0 0 2px #000000, 2px 2px 30px 1px rgba(199, 255, 100, 0.73);}
.contact{
width: 100%;
margin: 10px;}
fieldset{
border: 0;
margin: 0;
width: 100%;
padding: 1%;}
.name, .email, .message{
padding-right: 29px;}
label{
color: #d8d9de;
font-family:'apple_chancerychancery';
font-size: 1.2em;
padding-left: 10px;}
input{
margin-right: 50px;
padding: 5px;
text-align: left;
border-radius: 10px;
background: none repeat scroll 0 0 rgba(255, 240, 260, 0.5);}
#name, #email, #phone, #message{
float: right;
color: #253c93;
text-decoration: none;
border: 1px dotted #29FF00;
font-family: 'Calibri', Arial, sans-serif;
font-size: 1em;
width: 73%;}
#name{
width: 73.5%;}
textarea {vertical-align: top;}
div#inner-editor{
padding: 30px;}
#message{
padding-top: 10%;}
.sendButton{
background: rgba(0, 0, 0, 0);
color: #d8d9de;
font-size: 1.2em;
font-family: 'apple_chancerychancery';
padding: 0.8% 4%;
border: none;
margin-left: 42%;
cursor: pointer;
box-shadow: inset 2px 2px 9px rgba(199, 255, 100, 0.73), inset -2px -2px 9px rgba(199, 255, 100, 0.73);}
Just 2 changes in the CSS:
#sprite2_contact {
top: 0px !important;
}
just to overcome the top that is inline ..
and
#content {
margin-top: 28%;
}
Well, you have already a margin property there, just place that afterwards so that the other is overwritten
I have set those changes this way, instead of changing yours, so the changes can be more easily seen and reverted
I'm working on styling my website forms and found a tutorial that seems to work up to a point... The tutorial includes code to have hover hints, and this code is causing things to get ugly. Instead of the fields all lining up under one another they seem to be attempting to position themselves one right after another and wrapping all the way down the window.
Here is the code element for the feature in question followed by the CSS...
HTML
<form id="defaultform" class="rounded" name="form2" method="post" action="<?php echo $editFormAction; ?>">
<h3>Contact Form</h3>
<div class="field">
<label for="hostess_fname">First Name:</label>
<input type="text" class="input" name="hostess_fname" value="" id="hostess_fname" />
<p class="hint">Enter your name.</p>
</div>
<div class="field">
<label for="email">Last Name:</label>
<input type="text" class="input" name="hostess_fname" value="" id="hostess_lname" />
<p class="hint">Enter your email.</p>
</div>
<input type="submit" value="Lookup Hostess" />
<input type="hidden" name="Lookup" value="form2" />
CSS
#defaultform {
width: 500px;
padding: 20px;
background: #f0f0f0;
overflow:auto;
/* Border style */
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
/* Border Shadow */
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
label {
font-family: Arial, Verdana;
text-shadow: 2px 2px 2px #ccc;
display: block;
float: left;
font-weight: bold;
margin-right:10px;
text-align: right;
width: 120px;
line-height: 25px;
font-size: 15px;
}
#defaultform.input{
font-family: Arial, Verdana;
font-size: 15px;
padding: 5px;
border: 1px solid #b9bdc1;
width: 300px;
color: #797979;
}
.hint{
display: none;
}
.field:hover .hint {
position: absolute;
display: block;
margin: -30px 0 0 455px;
color: #FFFFFF;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.6);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
I just updated the code with more of the HTML from a shorter form that I was trying with the same CSS. I also added some more of the CSS code. I'm getting the same behavior. I'm still confused on selectors and how those are defined and stuff.
I see what you're doing now that you've added your code. It's a pretty simple fix, but hard to catch:
CSS
.field{
clear:both;
}
Here's the jsFiddle