my current markup is as follows:
<li class="multi_answer">
<label for="checkbox2">
<div class="multi_answer_box">
<input type="checkbox" id="checkbox2" name="checkbox2" class="multi_box" />
</div>
<div class="multi_answer_text">Checkbox Label</div>
</label>
</li>
works great in everything BUT firefox.
after inspecting the markup, it's reading it as...
<li class="multi_answer">
<label for="checkbox1"> </label>
<div class="multi_answer_box">
<input id="checkbox1" class="multi_box" type="checkbox" name="checkbox1">
</div>
<div class="multi_answer_text"> Increased counseling staff </div>
</li>
ideas why FF would be interpreting it this way?
I also am using this css
.multi_answer label:hover {
background:#DDD;
}
.multi_answer_box input {
padding-left:5px;
padding-right:5px;
float:left;
height:48px;
width:48px;
}
.multi_answer label {
overflow: auto;
cursor:pointer;
width:auto;
margin:10px;
padding: 10px;
-moz-border-radius: 7px;
border-radius: 7px;
background:#CCC;
display:block;
}
http://jsfiddle.net/NhD3r/1/ <---- working example
Probably because label must contain inline elements only, and not block elements like div.
SOLUTION
replacing all div's with span's retained intended styling and function while complying with above stated rule.
<li class="multi_answer">
<label for="checkbox2">
<span class="multi_answer_box">
<input type="checkbox" id="checkbox2" name="checkbox2" class="multi_box" />
</span>
<span class="multi_answer_text">Checkbox Label</span>
</label>
</li>
I can't replicate your problem, I'm using FF6, anyway, you should try to validate your HTML and see if there's anything that may cause FF to behave the way it does. Also try clearing you cache (you can never know...)
You can reorganize the HTML structure to be valid and follow the spec and still get the effect you want.
<li class="multi_answer">
<div class="multi_answer_box">
<input type="checkbox" id="checkbox3" name="checkbox3" class="multi_box" />
<label for="checkbox3">Did some additional important stuff and things,
with a description that's long enough to wrap</label>
</div>
</li>
See the updated fiddle.
I made these changes and tested using Firefox 3.6.12 on Linux.
Related
I have encountered a problem where I tried to click between black lines and it doesn't triggered anything, but triggers when clicked on the black lines. I added div so that I can add cursor pointer around the area. I am aware that it must be something with the for=nav-trigger located in the html, however "for" doesn't work with div. Is there a workaround?
<div id="menu">
<input type="checkbox" id="nav-trigger" class="nav-trigger"/>
<label id="menuButton" for="nav-trigger"></label>
</div>
Here is the link to jsfiddle: https://jsfiddle.net/dxs6040/51wdfypj/14/
Use the html like this:
<div id="menu">
<label for="nav-trigger">
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<span id="menuButton"></span>
</label>
</div>
and add this to css:
label {
position: absolute;
height: 100%;
width: 100%;
cursor: pointer;
}
jsfiddle:
https://jsfiddle.net/e9qafkbr/
I'm new to all of this so I have a question and it's probably silly but here we go anyway.
I have this HTML for a form but I need to use CSS to align my labels to the left of the text box and not have it sit on top. I don't know what CSS to use in order to do this.
<form action="process.php">
<h1>Registration</h1>
<ol>
<li>
<label for="name">Name:</label>
<input type>"text" id="name" name="name">
</li>
</ol>
</form>
There are three more "labels" like this in my ol but I don't feel like typing them all out.
I need the labels to the left aligned with my text boxes.
I have tried:
label{display:inline-block}
And:
label ol{display:inline-block}
I've tried giving floats, the text book (yes this is for a college class) says to do this:
.label{
display:inline-block;
}
But that doesn't seem to work either. Please tell me how on earth I can do this.
Here is my exact CSS so far:
h1{font-family:Oregano;}
form{margin-bottom:1em;}
form ol{list-style-type:none;}
form li{width:100px;
border:1px solid black;
text-align:right;
background-color:black;
color:white;
margin:20px;
height:20px;
white-space:5px;}
It looks exactly like it should, I just have an issue with the alignment of the labels. Have I mentioned how much I hate this crap? I'm changing my major! (not really... but still)
Are you looking for something like this? If so, then no CSS is needed.
<ol>
<li>
<label for="name">Name:</label>
<input type="text" value="some text" />
</li>
<li>
<label for="name">Name:</label>
<input type="text" value="some text" />
</li>
<li>
<label for="name">Name:</label>
<input type="text" value="some text" />
</li>
</ol>
So using your updated CSS here is a Solution:
form {
margin-bottom: 1em;
}
form ol {
list-style-type: none;
}
form li {
margin: 20px;
height: 20px;
white-space: 5px;
}
form label {
width: 100px;
border: 1px solid black;
text-align: right;
background-color: black;
color: white;
}
<form>
<ol>
<li>
<label for="name">Name:</label>
<input type="text" value="some text" />
</li>
<li>
<label for="name">Name:</label>
<input type="text" value="some text" />
</li>
<li>
<label for="name">Name:</label>
<input type="text" value="some text" />
</li>
</ol>
</form>
Both the label and the input must me inline/inline-block
label, input{
display:inline-block;
}
They of course must be next to each other, with the label on the left side in your case.
Btw: it's not a good idea to have labels & inputs inside li elements
If you check your example:
<form action="process.php">
<h1>Registration</h1>
<ol>
<li>
<label for="name">Name:</label>
<input type="text" id="name" />
</li>
</ol>
</form>
you will see that its like you want by default.
So it must be a problem in some CSS rule that gives display block to the input or label tag (or both)
Try this:
label, input {display:inline-block !important}
"!important" at the end is there just in case you need to override some other rule.
I have the following element on my form:
<li>
<label class="fixed" for="Interests">Program genre interests:</label>
<label for="Sports"><%=Html.CheckBox("Sports")%>Sports</label>
<label for="Comedy"><%=Html.CheckBox("Comedy")%>Comedy</label>
<label for="News"><%=Html.CheckBox("News")%>News</label>
<label for="Drama"><%=Html.CheckBox("Drama")%>Drama</label>
<label for="Reality"><%=Html.CheckBox("Reality")%>Reality</label>
<label for="Kids"><%=Html.CheckBox("Kids")%>Kids'</label>
</li>
The "fixed" class simply makes the label an inline block with a fixed width (to align the fields properly). The problem shows up if the check boxes are forced to wrap for whatever reason, because the second row of check boxes starts back underneath the label, rather than left aligned with the first row of check boxes.
I'm trying really hard to minimize the necessary markup / styling here, but I'm not sure the most efficient way to achieve the alignment I'm looking for. What I'm getting is:
label text here: cb1, cb2, cb3, cb4
cb5, cb6, cb7, etc...
And what I want is
label text here: cb1, cb2, cb3, cb4
cb5, cb6, cb7, etc...
What is the shortest / simplest html / css to achieve this?
Edit: I should note that I'm trying to avoid using floats because the rest of the page will contain some floated elements and I've had issues with nested floats before.
I'm affraid the only way to achieve this is to wrap all your checkboxes into a div element:
<li>
<label class="fixed" for="Interests">Program genre interests:</label>
<div class="checkboxes-wrapper">
<label for="Sports"><%=Html.CheckBox("Sports")%>Sports</label>
<label for="Comedy"><%=Html.CheckBox("Comedy")%>Comedy</label>
<label for="News"><%=Html.CheckBox("News")%>News</label>
<label for="Drama"><%=Html.CheckBox("Drama")%>Drama</label>
<label for="Reality"><%=Html.CheckBox("Reality")%>Reality</label>
<label for="Kids"><%=Html.CheckBox("Kids")%>Kids'</label>
</div>
</li>
And use the following CSS:
.fixed, .checkboxes-wrapper { float:left }
.checkboxes-wrapper { width: 200px; } /* 200px should be replaced by whatever size you want it to be */
you could do something like this, assuming by "not using floats" you mean "not using float:" css. if by "floated" you mean "absolutely positioned", just tell me and I'll remove the answer.
<style type="text/css">
ul.Container
{
list-style-type:none;
display:block;
position:relative;
width:400px;
}
li.Label
{
display:block;
position:absolute;
width:150px;
left:0px;
top:0px;
}
li.Checkboxes
{
display:block;
position:absolute;
width:250px;
left:150px;
top:0px;
}
</style>
<ul class="Container">
<li class="Label">
program genre interests
</li>
<li class="Checkboxes">
<input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test
</li>
</ul>
though you'll have to wrap each checkbox and label into some inline tag, otherwhise you might end up with a break between a checkbox and it's label.
How about this:
*{margin:0;padding:0}
li {text-indent:-170px;margin-left:340px;overflow:show;display:block;}
.fixed {display:inline-block;width:160px;}
label {display:inline-block;width:80px;}
Works for me in firefox.
You'll need to play with the values a bit to get it to work with any margins and padding you already have set on the li's
I have always used an ordered list element to mark up each form element, and extend this for boolean lists such as yours. it gives the advantage of grouping each label/boolean input while only adding semantic markup to the mix - it actually benefits users without stylesheets to have the forms marked up in this way ...
<li>
<label for="...">Filter by date</label>
<input id="..." name="..." tabindex="1" type="text" value="" />
</li>
<li
<label for="...">Filter by status</label>
<ol>
<li class="containsBoolean">
<label for="...">Online</label>
<input id="..." name="..." type="checkbox" value="" />
</li>
<li class="containsBoolean">
<label for="...">Paused</label>
<input id="..." name="..." type="checkbox" value="" />
</li>
<li class="containsBoolean">
<label for="...">Disabled</label>
<input id="..." name="..." type="checkbox" value="" />
</li>
<li class="containsBoolean">
<label for="...">Deleted</label>
<input id="..." name="..." type="checkbox" value="" />
</li>
</ol>
</li>
<li class="containsBoolean">
<label for="...">Show Deleted</label>
<input id="..." name="..." type="checkbox" value="" />
</li>
<li>
<button type="submit">Filter</button>
</li>
It is then easy to address each list node and use a common class for the boolean input styling ...
form fieldset ol li {
margin-bottom:24px;
position:relative;
}
form fieldset ol li.containsBoolean input[type=checkbox],
form fieldset ol li.containsBoolean input[type=radio] {
left:0;
position:absolute;
top:0;
}
form fieldset ol li.containsBoolean label {
line-height:24px;
margin-left:30px;
}
I seem to be having a strange problem which I can't fully understand.
This is my html:
<div class="menu">
Por favor seleccione os conteúdos:
<br/>
<br/>
<br/>
Nome:
<input name="Nome" class="checkbox" type="checkbox" value="Nome" checked />
<br/>
<br/>
Data:
<input name="Data" class="checkbox" type="checkbox" value="Data" checked />
<br/>
<br/>
Cliente:
<input name="Cliente" class="checkbox" type="checkbox" value="Cliente" checked />
<br/>
<br/>
Observações:
<input name="Observações" class="checkbox" type="checkbox" value="Observações" checked />
</div>
Inside an Html page with nothing else except the default stuff from Dreamweaver, placed inside the body.
With this CSS attached:
#charset "UTF-8";
/* CSS Document */
.menu
{
width:300px;
margin-left: auto;
margin-right: auto;
padding:10px;
border: 1px solid #000;
}
.checkbox {
float:right;
}
Now this code renders properly in Safari, text on the left and check boxes aligned on the right inside a div.
In Firefox it does not.
The checkboxes seem like they dropped a line.
It seems to be related to a problem I can't understand, but If the checkbox comes first like:
<br/>
<input name="Cliente" class="checkbox" type="checkbox" value="Cliente" checked />Cliente:
<br/>
It renders the intended way in Firefox although as expected its not good on Safari.
I can't seem to find what's causing the line drop.
Floats only affect code that follows them in the html. Since you have the input after the label, it will be floated right but on a new line. Different browsers render <br> in different ways.
A good cross-browser way to do checkboxes is
.cb-row {margin: 10px;clear:both;overflow:hidden;}
.cb-row label {float:left;}
.cb-row input {float:right;}
<div class="menu">
Por favor seleccione os conteúdos:
<div class="cb-row">
<label for="nome">Nome:</label>
<input id="nome" name="Nome" type="checkbox" value="Nome" checked />
</div>
<div class="cb-row">
<label for="data">Data:</label>
<input id="data" name="Data" type="checkbox" value="Data" checked />
</div>
<div class="cb-row">
<label for="cliente">Cliente:</label>
<input id="cliente" name="Cliente" type="checkbox" value="Cliente" checked />
</div>
<div class="cb-row">
<label for="ob">Observações:</label>
<input id="ob" name="Observações" type="checkbox" value="Observações" checked />
</div>
</div>
The label is floated left and the checkbox is floated right. They are contained in a row div that controls the margins between rows. I removed the class= from the input and instead styled the input in .cb-row input
An advantage of using label with the for= and input with the matching id=, is that when you click on the label, the checkbox will be selected/unselected.
I have a form which contains several checkboxes align vertically in a div. I want to remove the space between each checkbox. But I can't find any solutions.
<div style="height:100px;width:25px;float:left;">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</div>
Does anyone have any solution to this problem?
I found the solution:
<input type="checkbox" style="margin: 0; padding 0; height:13px"/>
For IE, you need to set the height to remove the space between checkboxes.
After talking to Paul O'B, a CSS guru, this is a good solution that works in IE 6, 7, 8, FF 3, and Chrome:
<style type="text/css">
#aDiv input {
margin: 0;
padding: 0;
display:block;
height:12px;
overflow:hidden
}
</style>
<div id="aDiv" style="width:25px">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
This is using a doctype of HTML 4.01 strict. if you want side-by-side borders for the checkboxes, use a height of 13px.
The attribute selector won't work on IE 6 so it is taken out here. If you need to add other input element that is not a checkbox, use class instead.
Probably newlines between <input> tags are interpreted as any other whitespaces, that's why you see spaces between them. I think CSS rules has nothing to do with it.
Edit: Further investigation leads me to conclusion that whitespaces would only affect horizontal gaps. As of vertical space I believe it is impossible to assure that checkboxes will stick together without using custom graphics — web browsers are not obligated to make them perfectly square by standards, so even if you will find a way to make their bounding boxes touch each other, effect might not be satisfactory.
To make their bounding boxes as close as possible set line-height attribute for div element. With original sprites it doesn't look like you wanted it to in any browser I have tested.
Using custom graphic of some height, and identical line-height should do the trick.
Another edit: Some people here proposed using fixed height of input element of 13px. Remember! It is wrong. You can't rely on a fact, that some browsers have built-in checkbox sprite of that height.
There is white-space between each checkbox. The only way to remove it is to float them:
<style type="text/css">
.myCheckBoxDiv > input[type="checkbox"]
{
float: left;
}
.myCheckBoxDiv:after
{
clear: both;
content: "";
display: block;
}
</style>
<div class="myCheckBoxDiv">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</div>
This worked for me:
<style type="text/css">
body,html,input {padding:0;margin:0;}
</style>
<div style="height:100px;width:25px;float:left;">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</div>
Edit: It's valid css now :)
Just set:
<input type="checkbox" style="margin: 0">
But it will not work in IE.
I think different browsers renders the html elements differently. So, it becomes difficult to get a complete hold on the situation.
However, I found one solution but this time we need to apply some trick on the body element.
The CSS will be like this:
<style type="text/css">
input.mycheckbox {
height: 13px;
width: 13px
}
body {
font-size: 40%;
}
</style>
And the contents within body tag is:
Hope this helps.