Jump to content

Screwy Divs


Recommended Posts

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.screwybutton.pngscrewybuttons2.pngHTML

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


.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?

Edited by MrFish
Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...