CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-8pseudo-class
Donald Jenkins
Donald Jenkins

Reputation: 3505

Targeting IE6/7/8 with .lt-ie9 class — not working with IE8

I have a form that uses various PNG images in each field, which switch using pseudo classes depending on the progress made in filling it in and whether the field is not a required one for validation.

The near-non-existent IE support for pseudo-classes isn't a deal breaker, providing I can make the basic icons display in all browsers—albeit without switching to reflect changes in field status in IE6/7/8.

I am, however, having an issue with the CSS for the following image:

#contact input#url:empty,.lt-ie9 #contact input#url{background:url(url-icon.png) no-repeat left center;margin-bottom:24px}

Basically, with just the #contact input#url:empty selector, it doesn't display at all when the page loads in IE6-8. By adding the .lt-ie9 #contact input#url selector, it displays properly in IE6 and IE7 but not, for some reason, in IE8.

Here's the HTML (the CSS is available here: http://i.via.dj/EOma):

<div id="contact-form">

<form id="contact" class="clear" method="post" accept-charset="utf-8" novalidate="novalidate">

<fieldset>

<input type="text" name="checking" placeholder="[email protected]" class="hidden" id="checking">
<label for="checking" class="hidden">If you do not want to submit this form, enter your email in this field</label>

<p class="name">
<input type="text" name="name" placeholder="John Doe" title="Enter your name" required="required" id="name">
<label for="name">Name *</label>
<label class="error" for="name" id="name-error">Name is required</label>
</p>

<p class="email">
<input type="email" name="email" placeholder="[email protected]" autocapitalize="off" title="Enter your e-mail address" required="required" id="email">
<label for="email">Email *</label>
<label class="error" for="email" id="email-error">Type a valid email</label>
</p>

<p class="website">
<input type="url" name="url" placeholder="http://" autocapitalize="off" id="url">
<label for="url">Website</label>
</p>

<p class="message">
<textarea name="message" placeholder="Type your message here (max. length 1,200 characters)" title="Enter your comment or message" required="required" id="message" maxlength="1200"></textarea><label for="message">Message *</label>
<label class="error" for="message" id="message-error">You haven't typed a message</label>
</p>

<p class="submit">
<input type="submit" value="Send message" />
</p>

</fieldset>

</form>

Any suggestions much appreciated.

Upvotes: 0

Views: 2197

Answers (1)

thirtydot
thirtydot

Reputation: 228182

The selector in this isn't going to behave as you're expecting:

#contact input#url:empty,.lt-ie9 #contact input#url{background:url(url-icon.png) no-repeat left center;margin-bottom:24px}

:empty isn't supported in IE lower than 9, so the entire rule above will (or should..) be completely ignored in all versions of IE lower than 9.

I'm not sure why it would still be working for you in IE7. IE7 is crazy.

From the spec:

When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

To fix your problem, try splitting it up into two rules:

#contact input#url:empty{background:url(url-icon.png) no-repeat left center;margin-bottom:24px}
.lt-ie9 #contact input#url{background:url(url-icon.png) no-repeat left center;margin-bottom:24px}

Upvotes: 2

Related Questions