Trying to figure out why in IE7, the nested input element is taking on the margin of the parent div. So in essense the margin is being doubled.
<style>
<!--
h1.redsubhead{font-size:14px;}
.accountInfo,.loginInfo{-moz-border-radius: 6px 6px 6px 6px;background: #EBFBFF; border: 1px solid #8DCAD9;margin-bottom: 30px;padding:10px;}
#ai_pw_wrap,#li_pw_wrap{border:1px solid #f0f;margin-right: 30px;padding:0;}
#ai_email_wrap{margin-right:30px;padding:0;}
.ai_wrap,.li_wrap{float:left;}
.ai_email_input, .li_email_input,.li_pw_input{width:170px;}
.ai_pw_input{width:130px;}
.ai_label,.li_label{font-size: 11px; font-weight: bold;}
.ai_link,.li_link{font-size: 9px; float:right}
h1.redsubhead{float:left;}
#li_btn_wrap{margin-top:10px;float:right;}
.ai_wrap input{margin:0 !important;}
.ai_label{margin:0}
-->
</style>
<div class="accountInfo">
<h1 class="redsubhead">Account Info</h1>
<a class="ai_link" href="#">Returning Member Login</a>
<div class="clear"></div>
<div id="ai_email_wrap" class="ai_wrap">
<label for="edit-payment-new-card-cc-cardholder" class="ai_label">E-mail: </label><br>
<input type="text" class="ai_email_input" value="John Doe" size="60" maxlength="128">
</div>
<div id="ai_pw_wrap" class="ai_wrap">
<label for="edit-payment-new-card-cc-cardholder" class="ai_label">Password: </label><br>
<input type="text" class="ai_pw_input" value="John Doe" size="60" maxlength="128">
</div>
<div id="ai_pwc_wrap" class="ai_wrap">
<label for="edit-payment-new-card-cc-cardholder" class="ai_label">Password Confirm: </label><br>
<input type="text" class="ai_pw_input" value="John Doe" size="60" maxlength="128">
</div>
<div class="clear"></div>
</div>
<div class="loginInfo hide">
<h1 class="redsubhead">Login</h1>
<a class="ai_link" href="#">New User Signup</a>
<div class="clear"></div>
<div id="li_email_wrap" class="li_wrap">
<label for="edit-payment-new-card-cc-cardholder" class="li_label">E-mail: </label><br>
<input type="text" class="li_email_input" value="John Doe" size="60" maxlength="128">
</div>
<div id="li_pw_wrap" class="li_wrap">
<label for="edit-payment-new-card-cc-cardholder" class="li_label">Password: </label><br>
<input type="text" class="li_pw_input" value="John Doe" size="60" maxlength="128">
</div>
<div id="li_btn_wrap">
<input type="image" src="/img/checkout/li_login.png" class="li_submit" value="start" name="submit_order">
</div>
<div class="clear"></div>
</div>
Any suggestions?? I did find a fix, if I change the margin-right:30px to padding-right:30px. I still want to know why the margin on the nested input is taking on the margin of the parent div.
You're looking at a known bug in IE7 (and, I think, 6) called the "inherited margin bug".
The first child input of an element with the hasLayout property triggered (for example via zoom:1, a clearfix, setting a height or width) will inherit the sum of the left margins of its ancestors.
The workarounds (from this article) are:
(Most common) Set a negative margin-left on the input. That will counteract the inherited margins. Use something like input { *margin-left: -30px; } to only target IE7 and below.
Don't use margins on the ancestors of the input.
Un-do whatever triggered hasLayout on the parent element of the input.
Put an inline element (say, a <label>) and some text immediately before the input.
Wrap the input in another inline element (<span>, <label>, whatever).
Can you try applying a display: inline rule to your floated element.
.ai_wrap,.li_wrap{float:left; display:inline;}
and check again?
Related
I am using Squarespace and trying to move the margin of the first .field.text.three-digits using "nth-of-type", but I can't get it to work right.
CSS:
.form-item.fields.phone:nth-of-type(3) {
background-color: red;
margin-left: 20%;
}
HTML:
<fieldset id="phone-yui_3_17_2_1_1531771537607_16560" class="form-item fields
phone">
<div class="title">Phone</div>
<legend>Phone</legend>
<div class="field text three-digits" id="yui_3_17_2_1_1531936132691_509">
<label class="caption" id="yui_3_17_2_1_1531936132691_508"><input
class="field-element" x-autocompletetype="phone-area-code" type="text"
maxlength="3" data-title="Areacode" id="yui_3_17_2_1_1531936132691_507">
(###)</label>
</div>
<div class="field text three-digits">
<label class="caption"><input class="field-element" x-
autocompletetype="phone-local-prefix" type="text" maxlength="3" data-
title="Prefix">###</label>
</div>
<div class="field text four-digits">
<label class="caption"><input class="field-element" x-
autocompletetype="phone-local-suffix" type="text" maxlength="4" data-
title="Line">####</label>
</div>
</fieldset>
Thanks!
This code:
.form-item.fields.phone:nth-of-type(3)
Will apply the styles to the third element it finds with these three classes
form-item fields phone
If you want to modify the first instance of an element with the classes field text three-digits, your CSS should be something like this:
.field.text.three-digits:nth-of-type(2) {
background-color: red;
margin-left: 20%;
}
I have a below set of input text elements in my page. I actually need to apply style to div element of "forms_in_ap" class containing the #email, #reEmail, #nogInFirstName, #nogInAccNumber elements alone, in Safari browser of all MAC and IOS devices.
CSS to apply style to specific elements of specific div:
html[xmlns*=""]:root
.form_input_wrap input#email,
.form_input_wrap input#reEmail,
.form_input_wrap input#nogInFirstName,
.form_input_wrap input#nogInAccNumber
{
height: 42px;
}
HTML Code:
<div class="asd removeFocus">
<div class="forms_in_ap removeFocus">
<label for="email">Email address</label>
<div class="removeFocus">
<input type="text" id="email" name="email" class="required error ">
<span id="email-error" class="error">Please enter a Valid Email Address.</span>
</div>
</div>
<div class="forms_in_ap removeFocus">
<label for="reEmail">Re-enter email address</label>
<div class="removeFocus">
<input type="text" id="reEmail" name="reEmail" maxlength="64">
</div>
</div>
</div>
<div class="form">
<div class="forms_in_ap">
<label for="nogInFirstName">First Name</label>
<div>
<input type="text" name="txtFName" maxlength="15" id="nogInFirstName">
</div>
</div>
<div class="forms_in_ap">
<label for="nogInLastName">Last Named</label>
<div>
<input type="text" name="txtLName" maxlength="15" id="nogInLastName">
</div>
</div>
<div class="forms_in_ap">
<label for="nogInAccNumber">Coupon Number</label>
<div>
<input type="text" name="shcCreditCardNumber" maxlength="19" id="nogInAccNumber">
</div>
</div>
<div class=" forms_in_ap">
<div class="ccvDiv">
<label for="cvv"> pin</label>
<div>
<input type="text" class="cvvWidth required" name="cvv" id="cvv" maxlength="3">
</div>
</div>
</div>
</div>
The above CSS works fine but not sure whether this is a correct, standard or optimize code please suggest me.
Since you have each specific input with an HTML ID, there is no need for you to specify the parent class.
This should work for you, it's cleaner and simpler:
input#email,
input#reEmail,
input#nogInFirstName,
input#nogInAccNumber
{
height: 42px;
}
The most important thing to remember here is that IDs are unique. You can't have two elements with the same ID, so adding the parent element when styling is not necessary.
Note about the "input": Since the IDs are unique, there's no need to have the "input" before the ID, but it can be seen as good practice for elements such as inputs to have the selector prior to the class/id, making it clearer what you're styling.
However, this doesn't apply to things like divs, since almost everything on the web is a div, adding it before a class/id is just overkill.
Using Bootstrap version 2.3.2, I have a form layout like the below image and since the checkbox has an inline label, there is an aligning issue.
Adding margin to input[type="checkbox"] only gives margin to the checkbox, not the inline label. How do I make it so the checkbox and its label vertically align to the text fields next to it?
Here is the
JS BIN if you are interested.
In your HTML add a class that will handle the checkbox margin:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text" />
</div>
<div class="span3">
<label>label 2</label>
<input type="text" />
</div>
<div class="span3 checkbox">
<input type="checkbox" />test description
</div>
</div>
</div>
and in your CSS:
input[type="checkbox"] {
// i just remove this part..
}
.checkbox {
margin: 30px 0 0 0;
}
Don't put the margin on the checkbox, but on the parent div.
Check this jsFiddle.
Hope this helps
Try to always use something like this:
<div class="span3">
<label for="checkbox" class="checkbox">
<input type="checkbox" id="checkbox" class="checkbox">test description
</label>
</div>
http://jsbin.com/itAdAWA/1/edit
How about putting a <label> before the checkbox like this? ..
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text">
</div>
<div class="span3">
<label>label 2</label>
<input type="text">
</div>
<div class="span3">
<label>test</label>
<input type="checkbox">
</div>
</div>
</div>
Bootply: http://bootply.com/86998
I just solved this exact problem in bootstrap 3, by simply limiting the height of inline checkboxes to 12 pixels. They are by default 40px, I don't know why !
<div class="checkbox-inline">
<label>
<input type="checkbox" checked="checked" />
<span>My correctly aligned check-box</span>
</label>
</div>
add this in your css file (I personally have a css file named bootstrap-custom.css):
/*
Checkboxes in inline forms are misaligned because for an unknow reason they inherit a height of 40px !
This selector limit the height of inline checkboxes to 12px which is the perfect value to align them to
the other widgets in an inline form.
*/
.radio-inline, .checkbox-inline {
max-height: 12px;
}
Not ideal solution but change your code to ...
<div class="span5">
<input type="checkbox">test description</input>
</div>
and set the margin-top on that. I will result as you want - better.
Bootstrap v5+
<!-- mt-md-4 pt-md-3 this apply margin and padding only for desktop -->
<div class="col-md-3 mb-3 md-mt-4 md-pt-3">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
Simple question, and undoubtedly an easy solution--I'm just having a lot of trouble finding it despite searching SO and Google for a while.
All I'm looking to do is take the snippet of text "I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)" and having it aligned to the right of the check box (with the text left aligned), but not wrapping around it like it is now.
Here's my JSFiddle
Code (using PureCSS for styling):
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Product Name</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Contact Name</label>
<input id="password" type="text" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Contact Email</label>
<input id="email" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="foo">Website</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-control-group">
<label for="foo">Description:</label>
<textarea id="description" type="text" placeholder="Enter description here..."></textarea>
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox">
I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
Any help would be much appreciated. Thanks.
Here's a simple way. There are probably others.
<input id="cb" type="checkbox" style="float: left; margin-top: 5px;>">
<div style="margin-left: 25px;">
I'm interested in an enhanced listing or premium profile,
(a member of our team will respond promptly with further information)
</div>
I used a div to "block" structure the text and moved it to the right. The float: left on the input keeps the checkbox to the left of the text (not above). The margin-top on the input tweaks the top alignment with the text.
The fiddle.
This is the method, that I used. It worked better for me than the many other methods I found on SO.
LABEL.indented-checkbox-text
{
margin-left: 2em;
display: block;
position: relative;
margin-top: -1.4em; /* make this margin match whatever your line-height is */
line-height: 1.4em; /* can be set here, or elsewehere */
}
<input id="myinput" type="checkbox" />
<label for="myinput" class="indented-checkbox-text">I have reviewed the business information and documentation above, and assert that the information and documentation shown is current and accurate.</label>
Try floating the check box left, and then wrap the text in a div with "overflow: hidden;". Maybe additionally, add some padding as I did below to give the text some breathing room from the check box (the padding is optional though).
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox" style="float: left;">
<div style="overflow: hidden; padding: 0px 0px 0px 5px;">
I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
</div>
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
I have two examples of a label and a text field that I'm trying to align (You can see it in this fiddle). In the first example I have a label and a text field like this:
<label for="firstname" style="width:100px;display:inline-block;background-color:red;">Firstname: </label>
<input type="text" style="margin:0;padding:0;" id="firstname" name="firstname" value="" />
In the second example, I have a label and a three floated text fields in a div like this:
<div>
<div style="width:100px;float:left;background-color:red;">Date: </div>
<div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
<label for="day">Day</label>
</div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
<label for="month">Month</label>
</div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
<label for="year">Year</label>
</div>
</div>
</div>
As you can see above, I give each label a width of 100px, but for some reason, in the second example, there is no space between my label and the first text field. Does anybody know why this is happening and why my width of 100px does not seem to have any effect in my second example (view fiddle link above).
Thank you
You can use inline-block instead of float to make it appear as of the previous section to get the margin effect else you need to add a margin with floated element.
<div style="width:100px;display:inline-block;vertical-align:top;background-color:red;">Date: </div>
<div style="display:inline-block;">
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
<label for="day">Day</label>
</div>
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
<label for="month">Month</label>
</div>
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
<label for="year">Year</label>
</div>
</div>
Demo
or add a margin.
<div style="width:100px;float:left;margin-right:4px;background-color:red;">Date: </div>
Demo
On a side note, consider using css rules instead of inline styles
The space is because the first element is a replaced inline element, which kinda has the same behaviour as inline-block and adds margin.
And for the width, remove size="2" and maxlength="2" to make it the same with as the upper input fields
Well first of all your first example with the "Firstname" label is using a "label" tag which is treated differently then a "div". That brings me to the second example of "Date" which is surrounded by "div" tags. Because of this, the default way for the browser to handle them is different.
You could easily compensate for this difference by adding a right margin to the label using the "div" to surround it.
<div style="width:100px;float:left;background-color:red; margin-right:5px;">Date: </div>
Although it is ok to use inline styles, I would suggest if you are going to be using this in a larger document to put this inside a external CSS file and use a class (or ID) for the div instead.