Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Vertical spacing between button controls

Status
Not open for further replies.

Halliarse

IS-IT--Management
Jan 8, 2007
213
GB
ASP VS2012

Hi

I am using vertical button controls that when creted through 'Design' stack on top of each other. I need to be able to include a small gap, maybe 1 or 2px. I've looked everywhere and cannot fine a solution....any help, as always will be appreciated. I've added my code below:

<div id="detailMenu">
<div class="detailnavBar">
<ul class="detailNavigation" style="float: none;">
<li></li>
<li></li>
<li style="float: none;">
<asp:Button ID="butMaster1" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster2" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster3" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster4" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster5" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster6" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster7" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster8" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster9" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster10" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster11" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster12" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster13" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster14" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster15" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster16" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster17" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
<li style="float: none;">
<asp:Button ID="butMaster18" runat="server" Text="" cssClass="buttoncurves" Visible="False" Font-Size="Medium" BackColor="Snow" Width="250px"/>
</li>
</ul>
</div>
</div>

Thanks

Steve
 
I'm not sure I understand the problem. You want a vertical space between them? Use CSS. Set a padding or margin on them.

Also, since this is really a CSS question, not ASP.NET, you should post here next time: forum215
 
Jbenson001, thanks for the response again!

I already have a margin and so I tried adding padding-bottom and padding and all each of these controls does is increase the size of the button. Any ideas?

Cheers

Steve
 
I need to see the code you are using
you should be putting the CSS on the li, not the button itself
 
Hi Jbenson001

Which code? I posted that at the beginning of the thread.

Also, I tried adding padding-bottom to the Style.css but it will not allow me to apply this to <li>...am I missing something?

Cheers

Steve
 
Add your css to the HTML markup first to see if it works. If it does, move it to your css file. If it does not work then you have to figure out why
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top