Hi there folks, hope someone can help me.

Been working on something involving styling of input buttons and after a lot of faffing around managed to get things to work in everything except Safari for Mac - strangely Safari for Windows is ok.

The html for the button is:
HTML Code:
<div class="floatright"><div class="button">
<input type="submit" id="submit" value="whatever" />
Whilst the css is
#mainarea .box .button { /* container div for a button */
	cursor: pointer; 
	border: none;
	margin: 0;
	padding: 0 0 0 13px;
	background: url(../images/button_account_cap.gif) 0 5px no-repeat;


#mainarea .box .button input {
	border: none;
	cursor: pointer; 
	height: 38px;
	margin: 0 0 0 -3px; /* ie-6 places a 3px gap which this overcomes */
	padding: 0 28px 4px 0;
	color: #fff;
	font: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	background: url(../images/button_account_base.gif) 100% 5px no-repeat;

#mainarea .box .button:hover {
	background-image: url(../images/button_account_capR.gif);

#mainarea .box .button:hover input {
	background-image: url(../images/button_account_baseR.gif);
I can's enclose a screenshot of the effect in Safari for Mac other than to say that it displays the "cap" image but then the Safari-own rendered button.

Can any of you guys advise?