Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
zem_contact radio buttons
Hi all,
I seem to have gotten myself in a CSS mess attempting to get my ZCR radio buttons to behave! As you can see, the buttons are not lining up with the legend and I can’t quite figure out why. Here’s my form:
<txp:zem_contact to="emailAddress" subject="Subject">
<txp:zem_contact_text label="Name " required="1" break="" /><br />
<txp:zem_contact_email break="" label="Email " required="1"/><br />
<txp:zem_contact_text break="" label="Phone " min=7 required="0"/>
<br />
<br />
Please select your team allegiance below:<br />
<div class="buttons">
<txp:zem_contact_radio label="The Red Team" group="Please sign me up for" break=""/><br />
<txp:zem_contact_radio label="The Blue Team" break=""/><br />
<txp:zem_contact_radio label="Either team" break=""/><br />
</div>
<txp:zem_contact_submit label="Submit" />
</txp:zem_contact>
And here’s my CSS, which I think may be over complicating things…
.zemContactForm fieldset {
border: 0px;
}
.zemContactForm {
background-color: #FFF8DC;
color: #333;
font-align: right;
font-size: 85%;
line-height: 15px;
padding: 10px;
}
.zemContactForm label {
float: left;
width: 60px;
margin: 0.3em 10px 0 0;
text-align: right;
}
.zemContactForm br {
clear: left;
}
.zemContactForm legend {
display: none;
}
.zemContactForm input,
.zemContactForm select,
.zemContactForm textarea {
margin: 0 0 0.3em 0;
}
input#yourname, input#email, textarea#message, input#phone, input#web {
width: 365px;
background-color: #EDF7FE;
}
.zemContactForm fieldset .buttons {
margin: 1em 0 1em 1em;
}
.zemContactForm .zemCheckbox {
float: left;
padding: 0.2em 1em;
text-align: left;
}
input#zemSubmit {
width: 365px;
margin-top: 20px;
}
ul.zemError {
color: red;
list-style-type: none;
padding: 10px 0px;
line-height: 20px;
}
Any help in solving this problem would be really appreciated. Thanks.
Offline
Re: zem_contact radio buttons
Why everything floats, including labels and those checkboxes? Those are inline elements so everything should and have not to float. Therefor, you could in example remove the float from the checkbox, and after that the checkbox should behave the same way as the other input fields.
Btw, I see a lot of empty <tr>, <ul>s etc. in your page source. Little validating wouldn’t do bad
Offline
Re: zem_contact radio buttons
Hi Jukka,
Thank you for your reply, I’ve now removed the floats ( replaced with display: inline-block;) and everything looks better.
Your comment about the empty tags is appreciated, the site has kind of fallen together over the last couple of years and my coding is not the best(!). To be honest I’m struggling to see where the problems are, so I should really start over and reorganise everything properly.
Offline
Pages: 1