CODEWITHSUNDEEP
asp.netcssmaster-pagesaspmenu
ahmd0
ahmd0

Reputation: 17293

Strange visual artifact in the ASP.NET menu with a Master page

I was wondering why am I getting this weird visual artifact?

I have a web app ASP.NET project that is configured with a master page. The master page has the top menu like so:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
  <Items>
    <asp:MenuItem NavigateUrl="~/ReportPage.aspx" Text="<%$ Resources:Master, Menu_Reports %>"/>
    <asp:MenuItem NavigateUrl="~/ConfigurePage.aspx" Text="<%$ Resources:Master, Menu_Configure %>"/>
    <asp:MenuItem NavigateUrl="~/AboutPage.aspx" Text="<%$ Resources:Master, Menu_About %>"/>
  </Items>
 </asp:Menu>

and the styles are as follows:

div.menu
 {
     padding: 4px 0px 4px 8px;
 }
div.menu ul
 {
     list-style: none;
     margin: 0px;
     padding: 0px;
     width: auto;
 }
 div.menu ul li a, div.menu ul li a:visited
 {
     background-image: url("../Graphics/btngradb.png");
     border: 0px solid #bc8b28;
     color: #ececec;
     display: block;
     line-height: 1.35em;
     padding: 4px 20px;
     text-decoration: none;
     white-space: nowrap;
     margin-right: 4px;
     font-size: 14px;
     text-shadow: 1px 1px 1px #7a550e;
 }
 div.menu ul li a:hover
 {
     background-image: url("../Graphics/btngradg.png");
     border-bottom-color: #719b14;
     color: #ececec;
     text-decoration: none;
 }
 div.menu ul li a:active
 {
     background-color: #a1ca56;
     color: #000000;
     text-decoration: none;
 }

What happens is that when the page loads in a web browser I get the menu displayed vertically, like it's shown on this screen grab:

http://i150.photobucket.com/albums/s99/dc2000_bucket/menu_bug.png

And after a split second it switches to the way how I want it - horizontally (top picture in the link above.)

Can someone tell me what am I not doing right and how to fix it?

Upvotes: 1

Views: 1072

Answers (1)

Craig
Craig

Reputation: 4383

Sounds like there's some sort of delay while the browser is loading your css.

Where's your stylesheet/css located within the page markup?

You should try to place it as "high-up" in the <head> tag as possible, ideally right after <title></title> and before any <script> tags.

http://developer.yahoo.com/performance/rules.html#css_top

UPDATE: after looking at your css a bit closer, I think you need to change the display: block to display: inline-block. display: block is likely what's causing the initial vertical layout, then (i'm assuming) some sort of ASP.NET injected menu javascript is fixing it (since you have Orientiation="Horiztonal" specified). Just a guess.

Upvotes: 2

Related Questions