two links side-by-side not working b/c of display:block

[maya90]

I have two links, they have to be side by side, but they also have to be display:block b/c they have bg images... they're not falling side-by-side, even though have margin:0 & padding:0 for both of them..

(actually, one of them is a link, other one is an input type="image")

<div id="buttons">
	<a href="" id="surveyOverlayCancel">cancel</a>&nbsp;&nbsp;
	<input type="image" id="surveyOverlaySubmit" class="submitBtn" src="images/btn_submit_survey_overlay.jpg" value="submit" alt="submit" />
</div>

#surveyOverlaySubmit { margin:0; padding:0;  } 
a#surveyOverlayCancel { display:block; margin:0;  padding:0; background:url('../images/btn_cancel_survey_overlay.jpg') no-repeat; 
			width:82px; height:32px; text-indent:-9999px;  }

would appreciate some suggestions.. thank you..

[noonnope]

display:block defeats the side by side.
display: inline-block doesn't

[maya90]

hmm.. thank you very much.. ended up positioning them..

;-)

[RyanReese]

If supporting FF2 you will need display:-moz-inline-box; in there as well becuase FF2 doesn't support inline-block without it.

You could have also floated by the way