Formbuilder: Checkbox group - lining up the checkboxes against the form labels

[Darwin Web Design]

Hi, I'm using CMSMS 1.7.1 with FormBuilder 0.61b

Most of the form's elements sit nicely on the page but the checkbox group, I cannot get to line up in IE.

In Firefox, it sits just how I want it, but in IE, the formfields and checkbox are separated by a line and the boxes have a grey border that I can't get rid of (please see screenshots attached).

I have applied a class of ".checkbox-group" to the entire checkbox group and the background of the area in question is shown in green.

To demonstrate, please see: http://www.darwinwebdesign.com.au/index.php?page=test

There was a similar post below, but it was based on table layout...
http://forum.cmsmadesimple.org/index.php/topic,15180.0.html

And I also thought http://forum.cmsmadesimple.org/index.php/topic,45013.0.html may have been a close solution, but don't know how to apply this to the checkboxes.

I look forward to any hints if possible on how to apply some CSS to make this work, many thanks.

[maranc]

Looks like problem with line¨height. Witch version of IE used you to make screenshot.

Marek A.

[uniqu3]

Link to the page doesn't work.

But as Marek already mentioned it is line-height issue. You could add height after line-height to fix it for IE.

[Darwin Web Design]

Thanks Marek and Uniqu3

The IE screenshot is IE6, I believe they line up in IE8 so maybe I don't need to worry so much...

Sorry the page was down yesterday. The link is now active again:
http://www.darwinwebdesign.com.au/index.php?page=test

I have experimented with the classes and tried the line-height to the label, the box group and the boxes in various combinations with no luck yet...

If you have a chance, would be great if you could have a look.  Thanks.

Also do you know how to get rid of that grey border on the checkboxes from IE? I've set border to 0 and this hasn't done it.

[uniqu3]

To remove border try

Code: Select all

input.cms_checkbox {border:none;}

The border comes from

Code: Select all

.contactform input {
border: 1px solid #ccc;
margin-bottom: 5px;
padding: 2px;
}

so you need to specify input.
This could also be the problem with IE6, i didn't study you whole Form CSS but as i can see you have tried to style checkbox_group which actually has no function at all it's an empty div inside the form if you take a look at the markup.
You should try styling this issue by assigning another cms class to all fields with checkbox in FormBuilder. When you have this done each label and input will be wrapped inside a div with your class.
Then you can play around with:

Code: Select all

div.yourclass {
 height:xx; and so on}
 .yourclass label {
  your:styling;
  line-height:1em;
  height:1em; /*IE*/}
  .yourclass input {
  your:styling;

[maranc]

Try add:
cms_checkbox label {
line-height: /your value in em, px, pt/;
}

You must remember that Opera, IE and Mozilla Firefox are interpreting another checkbox.
Example in Opera default margin for checkbox is 2px. So - if you want the same efect you must specify all parameter like padding, margin, border ...

Marek A.

[Darwin Web Design]

Thank you very much for your help once again.

I have now removed the grey border successfully.
I'm still working on the layout in IE with lining up the check boxes and will try to assign another class as suggested.

I appreciate your time and help.