3
웹 사이트 페이지는 www.guardinglight.com/contact.html입니다. Firefox와 IE에서는 사이트가 정상적으로 보이지만 Safari의 양식 여백은 이동 중입니다. 이것은 웹 사이트를 처음 개발 한 것이므로 도움이 될 것입니다. 감사. html로 :양식 여백은 Safari에서 이동하지만 Firefox와 IE에서는 괜찮습니다.
<div id="contact">
<div id="contact_form">
<form method="post" action="contactengine.php" id="commentForm">
<fieldset>
<h1 id="contact_text">Please fill out the from below and we will contact you shortly.</h1>
<div id="formLeft"><label for="Name">Name:</label>
<div class="input-bg"><input type="text" name="Name" id="Name" class="required"></div>
<label for="Phone">Phone Number:</label>
<div class="input-bg"><input type="text" name="Tel" id="Tel"></div>
<label for="Email">Email:</label>
<div class="input-bg"><input type="email" name="Email" id="Email" class="required email"></div>
<label for="Message">Message:</label>
<div class="message-bg">
<textarea name="Comment" id="Comment" rows="20" cols="20" class="required">
</textarea></div>
<br>
<input type="image" src="images/submit-button.png" name="submit" value="Submit" class="submit- button" alt="submit"></div>
</fieldset>
</form>
</div>
CSS는이 :
#contact_form {
width: 455px;
margin: 10px 0px 20px 10px ;
background: url(images/contact-form_bg.png) no-repeat;
min-height: 600px;
}
form {
padding: 0px 0px 0px 20px;
margin: 0px 0px 0px 0px;
}
h1 {
text-align: left;
padding-top: 200px;
}
formLeft {
width: 420px;
float: left;
}
input[type=text] {
width: 400px;
height: 30px;
margin: 0 0 20px 0;
border: none;
text-align: left;
background: #bebebe;
margin: 0px 0 0 8px;
font-size: 13px;
font-family:Arial, Helvetica, sans-serif;
}
input[type=email] {
width: 400px;
height: 30px;
margin: 0 0 20px 0;
border: none;
text-align: left;
background: #bebebe;
margin: 0px 0 0 8px;
font-size: 13px;
font-family:Arial, Helvetica, sans-serif;
}
textarea {
width: 400px;
height: 190px;
display: block;
border: none;
background: #bebebe;
margin: 0 0 0 8px;
padding: 0px 0 0px 0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
}
label {
display: block;
font-size: 13px;
text-indent: 10px;
font-weight: bold;
color:#333;
margin: 10px 0px -3px 0px;
font-family:Arial, Helvetica, sans-serif;
position:relative;
}
label.error {
color: red;
font-style: italic;
float: right;
margin: 0px 0px 0px 0px;
position:relative;
left: -30px;
top: -20px;
}
input[type=image] {
float: right;
padding-right: 31px;
}
#contact_social{
float: right;
margin: -620px 100px 10px 0px;
background: url(images/contact-info_bg.png) no-repeat;
width: 316px;
height: 416px;
}
ul#contact_social_list {
width: 315px; list-style: none; float: right; overflow: hidden; margin: 100px 25px 0px 0px;
}
ul#contact_social_list li {
width: 260px; height: 54px; float: right; padding: 12px 0px 10px 0px;
}
#vr{
margin: -630px 0px 0px 500px;
width: 4px;
height: 611px;
overflow: hidden;
position: absolute;
}