The firefox doesn`t allow you to have a div inside a label. Checkout the
firebug and see how the firefox close de label tag before your div. So your
label will be empty.
On Thu, Dec 24, 2009 at 14:12, turnavies <thomas.vanoeke...@gmail.com>wrote:
> Hi,
>
> I'm working on a login system in CodeIgniter, where you select your
> avatar and enter your password to login.
>
> I've accomplished this by attaching labels containing the avatar to
> hidden radio buttons.
> If you click on one of the avatars, the following jQuery script, that
> I call on document.ready, adds or removes a 'selected' class to the
> label, so I can style it.
>
> $(".login_avatar").click(function() {
> $(this).children().addClass("selected");
> $(this).siblings().children().removeClass("selected");
> });
>
> Page source:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> <html lang="en">
> <head>
> <meta http-equiv="Content-type" content="text/html; charset=utf-8">
> <title>Dagobert - Log in</title>
> <link rel="stylesheet" href="http://turnavies.nl/dagobert/css/
> reset.css" type="text/css" media="screen" title="no title"
> charset="utf-8">
> <link rel="stylesheet" href="http://turnavies.nl/dagobert/css/
> style.css" type="text/css" media="screen" title="no title"
> charset="utf-8">
> <script src="http://turnavies.nl/dagobert/js/jquery.js"; type="text/
> javascript"></script>
> <script src="http://turnavies.nl/dagobert/js/docready.js";
> type="text/
> javascript"></script>
> </head>
> <body>
> <div class="page" id="login">
> <h1 class="title">Dagobert<span class="subtitle">Shared home
> management tool</span></h1>
> <form action="http://turnavies.nl/dagobert/user/login";
> method="post"
> name="loginform">
> <div id="avatargrid">
> <label for="Thomas" class="login_avatar">
> <div class="wrapper">
> <input type="radio" name="username"
> value="Thomas" id="Thomas" />
> <div class="imgwrapper"><img src="
> http://turnavies.nl/dagobert/img/
> avatars/1261582921059.jpg<http://turnavies.nl/dagobert/img/%0Aavatars/1261582921059.jpg>"
> alt="Thomas" /></div>
> <span class="name">Thomas</span>
> </div>
> </label>
> <label for="William" class="login_avatar">
> <div class="wrapper">
> <input type="radio" name="username"
> value="William" id="William" /
> >
> <div class="imgwrapper">
> <img src="
> http://turnavies.nl/dagobert/img/avatars/
> barney_stinson.jpg<http://turnavies.nl/dagobert/img/avatars/%0Abarney_stinson.jpg>"
> alt="William" />
> </div>
> <span class="name">William</span>
> </div>
> </label>
> </div>
> <input type="text" name="" value="Password" id="password-clear" />
> <input type="password" name="password" value="" id="password-
> password" />
> <input type="submit" name="submit" value="Log in" />
> <div class="clear"></div>
> </div>
> </body>
> </html>
>
> The script works fine in Chrome and Safari OSX, but fails to work in
> Firefox for OSX. I deleted my entire profile, so I can't blame
> extensions.
> It is live on http://turnavies.nl/dagobert
> docready jQuery: http://turnavies.nl/dagobert/js/docready.js
> CSS: http://turnavies.nl/dagobert/css/style.css
>
