After rendering the following code, the menu appears as a table with the ID topMainMenu
and a height of 51. However, upon removing the Blueprint stylesheet, the height of topMainMenu
reduces to 20, which I believe is the minimum height.
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="Styles/Blueprint/screen.css" />
<script src="<%# ResolveUrl("~/Scripts/jquery-1.4.4.js")%>" type="text/javascript"></script>
</head>
<body>
<form id="form" runat="server">
<div class="prepend-1 span-22 last">
<asp:Menu ID="topMainMenu" runat="server" DataSourceID="mainMenuDataSource" Orientation="Horizontal" Width="100%" Height="16px">
<StaticMenuStyle Height="10px" BackColor="Navy" />
</asp:Menu>
</div>
</form>
</body>
My understanding was that in this situation, Blueprint should not impact the height at all. Could it be possible that a CSS reset is causing this unexpected behavior? None of my styling attempts have been successful in reducing the menu height below 51. What actions can I take in this case?