asp.net menu

Hello,

I have built a basic page layout and am trying to get create a basic menubar using the built in menu function in ASP.NET.  I am working in Visual Studio 2010 with .NET 4.0 as the target framework.  

I am trying to make the asp menu fit to the very top of my div "menu".  When displayed in Firefox, there is no gap between the top of "menu" and the start of "Menu1".  When displayed in IE, there is a significant gap, I'd guess 10 pixels.

I created a brand new page with just this code, to be sure nothing else was causing it.

Any suggestions, I've set all the paddings to 0px, so I'm thinking I must be missing a property somewhere.  

Thanks  
<div id="menu">
            
			<asp:Menu ID="Menu1" runat="server" 
Orientation="Horizontal" 
                BorderStyle="None"  >
                <Items>
                  ...
                </Items>
            
            
                <StaticMenuItemStyle ForeColor="White" HorizontalPadding="0px" 
                    VerticalPadding="0px" />
                <StaticMenuStyle BackColor="Lime" />
            
            
            </asp:Menu>
</div>

#menu
{
    clear: both;
    font-size: 10px;
    background-image: url(Images/menu.png);
    background-repeat: repeat-x;
    height: 28px;
    vertical-align: top;
    color: #FFFFFF;
    padding: 0px 0px 0px 0px;
}

Open in new window

compsol1993Asked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
All browsers apply some default padding and margins to their page layouts. Just as a test you could try adding something like this to the top of your css definitions:

* {padding:0; margin-top:0}

It could mess up the layout of some other items on the page, but at least you will know it's default padding or margins causing the problem.
0
 
Tom BeckCommented:
Or maybe this would be a more thorough test:

* {padding:0; margin:0}
0
 
guru_samiConnect With a Mentor Commented:
Any sample code we can see this in action / reproduce?
Not sure if this has anything to do with it.
0
 
compsol1993Author Commented:
Thanks guys, this pointed me in the right direction.  I figured out the cause.

ASP.net when rendered, builds the menu with <ul> & <li>'s.  My CSS was handling other list elements, and inadvertently messed up the menu.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.