Images & form elements automatically disappearing?

Question

I'm having a rather weird issue in IE7 & IE8, when i load one of my websites various items render as expected then after about 1 second they all disappear. This includes form elements, background colors & background images (set via css)

You can have a look yourself at www.michaelmeahanjoinery.co.uk (assuming you are viewing in ie7/8)

I've exhausted my list of usual fixes so im a bit stumped at the moment. I should also probably mention that they both render correctly on my development machine, but when the live site is viewed it craps out.

Heres the code for the form.

<form class="form" method="POST" action="index.php?module=contact">

<p class="name">
<input type="text" name="name" id="name" value="<?php echo $name; ?>"/>
<label for="name">Name</label>
</p>

<p class="email">
<input type="text" name="email" id="email" value="<?php echo $email; ?>"/>
<label for="email">E-mail</label>
</p>

<p class="phone">
<input type="text" name="phone" id="phone" value="<?php echo $phone; ?>"/>
<label for="web">Phone</label>
</p>

<p class="comments">
<textarea name="comments"></textarea>
</p>

<p class="submit">
<input type="submit" value="Send" />
</p>
<input type="hidden" id="send" name="send" value="1">
</form>

Heres the CSS for the form.

input, textarea { 
padding: 9px;
margin-top:0px;
margin-bottom:2px;
border: solid 1px #E5E5E5;
outline: 0;
width: 200px;
background: white;
background: #FFFFFF url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}

textarea { 
width: 400px;
max-width: 400px;
height: 176px;
margin-bottom:0px;
}

input:hover, textarea:hover,
input:focus, textarea:focus { 
border-color: #C9C9C9; 
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}

.form label { 
margin-left: 10px; 

}

.submit input {
width: auto;
padding: 9px 15px;
background: #582404;
border: 0;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;
}

UPDATE I have been playing about with it and have discovered something a bit unusual. First of all this only happens on the live site, so rather than me playing about with the live site, i duplicated the website as is into a sub-directory.

I done this so i could play around with the code and see what it actually would look like, but when i went to the sub-directory it actually displays perfectly fine??

Could this be some sort of apache directory issue?

Not displaying correctly. http://www.michaelmeahanjoinery.co.uk/index.php?module=contact

Displaying correctly. http://www.michaelmeahanjoinery.co.uk/test/index.php?module=contact

Answer 1

yes, i verified your site. you not added separate class for IE to display gradient, so please add the below code in css after that it will display correct in IE7 and IE 8

background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-8 */