Problems with drop-down menus

kiwibrit · June 26th, 2009, 01:00 PM

I found that for the drop down menu I was getting a white background and no text (with the Monochrome selection). Not being able to track down the problem, I copied the entire contents of the chapter 7 source folder into the site. I still got the same result. Not only was the text not visible, but the white box disappeared immediately I tried to bring the mouse pointer over it.

No problem in Dark Grey

Here is the source code for the Monochrome page:

Code:

     BODY {margin:0;padding:0;}     .SYN_ROW {background:silver;}     .SYN_TXT {border-left:1px solid;position:relative;left:4.5em;background:white;font-family:monospace;margin-right:4.5em;}     .SYN_LNB {position:absolute;left:0;}     .SYN_LNN {padding:0;color:black;border:0;text-align:right;width:3.5em;height:1em;font-family:monospace;background:transparent;cursor:default;font-size:100%;}     .SYN_BCV {padding:0;color:black;border:0;text-align:center;width:.75em;height:.75em;font-family:monospace;background:white;cursor:default;line-height:.75em;position:relative;left:.25em;font-size:100%;}     .SYN_BCH {display:none;}     .SYN_END {width:4.5em;border-top:1px solid black;}     .HTML_TXT {color:#000000;}     .HTML_TAG {color:#0000ff;}     .HTML_ELM {color:#800000;}     .HTML_ATR {color:#ff0000;}     .HTML_VAL {color:#0000ff;}     .HTML_CHA {color:#ff0000;}     .HTML_COM {color:#008000;}     .HTML_NON {color:#000000;font-style:italic;}     .CSS_TXT {color:#000000;}     .CSS_SEL {color:#800000;}     .CSS_PRO {color:#ff0000;}     .CSS_VAL {color:#0000ff;}     .CSS_COM {color:#008000;}     .JS_TXT {color:#000000;}     .JS_KEY {color:#0000ff;}     .JS_STR {color:#800000;}     .JS_NUM {color:#ff0000;}     .JS_COM {color:#008000;} 
  


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


<html xmlns="http://www.w3.org/1999/xhtml"> 


<head><title> 


    Welcome to Planet Wrox 


</title> 


<link href="App_Themes/Monochrome/Monochrome.css" type="text/css" rel="stylesheet" /><style type="text/css">  


    .ctl00_Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; } 


    .ctl00_Menu1_1 { text-decoration:none; } 


    .ctl00_Menu1_2 {  } 


    .ctl00_Menu1_3 { border-style:none; } 


    .ctl00_Menu1_4 {  } 


    .ctl00_Menu1_5 { border-style:none; } 


    .ctl00_Menu1_6 {  } 


    .ctl00_Menu1_7 { border-style:none; } 


    .ctl00_Menu1_8 {  } 


    .ctl00_Menu1_9 { border-style:none; } 


    .ctl00_Menu1_10 {  } 


    .ctl00_Menu1_11 { border-style:none; } 


    .ctl00_Menu1_12 {  } 


  


</style></head> 


<body> 


  <form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm"> 


<div> 


<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> 


<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> 


<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" /> 


