Question

I am having an issue with applying a class to an HTML element. It works fine in Chrome but the class is not applied to that same element for Firefox/Opera/IE.

This is how is looks in Chrome: http://cl.ly/0W0P3t102U0p3J141w0u.
This is how it looks in Firefox: http://cl.ly/1d0r2g3g3H2X1E0t2Q1x

Not sure why the style is not being applied in the later “Forgot” link (neither the float nor the font style). I inspected the code and it just seems like the class is not being picked up when rendered in the latter browsers. Here is the code:

#login-form  .forgot, #login-form .forgot::active {
    font-size: 14px;
    float: right;
    line-height: 28px;
    position: relative;
    margin-right: 7px;
}

<div class="field">
  <p>
    <label for="user_password">Password</label>
    <input id="user_password" name="user[password]" size="30" type="password" />
    <br />
    <a href="pb-forgot-password_beta.htm" class="forgot">Forgot?</a>
    <span class="iferror"> &nbsp; </span>
  </p>
</div>

Answer 1

Possibly the double colon in .forgot::active (which should be .forgot:active) causes a parse error that makes the browser ignore the entire stanza.