Question

I have a form that has an image behind it and in FF I can move the form lower and the image behind it stays where it is. But in Chrome the image and the form move together. Is there anyway I can get the form to move only in Chrome.

The code for the form is:

<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>

The CSS is:

#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;
}

I currently have the image as a background in the fieldset tag. I then use the #CSS form to move just the form lower and this works in FF but in Chrome it moves the image and the form. Is there anyway to sort this out?

Thanks

Answer 1

Use padding-top: 30px instead of margin-top: 30px on the #css form