<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1Mg9kFgJmD2QWAgIDD2QWBgIDDzwrAA0CAA8WAh4LXyFEYXRhQm91bmRnZAwUKwAFBQ8wOjAsMDoxLDA6MiwwOjMUKwACFhIeBVZhbHVlBQRIb21lHglEYXRhQm91bmRnHghTZWxlY3RlZGceBFRleHQFBEhvbWUeC05hdmlnYXRlVXJsBQ0vRGVmYXVsdC5hc3B4HgdFbmFibGVkZx4KU2VsZWN0YWJsZWceB1Rvb2xUaXAFEkdvIHRvIHRoZSBob21lcGFnZR4IRGF0YVBhdGgFDS9kZWZhdWx0LmFzcHhkFCsAAhYQHwQFB1Jldmlld3MfAQUHUmV2aWV3cx8FBRUvUmV2aWV3cy9EZWZhdWx0LmFzcHgfCAUeUmV2aWV3cyBwdWJsaXNoZWQgb24gdGhpcyBzaXRlHwZnHwdnHwkFFS9yZXZpZXdzL2RlZmF1bHQuYXNweB8CZxQrAAMFBzA6MCwwOjEUKwACFhAfBAUIQnkgR2VucmUfAQUIQnkgR2VucmUfBQUYL1Jldmlld3MvQWxsQnlHZW5yZS5hc3B4HwgFHEFsbCBSZXZpZXdzIEdyb3VwZWQgYnkgR2VucmUfBmcfB2cfCQUYL3Jldmlld3MvYWxsYnlnZW5yZS5hc3B4HwJnZBQrAAIWEB8EBQtBbGwgUmV2aWV3cx8BBQtBbGwgUmV2aWV3cx8FBREvUmV2aWV3cy9BbGwuYXNweB8IBQtBbGwgUmV2aWV3cx8GZx8HZx8JBREvcmV2aWV3cy9hbGwuYXNweB8CZ2QUKwACFhAfBAUFQWJvdXQfAQUFQWJvdXQfBQUTL0Fib3V0L0RlZmF1bHQuYXNweB8IBQ9BYm91dCB0aGlzIFNpdGUfBmcfB2cfCQUTL2Fib3V0L2RlZmF1bHQuYXNweB8CZxQrAAMFBzA6MCwwOjEUKwACFhAfBAUKQ29udGFjdCBVcx8BBQpDb250YWN0IFVzHwUFEy9BYm91dC9Db250YWN0LmFzcHgfCAUKQ29udGFjdCBVcx8GZx8HZx8JBRMvYWJvdXQvY29udGFjdC5hc3B4HwJnZBQrAAIWEB8EBQhBYm91dCBVcx8BBQhBYm91dCBVcx8FBRMvQWJvdXQvQWJvdXRVcy5hc3B4HwgFCEFib3V0IFVzHwZnHwdnHwkFEy9hYm91dC9hYm91dHVzLmFzcHgfAmdkFCsAAhYQHwQFBUxvZ2luHwEFBUxvZ2luHwUFCy9Mb2dpbi5hc3B4HwgFF0xvZyBpbiB0byB0aGlzIHdlYiBzaXRlHwZnHwdnHwkFCy9sb2dpbi5hc3B4HwJnZGQCBQ88KwAJAQAPFgQeDU5ldmVyRXhwYW5kZWRnHgdWaXNpYmxlaGRkAg0PEGRkFgFmZBgBBQtjdGwwMCRNZW51MQ8PZAUESG9tZWSNt9c4O5Kd0QFyTeOz5/m4y64A2w==" /> 


</div> 


  


<script type="text/javascript">  


//<![CDATA[ 


var theForm = document.forms['aspnetForm']; 


if (!theForm) { 


    theForm = document.aspnetForm; 


} 


function __doPostBack(eventTarget, eventArgument) { 


    if (!theForm.onsubmit || (theForm.onsubmit() != false)) { 


        theForm.__EVENTTARGET.value = eventTarget; 


        theForm.__EVENTARGUMENT.value = eventArgument; 


        theForm.submit(); 


    } 


} 


//]]> 


</script> 


  


  


<script src="/WebResource.axd?d=zjwy0ZxOixWy3VlEQNKthw2&amp;t=633777696142384622" type="text/javascript"></script> 


  


  


<script src="/WebResource.axd?d=OBOGH8n-q0MabrLasd_BWQ2&amp;t=633777696142384622" type="text/javascript"></script> 


<div> 


  


    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAKm15LRBQLlh5KuCQL77aOhAwLhg4f+CiieU4govs+5R+qNnMMsk517Ll2f" /> 


