Vertical spacing between button controls

[Halliarse]

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

 

[jbenson001]

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

 

[Halliarse]

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

 

[jbenson001]

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

 

[Halliarse]

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

 

[jbenson001]

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