Firefox 3.6에서 Textarea 상자가 올바르게 표시되지 않습니다.

Question

내 사이트에 bitrepository의 Ajax PHP 양식을 사용하고 CSS 스타일 시트를 사용하여 스타일을 지정하고 있습니다. 사이트를 보려면 http://diginnovations.com/dig-v4으로 이동하십시오.

모든 것이 Firefox 3.6을 제외한 모든 브라우저 (IE8 포함)에서 올바르게 표시됩니다. "Comment"라는 단어가 텍스트 영역 외부에 표시되는데, 텍스트 영역도 잘못된 위치에 있습니다. 나는 "위치 : 친척"을 사용했다. 텍스트 영역을 이동하고 버튼을 제출하기 위해 여기

는 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입니다 : 나는 FF 3.6에 올바르게 표시하도록 이동하면 분명히

/* 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; } 

, 그것의 모든 위치를 망쳐 놨어요 다른 브라우저.

제안 사항? 미리 감사드립니다.

Answer 1

몇 가지 구조적인 문제가 있습니다.

1) 당신은 label의 내부 div를 넣으면 안됩니다 - 여러 검증 버그가 사용 HTML 유효성 검사기 - label은 div가 블록하는 span 또는 무언가를 사용하고, 인라인입니다. 대신 개별적으로 textarea 및 .textbox를 이동하는

2), 왜 끝의 div.wrap