Формы стилей, действующие в FF и Chrome

Question

У меня есть форма, которая имеет изображение за ней, а в FF я могу перемещать форму ниже, а изображение позади нее остается там, где оно есть. Но в Chrome изображение и форма перемещаются вместе. В любом случае, я могу получить форму для перемещения только в Chrome.

Код формы является:

<div id="css">  
     <fieldset> 
<form action="contact.php" name="myForm" method="post" onsubmit="return validateForm();"> 

    <input onfocus="this.value=''"" value="Name" 
type="text" name="cf_name"> 


    <input onfocus="this.value=''"" value="Email" type="text" name="cf_email"> 

    <input onfocus="this.value=''"" value="Website" 
type="text" name="cf_website"> 

    <textarea name="cf_message" onfocus="this.value=''"" 
    >Message</textarea> 
<p class="submit"> <input type="submit" value="Send"></p> 
</form> 
</fieldset> 
</div> 

CSS-это:

#css fieldset 
{ 
background: url(images/notepad_about1.png) no-repeat; 
border:0px; 
height:560px; 
margin: 0; padding: 0; 

} 

#css input{ 

border-radius:5px; 
border:medium none; 
color:#000; 
display:block; 
font-size:2.75em; 
width:450px; 
margin:0 0 10px; 
padding:8px; 
cursor: default; 
background-image: none; 
background-color: #000cff; 
opacity: 0.5; 
} 

#css form 
{ 
margin-left:120px; 
margin-top:30px; 
} 

#css textarea{ 
border-radius:5px; 
border:medium none;color:#000; 
display:block; 
font-size:2.60em; 
width:450px; 
margin:0 0 10px; 
padding:8px; 
height:200px; 
background-image: none; 
background-color: #000cff; 
opacity: 0.5; 
font-family: Verdana,Arial,Sans-serif; 
} 

#css .submit input{ 
    background-color: #000; 
    opacity: 9.5; 
    font-size:1.75em; 
    width:100px; 
    color:#fff; 
} 

#css .submit input:hover{ 
    background-color: #000cff; 
} 

я в настоящее время изображение в качестве фона в fieldset тега. Затем я использую #CSS form для перемещения только формы ниже, и это работает в FF, но в Chrome он перемещает изображение и форму. Есть ли способ разобраться в этом?

Благодаря

Answer 1

Использование padding-top: 30px вместо margin-top: 30px на форме #css

Answer 2

Хотя fieldset элемент синтаксически разрешено содержать form элемент, такой вложенности не является общим и, как правило, не полезно. Я предлагаю вложить их обычным способом, form, содержащий fieldset (или, может быть, div - fieldset в настоящее время недействителен, так как он не содержит элемента legend, но это в основном формальность). Затем вы можете установить фон на элементе form и смещении на элементе fieldset, и это должно работать в кросс-браузере. В качестве альтернативы вы можете использовать только form, содержащий поля напрямую, и установить фоновое изображение на form и подходящее значение для padding-top, чтобы создать (что-то похожее) желаемый эффект.