I am facing an issue with a submit button on my form. The button currently has an image, which is unnecessary as the same image is used elsewhere on the page. I believe there might be a parent-child element problem preventing me from making the necessary changes. I have tried adjusting styles in the .css file to override the hierarchy, but without success. As a newcomer to web development, I would appreciate a simple explanation of how to resolve this issue. Thank you.
UPDATE: It seems that there could be code in another part of the CSS file overriding the changes I am trying to make. I will provide a URL instead of pasting all the code here in the hopes that it will assist in finding a solution. Thanks for your help in guiding a web novice through this dilemma.
URL:
HTML
<div class="grid_4">
<div id="signup-form" class="clearfix">
<h2>Sign Up With US...its free!</h2>
<form action="">
<p>
<label>Name</label>
<input name="" type="text" />
</p>
<p>
<label>Email</label>
<input name="" type="text" />
</p>
<p>
<label>Phone Number</label>
<input name="" type="text" />
</p>
<p>
<label>Additional Information</label>
<input name="" type="text" />
</p>
<p class="last">
<button type="submit" class="button"><span>SUBMIT</span></button>
</p>
</form>
</div>
</div>
CSS
#signup-form {
padding: 15px;
/*
width: 200px;
height: 400px;
FIX FORM SIZE HERE!!!
*/
}
#signup-form h2 {
text-align: center;
font-size:24px;
font-weight: normal;
text-transform:uppercase;
width:100%;
padding: 0 15px;
margin: 0 -15px 25px;
background: url(../images/line.png) repeat-x left bottom;
padding-bottom:10px;
}
#signup-form label {
font-size:16px;
display: block;
margin-bottom:10px;
line-height:1;
}
#signup-form input[type=text], #signup-form textarea {
background-color:#fff;
border: none;
border-top: solid 3px #bababa;
width:250px;
padding: 9px 10px;font-size:14px;
}
#signup-form p.last {
margin-bottom: 0;
}
#signup-form button, #signup-form button > span {
display: block;
width:100%;
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#signup-form button > span {
background-color:rgba(0, 0, 0, 0.5);
font-size:16px;
text-align:center;
line-height: 68px;
}
JSFIDDLE: http://jsfiddle.net/ynYy7/