CSS Problem

[goforward]

Hi there...

I have a new form I'm working on for my website, but the radio buttons are getting all out of align for some reason.
URL: http://www.goforward.co.nz/index.php?pa ... Commission


Following is the css i'm using...  if I take out .referralform label, the radio buttons will behave themselves, and align properly.

Any idea's / help much appreciated.   (It make's no difference if I have the field label turned on)

input {
          color: #333;
          background: #FFF;
          border: 1px solid #003366;
}

textarea {
          color: #333;
          background: #FFF;
          border: 1px solid #003366;
}

.submit input {
          color: #FFF;
          border: 1px solid #003366;
          background: #003366;
}

.referralform DIV { 
          padding: 0 0 0 0;
          width: 100%;
} 

.referralform fieldset {
margin-bottom:1em;
border:0px solid #999;
padding:0.5em;
}

.referralform legend {
color:#003366;
background:#FFF;
font-style:italic;
             font-weight: bold  ;
font-size:1.0em;
margin-bottom:0.5em;
padding:0.2em;
width:auto;
border:0px solid #003366
}

.referralform label {
display: block;    /* block float the labels to left column, set a width */
             float: left;
width: 100px;
/*  padding: 0;  */
margin: 5px 5px 0 0;  /*  set top margin same as form input - textarea etc. elements */
text-align: right;
}

.referralform input, {
             width:auto;
}

.referralform textarea {
             width:300px;
}

.referralform .submit {
           margin: -1em 0 0 5em;
}

[calguy1000]

Are you using formbuilder, if so, which version?
Which version of CMS made simple are you using?

Please try to remember to give as much information as possible when submitting a post.  It helps.

[goforward]

Hi there...

CMS Version : 1.0.7
Form Builder: 0.3

Thanks

[iNSiPiD]

I have the best question of all: why are you trying to control, so specifically, every element of your form?

Just let the browser handle the default rendering and, if you must, specify a width for the form or input fields.

I see people run into CSS issues all the time and it's invariably due to this sort of over-use.

The purpose of CSS, when coupled with accessibility, is to provide style suggestions, not stringent controls.

For an example of the bare minimum CSS required for forms, and FormBuilder specifically, please refer to my examples in the FormBuilder Help.

[goforward]

What I would like to acheive is all the input labels and input box side by side, as well as all the boxes lined up so it looks good and well layed out.   

I acheived this using the .referralform label {  } class - but it seems to affect the radio and checkbox buttons.

As for the other stuff... point taken

[Dr.CSS]

You could try putting a diff. fieldset around the radio buttons...

[iNSiPiD]

You could try Mark's solution, which would invariably add to your CSS, or you can go back to basics.

You can achieve what you want with a mere smattering of CSS and nary a floated element in site (I couldn't resist).

Again I woul drefer you to the default CSS provided in the Help files. All that is required for neatly aligned input fields is for the .short-label class to be applied selectively (through the FB admin screen) to each inmput field that requires it.

If you insist on right-aligned text for your labels then you could extend this by defining the labels as inline blocks.