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

HTML & CSS
1

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…

2

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

3

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

:wink:

4

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