[Formbuilder] Checkboxgroup alignment

[vinyl]

I made a form with formbuilder. In all browsers i tried the form looks good, except in IE7.

It does not show my checkbox group correctly:



The css code is the default code of formbuilder. The code rendered in the browser is this:

Code: Select all

<div class="required boxes">
<div>
<input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__83[]" value="1"  id="fbrp__83_1_0" />
&nbsp;
<label for="fbrp__83_1_0">14 januari</label>
</div>
<div>
<input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__83[]" value="2"  id="fbrp__83_1_1" />
&nbsp;
<label for="fbrp__83_1_1">11 februari</label>
</div>
<div>
<input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__83[]" value="3"  id="fbrp__83_1_2" />
&nbsp;
<label for="fbrp__83_1_2">10 maart</label>
</div>
<div>
<input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__83[]" value="4"  id="fbrp__83_1_3" />
&nbsp;
<label for="fbrp__83_1_3">14 april</label></div><div><input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__83[]" value="5"  id="fbrp__83_1_4" />
&nbsp;
<label for="fbrp__83_1_4">12 mei</label>
</div>
</div>

I have spent a good hour now trying to figure out why this is happening. Anyone that has a clue??

[Dr.CSS]

This is a CSS thing, link to the site will help us help you...

[carasmo]

On the div class that contains the checkbox and labels, add

position: relative

and see if that helps it. IE 7 has caused me so much grief, that usually that's the first thing I do. Also, provide a link, like the other person said.

[vinyl]

I traced the problem back to the way the form is build up.

First the checkbox is placed, then the label. IE7 seems to have a problem with this. Is there anyway to fix this in the CMS Made Simple file that is responsible for this?

This causes the misalignment:

Code: Select all

<div>
<input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__83[]" value="1"  id="fbrp__83_1_0" />
&nbsp;
<label for="fbrp__83_1_0">14 januari</label></div>

Changing it to this fixes it:

Code: Select all

<div>
<label for="fbrp__83_1_0">14 januari</label>&nbsp;
<input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__83[]" value="1"  id="fbrp__83_1_0" />
</div>

Though I can't find it in the W3C specs it seems more natural to place the label in front of the form element instead of behind it..

[spcherub]

You should be able to change by editing the Template in FormBuilder.

-S