1

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?

John Saunders
  • 160,644
  • 26
  • 247
  • 397
ahmd0
  • 16,633
  • 33
  • 137
  • 233
  • In addition to the answer below, it may also be worth speeding up your CSS selectors. Combining tags and classes is slower than just using a class. – jwheron Nov 05 '11 at 04:04
  • BTW, it's "ASP.NET", not "ASP NET". – John Saunders Nov 05 '11 at 05:19
  • Sorry, yes I forgot the dot... @jwiscarson what really puzzles me is that the way the menu loads first it looks styled but in a wrong orientation. BTW, the advice below did not help.... :( – ahmd0 Nov 05 '11 at 07:27

1 Answers1

2

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.

Craig
  • 4,323
  • 2
  • 29
  • 32
  • You know, I just checked and the CSS styles tag that includes external .css file follows right after the tag... – ahmd0 Nov 05 '11 at 07:25
  • thanks for trying. Your inline-block change only made the menus displayed wrongly initially (or vertically) shorter but they are still displayed the wrong way for that short moment.... – ahmd0 Nov 05 '11 at 20:13