Стили форм, действующие по-разному в 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, чтобы создать (как представляется) желаемый эффект.