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.
Related
I looked at the robots.txt file of a website and got the sitemap from there.
I want to scrape it but get a 403 error (urlopen) or this html response (when using curl)
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en-US"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en-US"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-US"> <!--<![endif]-->
<head>
<title>Attention Required! | Cloudflare</title>
<meta name="captcha-bypass" id="captcha-bypass" />
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" id="cf_styles-css" href="/cdn-cgi/styles/cf.errors.css" type="text/css" media="screen,projection" />
<!--[if lt IE 9]><link rel="stylesheet" id='cf_styles-ie-css' href="/cdn-cgi/styles/cf.errors.ie.css" type="text/css" media="screen,projection" /><![endif]-->
<style type="text/css">body{margin:0;padding:0}</style>
<!--[if gte IE 10]><!--><script type="text/javascript" src="/cdn-cgi/scripts/zepto.min.js"></script><!--<![endif]-->
<!--[if gte IE 10]><!--><script type="text/javascript" src="/cdn-cgi/scripts/cf.common.js"></script><!--<![endif]-->
</head>
<body>
<div id="cf-wrapper">
<div class="cf-alert cf-alert-error cf-cookie-error" id="cookie-alert" data-translate="enable_cookies">Please enable cookies.</div>
<div id="cf-error-details" class="cf-error-details-wrapper">
<div class="cf-wrapper cf-header cf-error-overview">
<h1 data-translate="challenge_headline">One more step</h1>
<h2 class="cf-subheadline"><span data-translate="complete_sec_check">Please complete the security check to access</span> www.idrivecertified.com</h2>
</div><!-- /.header -->
<div class="cf-section cf-highlight cf-captcha-container">
<div class="cf-wrapper">
<div class="cf-columns two">
<div class="cf-column">
<div class="cf-highlight-inverse cf-form-stacked">
<form class="challenge-form" id="challenge-form" action="/cdn-cgi/l/chk_captcha" method="get">
<input type="hidden" name="s" value="6bfef707b3cd0948ac32f5cdd799fde999bb502a-1551464417-1800-AXystx0zL4isQ7fLSJlI8C9UU2+0nm5RfJXpsQ+WZ7ndOaHokzltGw4sOmwwULEx+KfuILnP+wt/6CO90eEzOUBo6YPJqcQHME8FiR79h/JAqHGZibPvK4yS15wpCQVuLw=="></input>
<script type="text/javascript" src="/cdn-cgi/scripts/cf.challenge.js" data-type="normal" data-ray="4b0d24defd87ccd0" async data-sitekey="6LfBixYUAAAAABhdHynFUIMA_sa4s-XsJvnjtgB0"></script>
<div class="g-recaptcha"></div>
<noscript id="cf-captcha-bookmark" class="cf-captcha-info">
<div><div style="width: 302px">
<div>
<iframe src="https://www.google.com/recaptcha/api/fallback?k=6LfBixYUAAAAABhdHynFUIMA_sa4s-XsJvnjtgB0" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe>
</div>
<div style="width: 300px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;"></textarea>
<input type="submit" value="Submit"></input>
</div>
</div></div>
</noscript>
</form>
</div>
</div>
<div class="cf-column">
<div class="cf-screenshot-container">
<span class="cf-no-screenshot"></span>
</div>
</div>
</div><!-- /.columns -->
</div>
</div><!-- /.captcha-container -->
<div class="cf-section cf-wrapper">
<div class="cf-columns two">
<div class="cf-column">
<h2 data-translate="why_captcha_headline">Why do I have to complete a CAPTCHA?</h2>
<p data-translate="why_captcha_detail">Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.</p>
</div>
<div class="cf-column">
<h2 data-translate="resolve_captcha_headline">What can I do to prevent this in the future?</h2>
<p data-translate="resolve_captcha_antivirus">If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.</p>
<p data-translate="resolve_captcha_network">If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.</p>
</div>
</div>
</div><!-- /.section -->
<div class="cf-error-footer cf-wrapper">
<p>
<span class="cf-footer-item">Cloudflare Ray ID: <strong>4b0d24defd87ccd0</strong></span>
<span class="cf-footer-separator">•</span>
<span class="cf-footer-item"><span>Your IP</span>: 2604:2000:f684:8d00:2ca1:a9b9:1950:7b53</span>
<span class="cf-footer-separator">•</span>
<span class="cf-footer-item"><span>Performance & security by</span> Cloudflare</span>
</p>
</div><!-- /.error-footer -->
</div><!-- /#cf-error-details -->
</div><!-- /#cf-wrapper -->
<script type="text/javascript">
window._cf_translation = {};
</script>
</body>
</html>
When i make a request from chrome I can see the page and so i copied the request from the network tab as curl and it does in fact work. So i tried setting the headers of my request to be like the ones from the successful curl request, but i still get a 403 error. Any ideas on how to proceed ?
I have created a bootstrap form and using the 'required' parameter on a control to use html5 validation when I click the submit button.
When I do click the submit button the validation bubble appears for a second and disappears. I am not sure why it is doing this. I am using runat="server" on the controls as I need to access them from the codebehind page.
I have tried several options but still nothing.
A trimmed down version of the page below:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="iconCloud.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Client Details</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Tell the browser to be responsive to screen width -->
<link rel="stylesheet" href="../../Stylesheets/bootstrap.min.css">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="../../StyleSheets/theme.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../Stylesheets/iCheck.css">
<!-- iCheck for checkboxes and radio inputs -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<!-- Google Font -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form id="Main" runat="server" runat="server" >
<section class="content">
<p class ="text-left" style="padding-top:50px">
<h2><label id="lblFormName">Create Client</label></h2>
</p>
<p class="text-right">
<button type="submit" id="cmdSave" name="Save" runat="server" class="btn btn-primary">Save</button>
<button type="button" id="cmdCancel" name="Cancel" runat="server" class="btn btn-default">Cancel</button>
</p>
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Client Details</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Client ID</label>
<input type="text" class="form-control" name="clientID" runat="server" id="txtClientID">
</div>
<div class="form-group">
<label>Client Name</label>
<input type="text" class="form-control" name="clientName" runat="server" id="txtClientName" required="required">
</div>
<div class="form-group">
<label>Company Name</label>
<input type="text" class="form-control" name="companyName" runat="server" id="txtCompanyName">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Title</label>
<select class="form-control select2" name="clientTitle" runat="server" id="cboTitle"></select>
</div>
<div class="form-group">
<label>Client Surname</label>
<input type="text" class="form-control" name="clientSurname" runat="server" id="txtSurname" required="required" >
</div>
</div>
</div>
<div class="col-md-6"><!--Left Column-->
<div class="form-group">
<label>Client Type</label>
<select class="form-control select2" name="clientType" runat="server" id="cboType"></select>
</div><!-- /.form-group -->
</div>
<div class="col-md-6"><!--Right Column-->
<div class="form-group">
<label>Client Status</label>
<select class="form-control select2" name="clientStatus" runat="server" id="cboClientStatus"></select>
</div><!-- /.form-group -->
</div>
</div><!-- /.Panel-body -->
</div>
</div>
</div>
</form>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>
</html>
I will add an answer and mark the question as a duplicate just to provide a reference for this issue if somebody else looks it up.
Updating the browser to the latest version should fix the issue. Here is the the original question link:
Related question with info on the bug fix for this issue
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
I'm using Bootstrap 3.1.1 and my login page is not responsive under 768px.
The page is breaking as shown in the pictures:
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>MY Site</title>
<link href="~/favicon.ico?v=2" rel="shortcut icon" type="image/x-icon" />
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
<meta content='Saúde Inteligente Móvel' name='description'>
<link href='~/favicon.ico?v=2' rel='shortcut icon' type='image/x-icon'>
<link href='~/assets/images/meta_icons/apple-touch-icon.png' rel='apple-touch-icon-precomposed'>
<link href='~/assets/images/meta_icons/apple-touch-icon-57x57.png' rel='apple-touch-icon-precomposed' sizes='57x57'>
<link href='~/assets/images/meta_icons/apple-touch-icon-72x72.png' rel='apple-touch-icon-precomposed' sizes='72x72'>
<link href='~/assets/images/meta_icons/apple-touch-icon-114x114.png' rel='apple-touch-icon-precomposed' sizes='114x114'>
<link href='~/assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-precomposed' sizes='144x144'>
<!-- / START - page related stylesheets [optional] -->
<!-- / END - page related stylesheets [optional] -->
<!-- / bootstrap [required] -->
<link href="~/Content/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
<!-- / theme file [required] -->
<link href="~/Content/light-theme.css" media="all" id="color-settings-body-color" rel="stylesheet" type="text/css" />
<!-- / coloring file [optional] (if you are going to use custom contrast color) -->
<link href="~/Content/theme-colors.css" media="all" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="assets/javascripts/ie/html5shiv.js" type="text/javascript"></script>
<script src="assets/javascripts/ie/respond.min.js" type="text/javascript"></script>
<![endif]-->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
#Styles.Render("~/Content/themes/base/css")
#Styles.Render("~/Content/site-css")
#Scripts.Render("~/bundles/libs/modernizr")
</head>
<body class='contrast-blue login contrast-background'>
<div class='middle-container' style="display: none" data-bind="visible: true">
<div class='middle-row'>
<div class='middle-wrapper'>
<div class='login-container-header'>
<div class='container'>
<div class='row'>
<div class='col-sm-12'>
<div class='text-center'>
<h1 class="text-primary"><img src="~/Images/logo-sim.png" height="160" width="225" /></h1>
</div>
</div>
</div>
</div>
</div>
<div class='login-container'>
<div class='container'>
<div class='row' data-bind="validationOptions: {
registerExtenders: true,
messagesOnModified: true,
insertMessages: false,
parseInputAttributes: true
}">
<div class='col-sm-4 col-sm-offset-4'>
<h1 class="text-center">
</h1>
<div class="row">
<div class='col-sm-12'>
<div class="validation-summary" data-bind="visible: model().isAnyMessageShown()">
<ul>
<li data-bind="validationMessage: model().Email"></li>
<li data-bind="validationMessage: model().Senha"></li>
</ul>
</div>
</div>
</div>
<form>
<div class='form-group'>
<div class='controls with-icon-over-input'>
<input value="" placeholder="E-mail" class="form-control" data-bind="value: model().Email" name="email" type="email" />
<i class='icon-user text-muted'></i>
</div>
</div>
<div class='form-group'>
<div class='controls with-icon-over-input'>
<input value="" placeholder="Senha" class="form-control" data-bind="value: model().Senha" name="password" type="password" />
<i class='icon-lock text-muted'></i>
</div>
</div>
<div class='checkbox'>
<label for='remember_me'>
<input id='remember_me' name='remember_me' type='checkbox' data-bind="checked: model().CookiePersistente">
Lembrar de mim
</label>
</div>
<button class='btn btn-block' data-bind="click: submit">Entrar</button>
</form>
<div class='text-center'>
<hr class='hr-normal'>
#Html.ActionLink("Esqueceu sua senha?", "EsqueciSenha", "Login")
</div>
</div>
</div>
</div>
</div>
<div class='login-container-footer'>
<div class='container'>
<div class='row'>
<div class='col-sm-12'>
<div class='text-center'>
<img src="~/Images/logo-rodape.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#Scripts.Render("~/bundles/libs/jquery")
#Scripts.Render("~/bundles/libs/base")
<script type="text/javascript">
RouteUtility.rootPath = '#Url.Action("Index", "Home")';
</script>
<script type="text/javascript" src="#Url.Content("~/Scripts/pages/login.js")"></script>
</body>
</html>
EDIT:
After adding col-xs-* as suggested, a weird behaviour is happening.
When I add col-xs-*, the fields will fit only with 768px and up. If it's under 768px they will grow!!
It's totally the opposite!
How to fix this?
Under 768px: http://postimg.org/image/d0zcna7bf/
768px and up: http://postimg.org/image/56isu0qtt/
thiago Hi there.
Have a look around line number 60 in you code for this...
<div class='col-sm-4 col-sm-offset-4'>
When your screen size hits this breakpoint it will expand to 100% width because you are not controlling/using the col-xs-XX class here.
If you add this to your code like this...
<div class='col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2'>
for the line of code around line 60 and resize the window, you will see you have control.
This line of code you are using it is used to wrap the Form block, to set the width of this Form.
You just need to take control of this at all breakpoints.
Hope this helps.
Added to this
This is what I get when resized.
Using... <div class='col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2'>
You can control the width for xs device adding eg col-xs-6 :
<div class='form-group'>
<div class='controls with-icon-over-input col-xs-6'>
<input value="" placeholder="E-mail" class="form-control" data-bind="value: model().Email" name="email" type="email" />
<i class='icon-user text-muted'></i>
</div>
</div>
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