Текстовое поле не отображается правильно в Firefox 3.6 - PullRequest
Новая
       11

Текстовое поле не отображается правильно в Firefox 3.6

1 голос
/ 12 мая 2011

Я использую Ajax PHP-форму bitrepository для своего сайта и стилизую ее, используя свою таблицу стилей CSS.Пожалуйста, перейдите на http://diginnovations.com/dig-v4 для просмотра сайта.

Все отображается правильно во всех браузерах (даже IE8), кроме Firefox 3.6.Слово «Комментарий» отображается за пределами текстовой области, которая также находится не в том месте.Я использовал «положение: относительный;»для перемещения текстовой области и отправки кнопок.

Вот код PHP: 

$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.')));

А вот 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; }

Очевидно, если япереместите их, чтобы правильно отобразить в FF 3.6, это портит расположение всех остальных браузеров.

Есть предложения?Заранее спасибо.

1 Ответ

0 голосов
/ 12 мая 2011

У вас есть несколько структурных проблем.

1) Вы не должны помещать div внутри label - label является встроенным, div является блоком, используйте span или что-то еще - используйте валидатор HTML, у вас есть несколько ошибки проверки.

2) вместо того, чтобы перемещать textarea и .textbox по отдельности, почему бы не переместить div.wrap

...