I am using bitrepository's Ajax PHP form for my site and am styling it using their CSS stylesheet. Please go to http://diginnovations.com/dig-v4 to view the site.
Everything displays correctly in all browsers (even IE8) except for Firefox 3.6. The word "Comment" is displaying outside the textarea, which is also in the wrong place. I used "position: relative;" in order to move the textarea and submit buttons around.
Here is the PHP code:
$acf_form_fields = array('sender_name' => array('name' => 'Name',
'mandatory' => 1,
'validation' => array('basic' => 1),
'type' => 'input',
'errors' => array('none' => 'Fill your name')),
'sender_email' => array('name' => 'Email',
'mandatory' => 1,
'validation' => array('basic' => 1, 'email' => 1),
'type' => 'input',
'errors' => array('none' => 'Fill an e-mail address',
'invalid' => 'Fill a valid e-mail address')),
'sender_telephone' => array('name' => 'Phone Number',
'mandatory' => 0,
'type' => 'input'),
'sender_message' => array('name' => '<div class="textbox">Comment</div>',
'mandatory' => 1,
'validation' => array('basic' => 1, 'min_chars' => 15),
'type' => 'textarea',
'attributes' => array('rows' => 5,
'cols' => 35),
'errors' => array('none' => '<div class="textboxerror">Fill your message</div>',
'min_chars' => 'Your message should have at least [min_chars] characters.')));
And here is the CSS:
/* Label, Input, Textarea */
#ajax_contact_form div.wrap { position: relative; margin: 0;}
#acf_fields div.wrap label.in_field { position: absolute; top: 0; left: 0; width: 160px; display: block; margin: 11px 5px 5px 6px; padding: 0; color: #777; }
#ajax_contact_form div br {display: none;}
#acf_fields div { padding: 1px 0 1px 0px; }
#acf_fields div input { display: inline; font-size: 17px; }
#acf_fields div textarea { position: relative; left: 300px; bottom: 150px; font-size: 17px; display: inline; }
#acf_fields p.acf_escts { padding: 5px 0; }
#acf_fields label.acf_escts { width: 199px; padding-left: 0px; margin: 2px 17px 5px 0px; text-align: right; float: none; }
/* Input, Textarea, Select */
#acf_fields input, textarea, select { -moz-box-shadow: 0 0 3px #eeeeee; background:-moz-linear-gradient(top, #ffffff, #eeeeee 1px, #ffffff 5px); margin: 5px 5px 5px 0; padding: 2px; height: 30px; width: 269px; }
#acf_fields input, select { float: none; border: 2px solid #999; color: #333; -moz-border-radius: 3px; }
#acf_fields textarea { position: relative; left: 300px; bottom: 150px; width: 269px; height: 130px; border: 2px solid #999; color: #333; -moz-border-radius: 3px; }
.textbox { position: relative; left: 300px; bottom: 150px; display: inline; z-index: 150; }
.textboxerror { position: relative; left: 300px; bottom: 150px; display: inline; z-index: 150; }
Obviously if I move them to display correctly in FF 3.6, it messes up the positioning for all of the other browsers.
Any suggestions? Thanks in advance.
You have several structural problems.
1) You shouldn't put a div inside of a label -- label is inline, div is block, use a span or something -- use HTML validator, you have several validation bugs.
2) instead of moving the textarea and .textbox individually, why not move the div.wrap