I have the following CSS in a media-query (for min-width 768px):
.formHolder-section {width: 235px; position: relative; float: left; margin:0;}
.formHolder-section:first-child { margin: 0 20px 0 40px; }
The override (for :first-child) works in all browsers except IE7. I'm wondering if there's any good reason for this... I also tried reversing the margin value (applying it to all (2) .formHolder-section divs, then using a different selector:
.formHolder-section {width: 235px; position: relative; float: left; margin: 0 20px 0 40px;}
.formHolder-section + .formHolder-section { margin: 0; }
This also did NOT work. I've solved my issue by just giving both divs some margin (as opposed to only the first div). The odd thing is... all other CSS works in here except for the first-child selector. I'm wondering if anyone has any idea what could be the cause of the issue.
Here's some of the HTML (though, again, the HTML/CSS works everywhere except IE7):
<div class="formContainer">
<div class="formHolder-section">
<span class="form-required">*Denotes field as required</span>
<ul class="form-list">
<li>
<label>First:*</label>
<input type="text" value="" class="form-input-full" name="firstName" id="firstName">
</li>
<li>
<label>Last:*</label>
<input type="text" value="" class="form-input-full" name="lastName" id="lastName">
</li>
<li>
<label>Email Address:*</label>
<input type="text" value="" class="form-input-full" name="email" id="email">
</li>
<li>
<label class="listOptionPadding">Are you 18 years old?*</label>
<input type="radio" value="true" class="form-radio" name="over18" id="over181"> <span class="italic">Yes</span>
<br>
<input type="radio" value="true" class="form-radio" name="over18" id="over182"> <span class="italic">No</span>
</li>
[...]
</ul>
</div>
<div class="formHolder-section">
<ul class="form-list">
<li>
<label class="listOptionPaddingBottom">When Do You Intend to Purchase a New Vehicle?</label>
<input type="radio" value="1_MONTH" class="form-radio" name="nextPurchase" id="nextPurchase1"> <span class="italic">Within a Month</span>
<br>
<input type="radio" value="3_MONTH" class="form-radio" name="nextPurchase" id="nextPurchase2"> <span class="italic">Within the next 3 Months</span>
<br>
<input type="radio" value="6_MONTH" class="form-radio" name="nextPurchase" id="nextPurchase3"> <span class="italic">Within the next 6 Months</span>
<br>
<input type="radio" value="WITHIN_YEAR" class="form-radio" name="nextPurchase" id="nextPurchase4"> <span class="italic">Within a Year</span>
<br>
<input type="radio" value="OVER_YEAR" class="form-radio" name="nextPurchase" id="nextPurchase5"> <span class="italic">More than 1 Year</span>
</li>
<li class="interested-in">
<label>What Toyota vehicles are you interested in?</label>
</li>
[...]
</ul>
<input type="submit" value="Submit" class="form-button rounded">
<a class="form-terms" href="/ToyotaMotorApp/mobile/tyw/terms.html">View all the terms and conditions</a>
</div>
</div>
Here's the DOCTYPE (using HTML5 here -- I've seen some weird stuff with quirksmode, no doubt -- but, don't think this is the issue here). Using modernizer for media queries (this is a responsive site):
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
by the way, I took this from IE8 (so the html tag would be different for IE7 -- but, I'm testing in a different VM right now).
Two words - quirks mode. The first-child pseudo selector doesn't really work well until you get to IE9.
http://www.quirksmode.org/css/contents.html#t17
Related
I am trying to style a particular label with an id but not sure if the following code is correct though as nothing is changing.
I am trying to move the label id down a few spaces and am trying to use the positioning for this but can't seem to get it moving.
From my understanding, I think that you can give an id for the label correct?
div.changepassword #temporary_password label {
color: #008000;
font-size: 1em;
white-space: nowrap;
position: absolute;
left: -2em;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../style.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<div class="changepassword">
<h2>Update your password here!</h2>
<form class="signup-form" action="changepassword2.php" method="POST">
<br></br>
<label>Username</label>
<input type="text" name="user_uid" placeholder="Username">
<br></br>
<label id="temporary_password">Temporary Password</label>
<br></br>
<div class="changepassword2">
<input type="text" name="temporary_password" placeholder="token">
<br></br>
<label>New Password</label>
<input type="password" name="password" placeholder="Password">
<br></br>
<label>Confirm New Password</label>
<input type="password" name="confirm_password" placeholder="Confirm Password">
<br></br>
<button type="submit" name="submit">Update Password</button>
</div>
</div>
</body>
</html>
add this code
CSS
div.changepassword label#temporary_password {
color:#008000;
font-size: 1em;
white-space: nowrap;
position: absolute;
left: 0em;
}
You can remove the space from bottom of #temporary_password label by removing extra br tags from bottom. Though if its required by your design please find my solution below:
div.changepassword label#temporary_password {
position:absolute;
margin-top:15px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../style.css">
<link href="https://fonts.googleapis.com/css?family=Lobster"
rel="stylesheet">
</head>
<body>
<div class="changepassword">
<h2>Update your password here!</h2>
<form class="signup-form" action="changepassword2.php" method="POST">
<br></br>
<label>Username</label>
<input type="text" name="user_uid" placeholder="Username">
<br></br>
<label id="temporary_password">Temporary Password</label>
<br></br>
<div class="changepassword2">
<input type="text" name="temporary_password" placeholder="token">
<br></br>
<label>New Password</label>
<input type="password" name="password" placeholder="Password">
<br></br>
<label>Confirm New Password</label>
<input type="password" name="confirm_password" placeholder="Confirm Password">
<br></br>
<button type="submit" name="submit">Update Password</button>
</div>
</div>
</body>
</html>
So, first of all, if you put a hash (#) in front of an identifier in css that means look for the element with this ID. So the div.changepassword part is superfluous.
When you use #temporary_password it targets directly the element with that id. But because you have #temporary_password label it targets any label element inside the element with the id temporary_password.
The easiest it to just target the element that you want to style directly. But this approach is not recommended if you intend to reuse the style (id's need to be unique on the page). In that case you should work with CSS classes instead.
A good way to learn and experiment with CSS is to use the developer tools in chrome. You can test and experiment in real time without having to reload anything. Also very useful is to right click an element in the Elements view and select Copy/Copy Selector. This will give you a CSS selector that targets that element.
I'm new to the ARIA thing and from what I've read on the internet about it nothing says something should be installed in order for this to work. I've tried a very simple example but nothing happens except pure html5 with a little css that I wrote in the style tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<h1>ARIA<h1>
<style>
input:focus + [role="tooltip"] {
display: block;
position: absolute;
top: 100%;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>Login form</legend>
<div>
<label for="username">Your username</label>
<input type="text" id="username" aria-describedby="username-tip" required />
<div role="tooltip" id="username-tip">Your username is your email address</div>
</div>
<div>
<label for="password">Your password</label>
<input type="text" id="password" aria-describedby="password-tip" required />
<div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>
</div>
</fieldset>
</form>
</body>
</html>
I'm clearly doing something wrong, so can someone please tell me what exactly? :D
http://stepladderuk.com/dev/wedding/exp/
The text in the input button is bold, which I don't want.
I can't work out what's making it bold.
When I inspect the element, I come up with font-weight:100 as I declared in the CSS.
I tried -webkit-appearance: none;
this creates a strange behaviour where the text only unbolds when you hover.
HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<!-- meta stuff -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Matt & Caroline</title>
<meta name="description" content="Description here">
<meta http-equiv="cleartype" content="on">
<!--FONT LINKAGE -->
<link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/c020518f-a748-4829-83c4-9cd0e83dd476.css"/>
<!-- Stylesheet -->
<link rel="stylesheet" href="css/main.css">
<!-- Scripts -->
<script src="js/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOJWH6GtBIMO1GGByFIf3A9Q6nEe050L0"></script>
</head>
<body class="homepage">
<!--IE notice -->
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<section id="rsvp">
<div class="container">
<div class="heading-holder">
<div class="heading-inner">
<img class="arrow-left" src="img/arrow-right.png" alt="arrow">
<h1>rsvp</h1>
<img class="arrow-right" src="img/arrow-left.png" alt="arrow">
</div>
</div>
<div class="inner">
<form action="MAILTO:bz#stepladderuk.com" method="post" enctype="text/plain">
<div class="col col-wide">
<div class="form-group">
<label class="form-row" for="name">Names of everyone in your party</label>
<span class="form-row text-small">Please seperate names with a comma.</span>
<input class="form-row" type="text" name="name">
</div>
<div class="form-group">
<label class="form-row" for="number">Your phone number</label>
<input class="form-row" type="text" name="number">
</div>
<div class="form-group">
<label class="form-row" for="email">Your email address</label>
<input class="form-row" type="text" name="email">
</div>
<div class="form-group">
<label class="form-row" for="dietary-requirements">Special dietary requirements</label>
<input class="form-row" type="text" name="dietary-requirements">
</div>
<div class="form-group">
<label class="form-row" for="song">Favourite song</label>
<input class="form-row" type="text" name="song">
</div>
<div class="form-group">
<label class="form-row" for="transport">Transport</label>
<span class="form-row text-small">Please indicate if travelling by coach whether you will need transport to the venue and which coach you will return on</span>
<input class="form-row" type="text" name="transport">
</div>
</div>
<div class="clear"></div>
<hr class="hr-2-em" />
<p>
<span class="text-small">
Please fill out this form, click send and send the automatically generated email.
</span>
</p>
<div class="col-wide">
<div class="link-style-2 center">
<span class="left-edge"></span>
<input class="text" type="submit" value="Send It!">
<span class="right-edge"></span>
</div>
</div>
</form>
</div><!-- end inner -->
</div><!-- end container -->
<div class="clear"></div>
</section>
</body>
</html>
CSS;
form{
z-index:100;
width:50%;
margin:0 auto;
.form-group{
margin-bottom:2em;
}
.form-row{
display:block;
}
input[type=text]{
border:0;
background-color:white;
padding:.4em;
width:100%;
font-family:$font-main, georgia, serif;
width:100%;
margin-top:.2em;
}
input[type=submit]{
font-family:$font-main, georgia, serif;
border:0;
font-weight:100;
-webkit-appearance: none!important;
}
}
Does this in all browsers except IE. I'm on a mac.
This is how it looks;
This is how it should look (this is another button on the website, but it's just a plain link, not a form input element)
I'm pretty certain the problem is because it's an input.
Why don't you apply normal?
input{
font-weight: normal;
}
I found the fix.
input{
-webkit-font-smoothing: antialiased;
}
You need to add -webkit-font-smoothing: antialiased; to the input.
If you've added this to the html or body element, this rule will work on every element on the page except for inputs, so you need to redeclare it.
Here is the code: jsFiddle
It looks properly in Chrome (radiobuttons are OK although 3 of 6 radiobuttons are left to the left border of browser), but looks completely different in Firefox (the radiobuttons in Firefox are messed).
How to fix the problem with css styles? The styles are taken from twitter bootstrap so they could be overrided only.
Also, html can't be touched if possible, only css.
Is that a crossbrowser bug? What's the reason it looks completely different?
The full code is here:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
label
{
display : block;
margin-bottom : 5px
}
.radio input[type="radio"], .checkbox input[type="checkbox"]
{
float : left;
margin-left : -18px
}
</style>
</head>
<body>
<div style="border:1px solid red; ">
<label class="radio">
<input name="count" value="A" type="radio">
A </label>
<label class="radio">
<input name="count" value="B" type="radio">
B </label>
<label class="radio" style="border:1px solid blue;">
<input name="count" value="C" type="radio">
C </label>
</div>
<div style="margin-left: 300px; margin-top: -70px;">
<label class="radio">
<input name="count2" value="D" type="radio">
D </label>
<label class="radio">
<input name="count2" value="E" type="radio">
E </label>
<label class="radio">
<input name="count2" value="F" type="radio">
F </label>
</div>
</body>
</html>
The problem is your float.
Remove the float left from
.radio input[type="radio"], .checkbox input[type="checkbox"]
If I understand you correctly, float and margin-left are being set by bootstrap to values that you don't want.
In order to override them all you need to do is add styles to your page (or preferably a bootstrap override css file, i.e. one added after you have added bootstrap) that will override the bootstrap values you don't want e.g.
.radio input[type="radio"], .checkbox input[type="checkbox"]
{
float : none;
margin-left : 0px
}
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?