So I came to the board with some questions a couple weeks ago, trying to style the contact page, especially to get a border around the whole form. And finally it was because of the errors I had in my code. Which, as pretty much a n00b, I knew there were a couple minor errors but didn’t feel I could fix them, and it was kind of a ’if it ain’t broke...’ type of situation. I am sure others can relate.
Well, Susan said that could be the reason I couldn’t get the border set, and then when I checked I found major errors in my table structure (my whole site is in tables) which I must have introduced at some point. So that was embarrassing. So, intimidated or no, I finally went through and fixed all the errors, there was an extra </tr> or two which caused a lot of other errors. They don’t call them cascading style sheets for nothing! I had errors cascading all over the place.
And now, I have a styled, ugly but styled form to show off using the standard eform chunks. Here is the link (I can get these pages but the validator is timing out, just to let you know), its at the bottom of the page:
http://www.rayxi.com/index.php?id=197
So I put the form into a chunk and the chunk into a div in the template, not in the page itself. I tried to do it in the page but the border would not go around the form, whether the form was in a chunk or not. The border and form at independent, sort of, the form can extend outside the border, but the margins of the form elements are calculated from within the div. So I am not sure how stable this set up is, but dammit it validates and its got a border. Win!
Here is the code:
Template (abbreviated, this is the whole main table of the page, before that right side section)
<table width="775" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="content">
<div id="styles">
[*content*]
</div>
</div>
<div id="form">
{{form}}
</div>
</td>
</tr>
</table>
CSS
#form{
padding: 2px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
border-style: outset;
border-width: 5px;
border-color: #8A8F97;
width: 600px;
height: 320px;
background-color: #BFC699;
}
...
label {
text-transform: uppercase;
color: #3F628C;
display:block;
text-align:left;
margin-left: 30px;
}
input {
background: #E5EAEF;
border: 3px solid #83A1C7;
margin-left: 30px;
}
textarea {
width: 450px;
height: 80px;
border: 3px solid #83A1C7;
padding: 5px;
margin-left: 30px;
font-family: Tahoma, sans-serif;
background-color: #929BBC;
text-align:left;
}
select {
background-color: #A8ACC0;
margin-left: 30px;
color: #ffffff;
}
into the content page, not the template 