Forum Moderators: not2easy

Message Too Old, No Replies

CSS for input button.

         

Access

9:36 pm on Oct 28, 2008 (gmt 0)

10+ Year Member



This is basically two input fields with type=button been putted together.
How can I get rid of those two gaps between them and make it look like one button?

Please click here to see it:
<snip>

First button:
style="background-color:#E8DCBE;
border-bottom:#494A45 1px solid;
border-left:#FFFFFF 1px solid;
border-right:#E8DCBE 1px solid;
border-top:#FFFFFF 1px solid;
color:#494A45;
font-size:11px;
font-weight:bolder;
padding-right:5px;
padding-left:5px;
height:22px;
width:105px"

Second button:
style="background-color:#E8DCBE;
border-bottom:#494A45 1px solid;
border-left:#E8DCBE 1px solid;
border-right:#494A45 1px solid;
border-top:#FFFFFF 1px solid;
color:#494A45;
font-size:13px;
font-weight:bolder;
padding-right:5px;
padding-left:5px;
height:22px;
width:20px; text-align:center;" Text="+" />

Thanks for your help

[edited by: swa66 at 10:52 pm (utc) on Oct. 28, 2008]
[edit reason] no URLs, see charter [/edit]

Tom_Cash

12:04 am on Oct 29, 2008 (gmt 0)

10+ Year Member



I tried various things, but this worked most well:

CSS:
.button1{
float: left;
margin-bottom: 0px;
margin-right: 100%;
border: 1px solid #CCC;
background: #CCC;
padding: 2px;
width: 100px;
}

.button2{
float: left;
margin-top: 0;
border: 1px solid #CCC;
background: #CCC;
padding: 2px;
width: 100px;
}

HTML:
<input type="submit" name="submit" value="Top" class="button1"><br>
<input type="submit" name="submit" value="Bottom" class="button2">

Hope this helps, somewhat.