</div> 


    <div id="PageWrapper"> 


    <div id="Header"><a href="./" class="HeaderLink"></a></div> 


    <div id="MenuWrapper"> 


        <a href="#ctl00_Menu1_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=-4VMWyEQdZ3MufV-a4Zvxg2&amp;t=633777696142384622" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_Menu1" class="MainMenu ctl00_Menu1_2" cellpadding="0" cellspacing="0" border="0"> 


    <tr> 


        <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Go to the homepage" id="ctl00_Menu1n0"><table class="StaticMenuItemStyle ctl00_Menu1_4 StaticSelectedStyle ctl00_Menu1_8" cellpadding="0" cellspacing="0" border="0" width="100%"> 


            <tr> 


                <td style="white-space:nowrap;"><a class="ctl00_Menu1_1 StaticMenuItemStyle ctl00_Menu1_3 StaticSelectedStyle ctl00_Menu1_7" href="/Default.aspx" style="border-style:none;font-size:1em;">Home</a></td> 


            </tr> 


        </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Reviews published on this site" id="ctl00_Menu1n1"><table class="StaticMenuItemStyle ctl00_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%"> 


            <tr> 


                <td style="white-space:nowrap;"><a class="ctl00_Menu1_1 StaticMenuItemStyle ctl00_Menu1_3" href="/Reviews/Default.aspx" style="border-style:none;font-size:1em;">Reviews</a></td> 


            </tr> 


        </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="About this Site" id="ctl00_Menu1n2"><table class="StaticMenuItemStyle ctl00_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%"> 


            <tr> 


                <td style="white-space:nowrap;"><a class="ctl00_Menu1_1 StaticMenuItemStyle ctl00_Menu1_3" href="/About/Default.aspx" style="border-style:none;font-size:1em;">About</a></td> 


            </tr> 


        </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Log in to this web site" id="ctl00_Menu1n3"><table class="StaticMenuItemStyle ctl00_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%"> 


            <tr> 


                <td style="white-space:nowrap;"><a class="ctl00_Menu1_1 StaticMenuItemStyle ctl00_Menu1_3" href="/Login.aspx" style="border-style:none;font-size:1em;">Login</a></td> 


            </tr> 


        </table></td> 


    </tr> 


</table><div id="ctl00_Menu1n1Items" class="ctl00_Menu1_0"> 


    <table border="0" cellpadding="0" cellspacing="0"> 


        <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="All Reviews Grouped by Genre" id="ctl00_Menu1n4"> 


            <td><table class="DynamicMenuItemStyle ctl00_Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%"> 


                <tr> 


                    <td style="white-space:nowrap;width:100%;"><a class="ctl00_Menu1_1 DynamicMenuItemStyle ctl00_Menu1_5" href="/Reviews/AllByGenre.aspx" style="border-style:none;font-size:1em;">By Genre</a></td> 


                </tr> 


            </table></td> 


        </tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="All Reviews" id="ctl00_Menu1n5"> 


            <td><table class="DynamicMenuItemStyle ctl00_Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%"> 


                <tr> 


                    <td style="white-space:nowrap;width:100%;"><a class="ctl00_Menu1_1 DynamicMenuItemStyle ctl00_Menu1_5" href="/Reviews/All.aspx" style="border-style:none;font-size:1em;">All Reviews</a></td> 


                </tr> 


            </table></td> 


        </tr> 


    </table><div class="DynamicMenuItemStyle ctl00_Menu1_6 ctl00_Menu1_0" id="ctl00_Menu1n1ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;"> 


        <img src="/WebResource.axd?d=Zq3BYdKrPabUkgC8CON1HwHPro3cBo_5MXhyxYgGw3s1&amp;t=633777696142384622" alt="Scroll up" /> 


    </div><div class="DynamicMenuItemStyle ctl00_Menu1_6 ctl00_Menu1_0" id="ctl00_Menu1n1ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;"> 


        <img src="/WebResource.axd?d=Gc2Bj4w47K4T2hXNuRBAoljyQ3ukX8TqD5ph49k-b4w1&amp;t=633777696142384622" alt="Scroll down" /> 


    </div> 


</div><div id="ctl00_Menu1n2Items" class="ctl00_Menu1_0"> 


    <table border="0" cellpadding="0" cellspacing="0"> 


        <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Contact Us" id="ctl00_Menu1n6"> 


            <td><table class="DynamicMenuItemStyle ctl00_Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%"> 


                <tr> 


                    <td style="white-space:nowrap;width:100%;"><a class="ctl00_Menu1_1 DynamicMenuItemStyle ctl00_Menu1_5" href="/About/Contact.aspx" style="border-style:none;font-size:1em;">Contact Us</a></td> 


                </tr> 


            </table></td> 


        </tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="About Us" id="ctl00_Menu1n7"> 


            <td><table class="DynamicMenuItemStyle ctl00_Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%"> 


                <tr> 


                    <td style="white-space:nowrap;width:100%;"><a class="ctl00_Menu1_1 DynamicMenuItemStyle ctl00_Menu1_5" href="/About/AboutUs.aspx" style="border-style:none;font-size:1em;">About Us</a></td> 


                </tr> 


            </table></td> 


        </tr> 


    </table><div class="DynamicMenuItemStyle ctl00_Menu1_6 ctl00_Menu1_0" id="ctl00_Menu1n2ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;"> 


        <img src="/WebResource.axd?d=Zq3BYdKrPabUkgC8CON1HwHPro3cBo_5MXhyxYgGw3s1&amp;t=633777696142384622" alt="Scroll up" /> 


    </div><div class="DynamicMenuItemStyle ctl00_Menu1_6 ctl00_Menu1_0" id="ctl00_Menu1n2ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;"> 


        <img src="/WebResource.axd?d=Gc2Bj4w47K4T2hXNuRBAoljyQ3ukX8TqD5ph49k-b4w1&amp;t=633777696142384622" alt="Scroll down" /> 


    </div> 


