Below is an entire test page that I'm working on (I realize that it is still ugly and cluttered). My issue is with the ul class="dropdown". I'm intending on it being a replacement for a SELECT so I can style it (again, not done yet). However, I cannot seem to position it where I want it. If you look at this page in FF3.5, that is how I want it to be positioned. However, in IE7, it is pushing the UL onto the next line instead of butting up against the label. I've tried numerous hacks that I've found online and none seem to help. What am I missing here?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Radix Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
margin:0;
padding:1em;
font-family:arial,sans-serif;
}
.user-form li
{
background: #fff none no-repeat bottom right;
border: 1px solid #000;
margin: 0;
padding-right: 35px;
text-align: right;
}
.user-form li label
{
background: #fff;
border: 1px solid #333;
display: -moz-inline-stack; /* Support below FF3 */
display: inline-block; /* Used only to set width */
padding: 1px 0;
width: 10em;
}
.dropdown
{
border: 1px solid #f00;
width: 20em;
padding: 0;
margin: 0;
display:inline-block;
}
.dropdown ,
.dropdown ul
{
list-style-type:none;
}
.dropdown li
{
text-align: left;
}
</style>
</head>
<body>
<form id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2" class="edit-on" action="/service/testclass.php">
<fieldset>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:id" name="id" value="a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2" type="hidden"/>
<ul class="user-form">
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix">Prefix:</label>
<input value="Ms." id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix" name="name_prefix" type="hidden"/>
<ul class="dropdown">
<li>
Miss
</li>
<li class="dropcontainer">
<ul class="dropdownhidden">
<li>
</li>
<li>
Mister
</li>
<li>
Misses
</li>
<li>
Miss
</li>
<li>
Doctor
</li>
<li>
This is just a little test to see exactly how long this silly thing will make my option
</li>
</ul>
</li>
</ul>
<input name="name_prefix_value" value="Mr." type="hidden"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:last_name">Customer Last Name:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:last_name" name="last_name" value="Jones" type="text"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:first_name">My First Name:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:first_name" name="first_name" value="George" type="text"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:middle_name">Middle Name:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:middle_name" name="middle_name" type="text"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_suffix">Suffix:</label>
<select id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_suffix" name="name_suffix">
<option value="0"/>
<option value="Jr.">Junior</option>
<option value="Sr.">Senior</option>
</select>
<input name="name_suffix_value" type="hidden"/>
</li>
<li class="invalid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:birth_date">Date of Birth:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:birth_date" name="birth_date" type="text"/>
</li>
<li class="warning">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:gender">Gender:</label>
<select id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:gender" name="gender">
<option value="0"/>
<option value="U">Unknown</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
<input name="gender_value" type="hidden"/>
</li>
</ul>
<div class="form-actionbar">
<input name="form-edit" value="Edit" class="button-view" type="submit" disabled="disabled"/>
<input name="form-draft" value="Draft" class="button-edit" type="submit"/>
<input name="form-submit" value="Submit" class="button-edit" type="submit"/>
<input name="form-cancel" value="CancelMe" class="button-edit" type="submit"/>
<input name="form-suspend" value="Suspend" class="button" type="submit"/>
</div>
</fieldset>
</form>
</body>
</html>
Have you tried moving the hidden input field after the UL?
You can probably try putting <label> andin two separate`s in a table. Like this:
............
<fieldset>
<input id="Hidden1" name="id" value="a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2"
type="hidden" />
<ul class="user-form">
<li class="valid">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="vertical-align:bottom">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix">
Prefix:</label>
</td>
<td>
<ul class="dropdown">
<li>Miss </li>
<li class="dropcontainer">
<ul class="dropdownhidden">
<li></li>
<li>Mister </li>
<li>Misses </li>
<li>Miss </li>
<li>Doctor </li>
<li><a href="#">This is just a little test to see exactly how long this silly thing
will make my option</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
<input value="Ms." id="Hidden2" name="name_prefix"
type="hidden" />
<input name="name_prefix_value" value="Mr." type="hidden" />
</li>
............
With IE7, you have to follow any element with the display: inline-block; css rule with a display: inline; in a subsequent rule, usually found in an "ie lt 7" stylesheet. Is that possibly what's going on here?
Related
I have an html page given below
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
</div>
<div data-role="content">
<div class="content-primary">
<form id="frm1">
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="Name">name:</label>
<input type="text" Name="Name" id="Name" value="" />
</li>
<li data-role="fieldcontain">
<label for="No">no:</label>
<input type="text" No="No" id="No" value="" />
</li>
<li data-role="fieldcontain">
<label for="countryName">Country name:</label>
<input type="text" countryName="countryName" id="countryName" value="" />
</li>
<li data-role="fieldcontain">
<label for="stateName">State name:</label>
<input type="text" stateName="stateName" id="stateName" value="" />
</li>
<li data-role="fieldcontain">
<label for="cityName">City name:</label>
<input type="text" cityName="cityName" id="cityName" value="" />
</li>
</form>
</div>
</div>
</body>
and i am using the following jquery 1.3.2 links displayed in the link given
http://jquerymobile.com/download/
and i have css file given below
.ui-body-c { background:#FFFFFF !important; }
.ui-page .ui-header {
background:#0B0B3B !important;
}
.ui-page .ui-footer {
background:#0B0B3B !important;
}
When i am using the above code the list which is displayed contains grey color.
how will i get white color instead grey to the list displayed.
Thanks in advance
I can't actually test this but I have noticed oddities like this before when a css rule is defined as background-color: and you try to override with just background:
Try changing your rule to say background-color: instead. Also, if you can help it, stay clear of !important unless you're sure it's what you need. It can be a real pain when your css gets more complicated.
All you need is to set background-color rule to .ul-body
.ui-body{
background-color:#FFF;
}
Don't use !improtant, Keep it as a last resource.
Note: In case some other list might contain a class named ui-body, but you can give parent ID or class as selector to your custom class .ui-body
#Parent .ui-body{
}
.Parent .ui-body{
}
fiddle
I can't get list-style-item to apply to my UL in chrome even though I'm setting display to list-item and suffixing with !important. I'm using Angular and bootstrap and am applying my CSS as the last <link> in the <head> - here's the HTML before Angular applies it's repeater:
<ul class="shipping-list">
<li ng-repeat="todo in todos">
<select ng-model="todo.country">
<option>Canada</option>
<option>United Kingdom</option>
<option>United States</option>
</select>
<input type="text" ng-model="todo.text" ng-required="true">
<i class="fa fa-times" ng-click="deleteTodo(todo)" alt="Remove"></i>
</li>
<li>
<select ng-model="todoCountry">
<option>Canada</option>
<option>United Kingdom</option>
<option>United States</option>
</select>
<input type="text" ng-model="todoText" size="30" placeholder="$shipping">
<button class="btn btn-primary" ng-click="addTodo()">Add</button>
</li>
</ul>
HTML after Angular applies it's repeater - Providing for completeness although I'm pretty sure this is not related to Angular use:
<ul class="shipping-list">
<!-- ngRepeat: todo in todos -->
<li ng-repeat="todo in todos" class="ng-scope">
<select ng-model="todo.country" class="ng-pristine ng-valid">
<option value="Canada">Canada</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
<input type="text" ng-model="todo.text" ng-required="true" class="ng-pristine ng-valid ng-valid-required" required="required">
<i class="fa fa-times" ng-click="deleteTodo(todo)" alt="Remove"></i>
</li><!-- end ngRepeat: todo in todos -->
<li ng-repeat="todo in todos" class="ng-scope">
...
</li>
</ul>
CSS
//Shipping list
ul.shipping-list {
list-style-type: none !important;
color: red;
border: solid 1px red !important;
}
ul.shipping-list li {
display:list-item !important;
border: solid 1px red;
}
ul.shipping-list input {
color: red;
background-color: cyan;
border: solid 1px red;
}
The result is as follows - Note that list items still have bullets and there's no border on the UL:
I had a C# style comment just before the UL CSS:
//Shipping list <= BAD COMMENT
ul.shipping-list { ... }
Removing the comment fixed the problem
ul.shipping-list { ... }
how to use css for positioning my checkboxes in lines let's say of 4. For now the're displaying all in one line.
I tried with floating left and margin but it's not working the way I do it.
I have 7 groups of lists like below in my form
HTML:
<div class="Oobj" id="Oobj60">
<form action="mailto:kontakt#2know.pl" method="post" enctype="text/plain">
<div id="Oobj58">
<input type="checkbox" onClick="toggle(this)" /><br>
<input type="checkbox" name="sport" value="fitness" />fitness<br />
<input type="checkbox" name="sport" value="gym" />siłownia<br />
<input type="checkbox" name="sport" value="siata" />siatkówka<br />
<input type="checkbox" name="sport" value="noga" />piłka nożna<br />
<input type="checkbox" name="sport" value="kosz" />koszykówka<br />
<input type="checkbox" name="sport" value="zima" />sporty zimowe<br />
</div>
</form> </div>
CSS:
#Oobj58 {
position: absolute;
font-size: 13px;
font-family: Open Sans;
z-index: 43;
text-align: left;
left: 12.25em;
top: 23.00em;
display: none;
}
class 'Oobj' is empty. I needed it for another jq code.
try this
<div class="Oobj" id="Oobj60">
<form action="mailto:kontakt#2know.pl" method="post" enctype="text/plain">
<div id="Oobj58">
<ul>
<li> <input type="checkbox" name="sport" value="fitness" />fitness </li>
<li> <input type="checkbox" name="sport" value="gym" />siłownia</li>
<li> <input type="checkbox" name="sport" value="siata" />siatkówka</li>
<li> <input type="checkbox" name="sport" value="noga" />piłka nożna</li>
<li> <input type="checkbox" name="sport" value="kosz" />koszykówka</li>
<li> <input type="checkbox" name="sport" value="zima" />sporty zimowe</li>
</ul>
</div>
</form> </div>
#Oobj58 {
font-size: 13px;
font-family: Open Sans;
text-align: left;
left: 12.25em;
top: 23.00em;
}
#Oobj58 ul li { display:inline; margin-left:10px; }
I have a fieldset with check boxes organized with ul, li. I have three lists (all part the same fieldset). I want to display them into three columns, each ul (list) is a column from left to right.
Do I have to wrap each ul in a DIV?... I need help.
Here's what it looks like on my site right now... MaddenUltimateZone.com
<fieldset class="position">
<legend>Position:</legend>
<ul>
<li>Offense</li>
<li>
<input type="checkbox" id="qb" value="QB" />
<label class="position" for="qb">QB</label>
</li>
<li>
<input type="checkbox" id="hb" value="HB" />
<label class="position" for="hb">HB</label>
</li>
<li>
<input type="checkbox" id="fb" value="FB" />
<label class="position" for="fb">FB</label>
</li>
<li>
<input type="checkbox" id="wr" value="WR" />
<label class="position" for="wr">WR</label>
</li>
<li>
<input type="checkbox" id="te" value="TE" />
<label class="position" for="te">TE</label>
</li>
<li>
<input type="checkbox" id="lt" value="LT" />
<label class="position" for="lt">LT</label>
</li>
<li>
<input type="checkbox" id="lg" value="LG" />
<label class="position" for="lg">LG</label>
</li>
<li>
<input type="checkbox" id="c" value="C" />
<label class="position" for="c">C</label>
</li>
<li>
<input type="checkbox" id="rg" value="RG" />
<label class="position" for="rg">RG</label>
</li>
<li>
<input type="checkbox" id="rt" value="RT" />
<label class="position" for="rt">RT</label>
</li>
</ul>
<ul>
<li>Defense</li>
<li>
<input type="checkbox" id="le" value="LE" />
<label class="position" for="le">LE</label>
</li>
<li>
<input type="checkbox" id="re" value="RE" />
<label class="position" for="re">RE</label>
</li>
<li>
<input type="checkbox" id="dt" value="DT" />
<label class="position" for="dt">DT</label>
</li>
<li>
<input type="checkbox" id="lolb" value="LOLB" />
<label class="position" for="lolb">LOLB</label>
</li>
<li>
<input type="checkbox" id="mlb" value="MLB" />
<label class="position" for="mlb">MLB</label>
</li>
<li>
<input type="checkbox" id="rolb" value="ROLB" />
<label class="position" for="rolb">ROLB</label>
</li>
<li>
<input type="checkbox" id="cb" value="CB" />
<label class="position" for="cb">CB</label>
</li>
<li>
<input type="checkbox" id="fs" value="FS" />
<label class="position" for="fs">FS</label>
</li>
<li>
<input type="checkbox" id="ss" value="SS" />
<label class="position" for="ss">SS</label>
</li>
<li>
<input type="checkbox" id="rt" value="RT" />
<label class="position" for="rt">RT</label>
</li>
</ul>
<ul>
<li>Special Teams</li>
<li>
<input type="checkbox" id="k" value="K" />
<label class="position" for="k">K</label>
</li>
<li>
<input type="checkbox" id="p" value="P" />
<label class="position" for="p">P</label>
</li>
</ul>
</fieldset>
</form>
Here's my CSS... maybe something is conflicting.
#filters {
background: #F2F2F2;
border: 1px solid #CCCCCC;
padding: 15px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
fieldset {
border: 1px solid #ccc;
border-radius:4px;
padding: 4px;
display:inline-block;
}
.tier {
float: right;
width: 125px;
}
.position {
float: right;
width: 300px;
margin: 0 10px 0 0;
}
.position ul {
display:inline-block;
vertical-align:top;
}
input[type="radio"],
input[type="checkbox"] { position: absolute; left: -999em; }
label:before {
display: inline-block; position: relative; top:0.25em; left:-2px;
content:''; width:25px; height:25px;
background-image:url(img/formelements.png); }
input[type="checkbox"] + label:before { background-position: 0 -25px;}
input[type="checkbox"]:checked + label:before {background-position: 0 0 ; }
input[type="radio"] + label:before { background-position: -25px -25px;}
input[type="radio"]:checked + label:before { background-position: -25px 0;}
/* Remove the custom styling for IE 7-8 */
.ie8 label:before { display:none; content:none; }
.ie8 input[type="checkbox"],
.ie8 input[type="radio"],
.ie7 input[type="checkbox"],
.ie7 input[type="radio"]{
position: static; left:0; }
.ie8 input[type="checkbox"],
.ie8 input[type="radio"] {
position:relative; top:5px; margin-right:0.5em;}
input[type="text"]:focus, textarea:focus {
border-color:#000;
}
.position ul{
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/w5aFW/1
How do I center a contact form which is inside a div. I have tried margin:0 auto; and it didn't work.
<div id="new_div_3">
<form class="contact_form" action="#" method="post" name="contact_form">
<ul>
<li>
<h2>Contact Us</h2>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li>
<label for="name">Name:</label>
<input type="text" placeholder="John Doe" required />
</li>
<li>
<label for="email">Email:</label>
<input type="email" name="email" placeholder="john_doe#example.com" required />
<span class="form_hint">Proper format "name#something.com"</span>
</li>
<li>
<label for="website">Website:</label>
<input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+"/>
<span class="form_hint">Proper format "http://someaddress.com"</span>
</li>
<li>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="6" required ></textarea>
</li>
<li>
<button class="submit" type="submit">Submit Form</button>
</li>
</ul>
</form>
</div>
I have tried using various methods and none of them seem to work to center the div. I even tried centering the contact form itself and it just moved the input fields to the center of the contact form, rather than the div.
In order to get margin: 0 auto; work you need to set width.
#new_div_3 {
width: 500px;
margin: 0 auto;
}
Check the fiddle:
http://jsfiddle.net/9cMAC/
#new_div_3 {
width:100%;
display:block;
margin:auto;
}
Should be all you need.
Here you go:
#new_div_3 {
margin: 0 auto;
position: relative;
width: 60%;
}
check fiddle