Screwy Divs

[MrFish]

I'm making a custom button but I don't want to use <button> tags or the input tags because firefox gives that weird dotted outline around the text. I've tried lots to get rid of it but I googled it and found that it is an issue with the browsers code and can't be removed with css. So I'm making a button with a div and/or span tag but the problem is that the width will not show correctly.HTML

<div id="userBar">	<input type="text" name="username" value="username">	<input type="password" name="password" value="password">	<div class="button">Login</div></div> <!-- userBar End -->

CSS

.button{	width: 70px;	height: 14px;	padding: 5px;	display: inline;	text-align: center;	background-image: url("images/button.gif");	cursor: pointer;}

But as you can see the width is not 80px wide. If I take out padding then their is no space between the text and the edge of the image. This only happens when I make the display inline. The problem is, if I don't make it inline then the div will move a line down under the input boxes. If I add a float left to it then it is pushed completely left of the input boxes. Span has this width problem even without the display: inline;I know I could stick the input boxes in a div and float them to the left but I don't think that should be necessary. What should I do?

[Ingolme]

You can apply an inline-block display to the <div> element.Inline elements, such as <span> can't use the width property.If all you want to do is remove the dotted line from a <button> element, you can use the following CSS:button:focus { outline: none;}

[MrFish]

I've tried setting outline to none, it doesn't work in firefox.

[jlhaslip]

button:focus {outline: 0px;}