I'm trying to get this css layout to work with IE7 and I'm a bit stuck. Any thoughts on how I can get the form to look like it does in FF and Chrome without changing the page structure? I know there are some IE specific CSS hacks out there, but I'm not totally sure how to apply them.
In FF and Chrome the form correctly displays the form as follows:
title
first last
street
city state zip
occupation bday
In IE the form is all jumbled:
title last state zip
street
city
CSS
...
form label { float: left; margin: 0px 10px 0px 0px; }
form input { width:100%; }
form select { width:100%; }
form label.field-title { width: 50px; clear: left; }
form label.field-title select { width: 50px; }
form label.field-first { width: 150px; clear: left; }
form label.field-last { width: 150px; }
form label.field-street{ width: 310px; clear: left; }
form label.field-city { width: 150px; clear: left; }
form label.field-state { width: 70px; }
form label.field-zip { width: 70px; }
form label.field-occupation { width:150px; clear:left; }
form label.field-bday { width:150px; }
...
HTML
...
<form>
<fieldset>
<legend>Basic Information</legend>
<label class="field-title">
Title *<select name="EmployeeName.Title">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
</label>
<label class="field-first">
First Name *<input name='first' /></label>
<label class="field-last">
Last Name *<input name='last' /></label>
<label class="field-street">
Street *<input name='street' /></label>
<label class="field-city">
City *<input name='city' /></label>
<label class="field-state">
State *<select name='state' >
<option>test</option></select></label>
<label class="field-zip">
Zip *<input name='zip' /></label>
<label class="field-occupation">
Occupation *<input name='occupation' /></label>
<label class="field-bday">
Birth Day *<input name='bday' /></label>
</fieldset>
</form>
...
Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
I don't think you can without modifying the source. IE6/7 uses different float logic than the other browsers and there is not any way to tell them "don't float this all the way to the top".
This is why most forms use some sort of wrapper to clear the rows. I use divs
<div class="row">
<label class="field-title">
Title *<select name="EmployeeName.Title">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
</label>
</div>
<div class="row">
<label class="field-first">
First Name *<input name='first' /></label>
<label class="field-last">
Last Name *<input name='last' /></label>
</div>
.row {clear:both;}
EDIT: I added a width to the fieldset and a right margin to the title label:
form fieldset { width:320px; }
form label.field-title { width: 50px; margin: 0 250px 0 0; clear: left; }
This makes the title <label> take up most of the fieldset width, forcing the other elements down into place.
You can see a demo of this by going here with IE7: http://demo.raleighbuckner.com/so/1369556/
EDIT 2: The best solution to this is to do as Emily (and wheresrhys in a comment to Emily's answer) suggests and put each line of your form fields in a wrapper. Personally, I like to use unordered lists (like wheresrhys). An example of this can be seen in this demo: http://demo.raleighbuckner.com/so/1369556/default2.htm
form label { float: left; margin: 0px 10px 0px 0px;display:inline}
might work as display:inline tends to make ie behave itself better with floats & clears, but is ignored by good browsers when the element is floated.
As Emily said, it's not going to work with floats... But then of course, you can just not use floats where appropriate.
Change the following statements from your original CSS, turning them from floats into (inline) blocks:
form label.field-title { width: 50px; float: none; display: block; }
form label.field-last { width: 150px; float: none; display: inline-block; }
form label.field-street { width: 310px; float: none; display: block; }
form label.field-zip { width: 70px; float: none; display: inline-block; }
This will continue to work in other (recent) browsers too.
How does it work?
The problem with IE7's floats is that they can "bubble up" through other floats. E.g. the reason field-last ends up next to field-title is because it doesn't clear its left unlike field-first. But instead of staying next to the field-first it just moves up through it next to field-title.
The easiest way to fix that is simply to make field-title a block. That prevents it from any following floats appearing next to it. The same goes for field-street. You don't want anything to appear next to it, so you can just turn it into a block.
That doesn't work with field-last, however, because in standards-compliant browsers, the block essentially contains the preceding float. But since that already takes up its full width, there's no room left next to it. Making it an inline-block instead does let it keep its block properties while putting it next to the float, instead of encompassing it.
The same thing goes for the field-zip, with only one difference. field-last is already followed by a block, so it doesn't have to worry about anything floating to its right. field-zip, though, is followed by a float, so that needs to clear its left to prevent it from coming up next to the Zip code.
Related
I have a problem with my web form fields not lining up properly.
see screenshot: http://awesomescreenshot.com/00cw0c80e
The label is longer than normal BUT I need it to be that long. If I shorten the label, it lines up find as expected.
Anyone can help?
Thanks! :)
ps. I've looked at various samples in the net but no go.
my css
input.issu {
margin-bottom: 8px;
width: 220px;
}
label.issu {
display: block;
float: left;
margin-bottom: 8px;
padding-left: 10px;
padding-right: 10px;
width: 270px;
text-align: left;
vertical-align: top;
}
select.issu {
margin-bottom: 8px;
width: 240px;
}
br.issu {
float: clear;
}
my html code (I've tried with and without div tags)
<div>
<label for="departingFrom" class="issu">Direct flight into Singapore from (please name city)<span class="red">* required</span></label>
<input id="departingFrom" name="departingFrom" class="issu" value="" type="text">
<br class="issu">
</div>
<div>
<label for="additionalInfo" class="issu">Additional info(e.g. accompanying family members)<span class="red">* required</span></label>
<input id="additionalInfo" name="additionalInfo" class="issu" value="" type="text">
<br class="issu">
</div>
add overflow:hidden property to container div of label and input as follow. It will work fine.
css:
div{
overflow:hidden
}
Use a table, putting the labels in one column, input fields in another. Then set vertical-align on the cells as desires (there are different interpretations on what “lining up” means in a case like this).
Is there any way to have a label respond to focus. I have some code where the textfield has a different style on focus. The label also however needs a slightly different style. I tried this but it did not effect the label.
#header .search label {
background:url(http://www.golfbrowser.com/images/icons/search.png) left top no-repeat;
padding-left:20px;
height:20px;
float:right;
}
#header .search label:focus {
background:url(http://www.golfbrowser.com/images/icons/search-z.png) left top no-repeat;
padding-left:20px;
height:20px;
float:right;
}
#header .search input {
padding:0px;
border:0px;
width:140px;
height:20px;
float:left;
padding-right:10px;
background:url(http://www.golfbrowser.com/images/icons/searchbar.png) right top no-repeat;
}
#header .search input:focus {
padding:0px;
width:190px;
height:20px;
float:left;
padding-right:10px;
background:url(http://www.golfbrowser.com/images/icons/searchbar-z.png) right top no-repeat;
}
The label contains an image and the other part of a round corner and it too must change colour in order for the field to look correct.
Any ideas,
Marvellous
You can't actually give focus to a label. It's not a focusable form element. Besides, even if you could do that, then whatever previously had focus (that means your input) would lose it to the label anyway.
You may have to restructure your HTML (and modify your CSS accordingly) so that you can select input:focus and then that input's corresponding label. For instance, if you moved your label after your input and used the following CSS selector for your label, you should be able to accomplish what you want.
#header .search input:focus + label
BoltClock's answer is the more semantic, lightweight way of achieving this functionality. However it's not always possible to have a specific HTML structure (especially to facilitate a minor feature like this) and CSS lacks the ability to traverse up the HTML hierarchy. To get around that, here are two alternatives. The first is coming soon (CSS spec 4) and the second is our old mate Javascript.
First up, CSS4's :focus-within pseudo selector. This does exactly what it says on the tin (scopes based on any child element's active focus state). Read more about the spec here. So assuming you have a HTML structure of:
<div class="input-wrapper">
<label for="elem">Label Text
<input name="elem" id="elem" type="text" />
</label>
</div>
you could scope the 'focussed' label by simply:
label:focus-within{}
by the same token, you could also scope the parent div with:
div.input-wrapper:focus-within{}
Magical. But not for use today :(
Second up, if you're already using a JS selector engine (i.e. jQuery, Sizzle, etc.), you could also do something along the lines of:
$('input').on("focus", function(){
var input = $(this);
// assuming label is the parent, i.e. <label><input /></label>
var label = $(this).parent();
label.addClass('focussed');
input.on("blur", function(){
label.removeClass('focussed');
input.off("blur");
});
});
This is untested but the essence of what this achieves is using a class rather than the :focus pseudo selector. So you can add your focussed styles to label.focussed{}. I've added (and self-removed) the blur handler to facilitate removing the class.
Now using Flex box will solve this. Have the label element follow the input element in the HTML. Then use flex-direction: column-reverse to change its position to appear above the input element. You can then use the input:focus + label: {} to target the label.
.input-container {
display: flex;
flex-direction: column-reverse;
}
.input-container > input {
/* your input styles */
}
.input-container > input:focus + label {
/* targets the label when the input receives focus */
color: red;
}
<div class="input-container">
<input type='email' />
<label>Email</label>
</div>
use:checked instead of :focus and you must give id,name,value into 'input'.
Found a good solution - order property made a trick:
input:focus {
background-color: #F2FFF0;
}
* {
font-family: "Arial";
font-size: 13px;
}
div.settings {
display:grid;
grid-template-columns: max-content max-content;
grid-gap: 7px
}
div.settings label {
text-align:right;
padding-top: 3px
}
div.settings label:after {
content: ":";
}
div.settings input:focus + label:before {
content: "\25B6 ";
font-size: 12px;
color: red;
}
input {
border: 1px solid #ccc;
padding: 2px 4px;
font-size: 13px;
}
<div class="settings">
<input style="order:2" type="text" title="(vardas, pavardė ir pan.)" autocomplete="off" id="name" name="name" required minlength="4" maxlength="128" size="50"><label style="order:1" for="name">Pirkėjas</label>
<input style="order:4" type="text" title="" autocomplete="off" id="company" name="company" required minlength="4" maxlength="128"><label style="order:3" for="company">Įmonės pavadinimas</label>
<input style="order:6" type="text" title="" autocomplete="off" id="companyCode" name="companyCode" required minlength="4" maxlength="128"><label style="order:5; min-width: 160px" for="companyCode">Įmonės (asmens) kodas</label>
</div>
I don't have experience as a web designer, but in effort to learn more about CSS, I'm doing the stylesheet for my own page. I am aware the way I'm doing it now probably sucks, is not the recommended way, but please help me understand why this isn't working.
I have this form:
<form action="/register" method="POST" id="registration_form">
<p>
<label for="username">Username</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">Password</label>
<input type="password" id="password" name="password"/>
</p>
</form>
I have included Eric Meyer's CSS reset, before including my own stylesheet, and I have this rule in my CSS:
#registration_form label {
width: 100px;
}
I also tried to put:
label {
width:100px;
}
I tried changing the value to more than 100px, but still it doesn't get applied. If it helps, I have a layout, which contains something like this:
<body>
<div id="navigation">
...
</div>
<div id="pagebox">
{% block body %}{% endblock %}
</div>
</body>
This is a jinja2 template, and the content of body is added by some different view, when it's rendered. Here are the styles for these id's:
#navigation {
text-align:center;
}
#navigation ul li {
display:inline;
margin-left:50px;
}
#pagebox {
margin-left:50px;
margin-right:50px;
height:600px;
background-color: #20f000;
}
Why isn't my label style getting applied?
I believe that <label> has the display:inline by default, so width and height do not affect it. Try adding display: inline-block to it.
Added: As member Geoff Adams noted in the comments, there are some browser compatibility issues with display: inline-block. In this specific scenarion it should work, but see here for more information.
The label element is an inline element, so the width style doesn't apply to it.
You could make the label and input element float inside the p elements. Applying overflow to the p element makes it work as a container for the floating elements:
#registration_form p {
overflow: hidden;
}
#registration_form p label {
float: left;
width: 100px;
}
#registration_form p input {
float: left;
}
Eventually, our team would like to move away from tables, but it seems like div tags are so much harder to use. In the above image, the layout was created using a table, but I cant figure out how to get a basic column structure working using div tags. How can I get those buttons on the same line? HTML newbie here.
Not too difficult:
HTML:
<form id="login">
<div>
<label for="user">Username:</label>
<input id="user" type="text" size="20">
</div>
<div>
<label for="pass">Password:</label>
<input id="pass" type="password" size="20">
</div>
<div>
<input id="cancel" type="reset" value="Cancel">
<input id="submit" type="submit" value="Login">
</div>
</form>
CSS:
#login {
background-color: #FEFEDD;
border: 3px solid #7F7F7F;
display: inline-block;
padding: 20px;
text-align: right;
}
#login div {
padding: 5px;
}
#login label {
font-weight: bold;
margin-right: 5px;
}
#login #cancel {
float: left;
}
Live Demo
To be short, if you want to put many elements with div tags in the same line you should give for each div a left float and a width. For example:
<div style="width:50px; float:left;"> Element 1</div>
<div style="width:50px; float:left;"> Element 2</div>
...
As bad as it is to use tables for positioning elements on a page, forms is one exception I often make. Sure you can float your DIVs, but you're going to write a lot more code to do that than using tables. Plus we're talking about a tabular format with rows and columns. If you're not supposed to use tables for a tabular format, then why have the tags in the HTML at all?
If you give the elements a position:absolute then you can set the left: value and the top:value to align the buttons.
div#cancelbutton {
position: absolute;
top:50px;
left:30px;
}
div#loginbutton {
position:absolute;
top:50px;
left:300px;
}
This will place the element quote: relative to the first parent element that has a position other than static.
Check out http://www.w3schools.com/Css/css_positioning.asp
Maybee is better to use float:let then display: inline-block; because IE9 could display textboxes in two rows.
Check http://interestingwebs.blogspot.com/2012/10/div-side-by-side-in-one-line.html for examples.
I am trying to create tableless Form using and tags, im stuck.
I want the form look like this:
I should be able to set the width of textbox, text area and select in CSS.
Make each row a <p> containing a <label> and an <input>, both display: inline-block with preset width. (The <label> should be text-align: right)
The buttons can be float: right.
This is a good walk through: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
check out working example here:
http://jsfiddle.net/bRm3P/2/
<form>
<label>To: <input type="text" /></label>
<label>Subject: <input type="text" /></label>
<label>Message: <textarea></textarea></label>
<div class="submit-container">
<input type="submit" value="submit"/><input type="submit" value="submit"/>
</div>
</form>
<style>
form {
width: 500px;
}
label {
display: block;
text-align: right;
margin-bottom: 4px;
}
label input,label textarea {
border: 1px solid #DEDEDE;
width: 80%;
vertical-align: top;
}
.submit-container {
padding-top: 4px;
text-align: right;
}
</style>
A nice semantic layout would be one of the following:
<ul>
<li><label>To <input></label></li>
...
</ul>
Or with a dl (more common):
<dl>
<dt><label>To</label></dt><dd><input></dd>
...
</dl>
You will find lots of ways to layout the latter if you google for: definition list layout form