</div><a id="ctl00_Menu1_SkipLink"></a> 


       


       


    </div> 


    <div id="MainContent"> 


      <span id="ctl00_SiteMapPath1"><a href="#ctl00_SiteMapPath1_SkipLink"><img alt="Skip Navigation Links" height="0" width="0" src="/WebResource.axd?d=-4VMWyEQdZ3MufV-a4Zvxg2&amp;t=633777696142384622" style="border-width:0px;" /></a><span><a title="Home" href="/">Home</a></span><span> &gt; </span><span>Home</span><a id="ctl00_SiteMapPath1_SkipLink"></a></span><br /><br /> 


       


    <h1>Hi there visitor and welcome to Planet Wrox</h1> 


    <p class="Introduction"> 


      We're glad you are paying a visit to <a href="http://www.PlanetWrox.com"> 


      www.PlanetWrox.com</a>, the coolest music community site on the Internet. 


    </p> 


    <p class="Introduction"> 


      Feel free to have a <a href="Default.aspx">look around</a>; as there are lots of  


      interesting <b>reviews and concert pictures</b> to be found here. 


    </p> 


    <p> 


    You can <a href="Login.aspx">log in</a> here 


    </p> 


  


    </div> 


    <div id="Sidebar"> 


      Select a Theme <select name="ctl00$lstPreferredTheme" onchange="javascript:setTimeout('__doPostBack(\'ctl00$lstPreferredTheme\',\'\')', 0)" id="ctl00_lstPreferredTheme"> 


    <option selected="selected" value="Monochrome">Monochrome</option> 


    <option value="DarkGrey">DarkGrey</option> 


  


</select> 


    </div> 


    <div id="Footer">Footer Goes Here</div> 


  </div> 


   


  


<script type="text/javascript">  


//<![CDATA[ 


var ctl00_Menu1_Data = new Object(); 


ctl00_Menu1_Data.disappearAfter = 500; 


ctl00_Menu1_Data.horizontalOffset = 0; 


ctl00_Menu1_Data.verticalOffset = 0; 


ctl00_Menu1_Data.hoverClass = 'ctl00_Menu1_12 DynamicHoverStyle'; 


ctl00_Menu1_Data.hoverHyperLinkClass = 'ctl00_Menu1_11 DynamicHoverStyle'; 


ctl00_Menu1_Data.staticHoverClass = 'ctl00_Menu1_10 StaticHoverStyle'; 


ctl00_Menu1_Data.staticHoverHyperLinkClass = 'ctl00_Menu1_9 StaticHoverStyle'; 


//]]> 


</script> 


</form> 


</body> 


</html>

Any thought on what the problem might be?

kiwibrit · June 26th, 2009, 02:38 PM

Can see that was not a clever way of approaching this one - am working on it. Will come back to ask again if I need further help - or post solution.

kiwibrit · June 26th, 2009, 02:57 PM

Re-installed the MasterPage front and back code pages from downloaded Chapter 6 source then went back over the instructions in the chapter - and still got the same rendering of the drop down menus. As in practice I can never see me using this form of menu control (I have long used CSS-controlled lists), I shall skip the rest, and carry on to the next chapter.

Imar · June 26th, 2009, 03:32 PM

Hi there,

Take a look here: IE8 and the Menu

It's known issue between ASP.NET and IE8. ASP.NET was "wrong", and Microsoft has released a fix for the the problem.

Cheers,

Imar

kiwibrit · June 26th, 2009, 06:41 PM

Arrgh. Should have done a forum search before I wasted time.

Downloaded Hotfix KB969612 for my Xp computer - and that did the trick.

May I suggest this one be referred to in the errata, Imar? I know it's not strictly an error, in the book, but a note in that would have caught my eye (I have the errata printed out, and it's the first thing I refer to when I hit a problem).

Imar · June 27th, 2009, 05:59 AM

I thought the item was already on the errata list, but apparently it's not. I'll check what went wrong and resubmit it to Wrox so they can add it.

Cheers,

Imar