CSS Display and IE vs. Firefox

[Brett]

I'm having some problems getting CSS style buttons lined up correctly in Firefox. The test page in question is:
http://www.drokpa.com/Hometst.php

If you look at the page in IE it renders the way I want it to. It doesn't seem to matter if I use the class of 'mybutton', where it's 'display:block', or 'mybutton2', where it's 'display:inline'. Both look the way I want.

If you look at the same page in Firefox, with 'display:block' I get the button outlined correctly, but it's not centered unter the text link. With 'display:inline' I get the button centered under the text link, but the outline of the button isn't correct.

Can someone please tell me how to get the button outlined correctly, and positioned under the text link, in Firefox?

Thanks in advance for your help............Brett

[jscheuer1]

The display:block; is the way to go with this:


.mybutton {
border: 3px outset white;
display: block;
width:100px;
margin:0 auto;
}

The margin:0 auto; is the way to center a block level element that has width. Using text-align:center should only work on inline elements and inline elements shouldn't fill out their borders. FF got it right but, IE was kinder about it. However, almost all browsers will do it like FF so, best to get it right so that you are not limited to an IE only audience.

[Brett]

Worked great....thanks.

I'd also discovered that I could put <center></center> around my <a> and <img> tags and get it to work as well, but this is better.

Brett