CODEWITHSUNDEEP
c#asp.netcss
user410911
user410911

Reputation: 65

asp:menu with image has padding above

I have a menu bar in the site master in a table. For some reason I cant figure out there is always padding above it.

This is the css:

div.menu
{
    padding: 0px 0px 0px 0px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

div.menu ul li 
{
    color: white;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    display: block;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a
{ 
    padding: 4px 20px;
    color: white;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    display: block;
    text-decoration: none;
    white-space: nowrap;
    background-color: #2c4257;
}

div.menu a ul li a:visited
{
    background-color: #25394B;
    color: white;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    display: block;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #25394B;
    color: #ef7c31;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #25394B;
    color: #ef7c31;
    text-decoration: none;
    text-align:left
}

and this is in the site master

 <table style="background-color: #2E4459">
     <tr>
         <td>
             <asp:Menu ID="SettingsMenu" runat="server" EnableViewState="True" IncludeStyleBlock="false" Orientation="Horizontal" CssClass="menu">
             <DynamicSelectedStyle ForeColor="#ef7c31" />
                 <Items>
                     <asp:MenuItem ImageUrl="Images/settings.png">
                     <asp:MenuItem NavigateUrl="~/Pages/CRMSettings/Area.aspx" Text="Area" />
                     <asp:MenuItem NavigateUrl="~/Pages/CRMSettings/Post.aspx" Text="Post" />

I don't know how to fix it there is around 30 px.

enter image description here

Its also happening with out the image, if I just put text.

enter image description here This is the setting.png

Upvotes: 1

Views: 702

Answers (3)

New Developer
New Developer

Reputation: 3305

what I figured-out was there is a padding padding: 4px 20px; value for div.menu ul li a changing that will help you. change it to div.menu ul li ul li a

div.menu ul li ul li a
{ 
    padding: 4px 20px;
    color: white;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    display: block;
    text-decoration: none;
    white-space: nowrap;
    background-color: #2c4257;
}

Upvotes: 0

prospector
prospector

Reputation: 3469

div.menu
{
    padding: 0px !important;
}

try that

Upvotes: 1

New Developer
New Developer

Reputation: 3305

I think this is what you need. Try this. Add this to your CSS 

html,body
{
    padding:0px;
    margin:0px;
}

Upvotes: 0

Related Questions