d
Topic
Posts:
3
February 03, 2014

Weird <label> tag issue This post is outdated

Hi guys, I have this code:

                <label class="radio-option correct" for="option-1">
                      <input id="option-1" type="radio" name="animal" class="radio-btn" />
                      <div class="radio-img-wrap">
                          <span class="helper"></span>
                          <img class='radio-img' src="http://media.sube.com/images/tiger.png">;
                      </div>
                 </label>

I paste it in using the source mode, but then when I save the page, it turns it into this:

<label class="radio-option correct" for="option-1"><label class="radio-option correct" for="option-1"> <input id="option-1" type="radio" name="animal" class="radio-btn" /></label></label>
<div class="radio-img-wrap"><span class="helper"></span> <img class="radio-img" src="http://media.sube.com/images/tiger.png"; /></div>

Any pointers?

 

i
Replies
Jason Shopify Expert freakdesign.com.au
Posts:
8225
February 03, 2014

Adding block elements inside a label is likely unsupported under the current html5 spec, which is why you're seeing weirdness. Try someting more like:

<label class="radio-option correct" for="option-1">Some label or descriptor </label>
<input id="option-1" type="radio" name="animal" class="radio-btn" />
<div class="radio-img-wrap">
    <span class="helper"></span>
   <img class="radio-img" src="http://media.sube.com/images/tiger.png">;
 </div>

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Posts:
3
February 03, 2014

My code seems to pass the validation tests...

And placing it in the latter format means I have to use jQuery to do some magic instead of just using CSS...

Jason Shopify Expert freakdesign.com.au
Posts:
8225
Last edited February 03, 2014

My code seems to pass the validation tests...

It shouldn't. Under the current spec the label should be just that - a label. it should serve no interactive purpose and thus contain none of those elements you've added. By ignoring this you may find that some browsers will ignore the input or click actions on the items within.

And placing it in the latter format means I have to use jQuery to do some magic instead of just using CSS...

So wrap the whole thing in an element that you can target.

Did you try what I suggested in the previous post - did it work or also get changed after saving?

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Posts:
3
February 03, 2014

No, I'm still rewriting my CSS to be able to try the latter option.

Thanks for your help, will let you know how it went!