problem with StaticSelectedStyle in a menu

SouthendSupporter · April 13th, 2011, 03:31 AM

Thanks Imar -- that works a treat -- I had tried different 'names' in the <siteMap defaultProvider="DefaultMenu"> statement but not DefaultMenu which works.

Now to reread Chapter 7

Imar · April 13th, 2011, 03:41 AM

ASP.NET needs to know what the default provider is for cases where you don't specify one explicitly on a SiteMapDataSource (which you often don't).

If looks at the defaultProvider attribute and then walks the list of configured providers, and checks their names until it finds the one with a matching name. This one is then used for all cases where no provider is specified explicitly.

Quote:

Now to reread Chapter 7

Have fun ;-)

Cheers,

Imar

SouthendSupporter · April 14th, 2011, 05:09 AM

Thanks for all the help.
haven't Started Chapter 7 again yet as I still have a problem with the menu :(

Basically the static, hover and selected styles are the same with some styling changes:

Code:

{
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
  font-family: Verdana;
  height: 100px;
  width: 100px;
  margin-right: 10px;
  margin-left: 10px;
  color: #c1272d;
  background-color: #FF00FF;
  text-align: center;
  vertical-align: middle;
  white-space: ????????????????????
}

Ignore the bright color - just there to help me line things up

My issue is that text does not align centrally if it needs to wrap?
If I just have a single word it centers perfectly (though if it is longer than the set width it elongates the item block -- what's the point of setting a width?)
But if I have two words separated by either a blank or a hard return the first line moves to the right and the second line to the left
I've tried all the settings of white-space with no success. It seems what I need is a value to delete the white space when wrapping but this doesn't appear to exist?
See a picture of the menu here

Imar · April 14th, 2011, 05:17 AM

Hi Geoff,

Can you show us the relevant code for the menu in the browser, along with its CSS?

E.g. can you reproduce this in a single HTML file with CSS and post that here? This is more of a CSS issue than anything else.....

Cheers,

Imar

SouthendSupporter · April 14th, 2011, 07:05 AM

Hi
menu:

Code:

  <asp:Menu ID="Menu1" runat="server" 
                Orientation="Horizontal" align="center" 
                StaticEnableDefaultPopOutImage="False" 
                ItemWrap="True"
                Width="362px" 
                DataSourceID="SiteMapDataSource1" >   
            
            <StaticMenuItemStyle CssClass="StaticMenuItemStyle" />
            <StaticSelectedStyle CssClass="StaticSelectedStyle" />
            <StaticHoverStyle cssclass="StaticHoverStyle" />
  </asp:Menu>
  <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"  SiteMapProvider="BusinessMenu" ShowStartingNode="False" />

CSS: (The White-Space values are just what I have been 'playing with' - nothing works!)

Code:

.StaticMenuItemStyle, .StaticMenuItemStyle:visited
{
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
  font-family: Verdana;
  color: #c1272d;
  text-align: center;
  vertical-align: middle;
  height: 100px;
  width: 100px;
  background-color: #FF00FF;
  margin-right: 10px;
  margin-left: 10px;
}
.StaticSelectedStyle, .StaticSelectedStyle:visited
{  
padding-left: 5px;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
font-family: Verdana;
color: green;
text-align: center;
height:100px;
width: 100px;
vertical-align: middle;
white-space: normal;
  margin-right: 10px;
  margin-left: 10px;
}

.StaticHoverStyle, .StaticHoverStyle:visited
{  
padding-left: 5px;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
font-family: Verdana;
color: black;
text-align: center;
height:100px;
width: 100px;
vertical-align: middle;
white-space: none;
  margin-right: 10px;
  margin-left: 10px;
}

Imar · April 14th, 2011, 07:10 AM

Hi Geoff,

What I meant was a complete HTML file (wirh embedded CSS) so it's easy to reproduce the problem in the browser and think of a fix. Your current code requires a bit too much setup for me....

Imar

SouthendSupporter · April 14th, 2011, 07:14 AM

Thanks for your continued support Imar!

As I said I am not a regular developer so not exactly sure how I would actually create the HTML for this.
Would viewing the source of a page n a browser and cutting and pasting that be helpful?

Imar · April 14th, 2011, 07:27 AM

Quote:

Would viewing the source of a page n a browser and cutting and pasting that be helpful?

Exactly. You may need to alter the page afterward by embedding the relevant CSS in the file directly so I can view it as a single page.

If you post the code, please paste it in Notepad first (to remove color coding) and then copy and paste it here. Next, wrap the code in code tags using the # button on the toolbar.

Cheers,

Imar

SouthendSupporter · April 14th, 2011, 07:40 AM

Thanks for you patience Imar.
Here is the code (hope it's what you need):

Code:

<!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><link 

href="App_Themes/3Column/3Column.css" type="text/css" rel="stylesheet" /><meta 

name="google-site-verification" content="M8qVTfgjXH6dJaCEjTMmkerA4eFhIduDKXOMD3pRw5E" 

/><title>	IT Management, PC and Computer Support in Haslemere, Liphook, 

Guildford, Godalming, Petersfield, Surrey, Sussex and Hampshire</title>    <style 

type="text/css">

.StaticMenuItemStyle, .StaticMenuItemStyle:visited
{
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
  font-family: Verdana;
  color: #c1272d;
  text-align: center;
  vertical-align: middle;
  height: 100px;
  width: 100px;
  background-color: #FF00FF;
  margin-right: 10px;
  margin-left: 10px;
}
.StaticSelectedStyle, .StaticSelectedStyle:visited
{  
padding-left: 5px;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
font-family: Verdana;
color: green;
text-align: center;
height:100px;
width: 100px;
vertical-align: middle;
white-space: normal;
  margin-right: 10px;
  margin-left: 10px;
}

.StaticHoverStyle, .StaticHoverStyle:visited
{  
padding-left: 5px;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
font-family: Verdana;
color: black;
text-align: center;
height:100px;
width: 100px;
vertical-align: middle;
white-space: none;
  margin-right: 10px;
  margin-left: 10px;
}


        </style><meta http-equiv="X-UA-Compatible" content="IE-7" /><script 

type="text/javascript">  var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-

21134926-1']);  _gaq.push(['_trackPageview']);  (function() {    var ga = 

document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + 

'.google-analytics.com/ga.js';    var s = document.getElementsByTagName('script')[0]; 

s.parentNode.insertBefore(ga, s);  })();</script><link 

href="App_Themes/3Column/3Column.css" type="text/css" rel="stylesheet" /><style 

type="text/css">	.ctl00_ctl00_menubar_Menu1_0 { background-

color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }	

.ctl00_ctl00_menubar_Menu1_1 { text-decoration:none; }	.ctl00_ctl00_menubar_Menu1_2 

{ width:362px; }	.ctl00_ctl00_menubar_Menu1_3 { border-style:none; }	

.ctl00_ctl00_menubar_Menu1_4 {  }	.ctl00_ctl00_menubar_Menu1_5 { border-

style:none; }	.ctl00_ctl00_menubar_Menu1_6 {  }	.ctl00_ctl00_menubar_Menu1_7 

{ border-style:none; }	.ctl00_ctl00_menubar_Menu1_8 {  }</style></head><body 

id="body" style="color: #C0C0C0">  <form name="aspnetForm" method="post" 

action="Business-IT-Computer-Support.aspx" id="aspnetForm"><div><input type="hidden" 

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

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

name="__VIEWSTATE" id="__VIEWSTATE" 

value="/wEPDwUJNzQwNDQ2NTczD2QWAmYPZBYCZg9kFgICAw9kFgICAw9kFgICAQ88KwANAgAPFgIeC18hRG

F0YUJvdW5kZ2QMFCsABwUXMDowLDA6MSwwOjIsMDozLDA6NCwwOjUUKwACFhAeBFRleHQFDkhvbWUgU29sdXR

pb25zHgVWYWx1ZQUOSG9tZSBTb2x1dGlvbnMeC05hdmlnYXRlVXJsBSwvQmVhdWZvcnQgLU5ldy9Ib21lLUlU

LUNvbXB1dGVyLXN1cHBvcnQuYXNweB4HVG9vbFRpcAUZSXQgU3VwcG9ydCBmb3IgSG9tZSBVc2Vycx4HRW5hY

mxlZGceClNlbGVjdGFibGVnHghEYXRhUGF0aAUsL2JlYXVmb3J0IC1uZXcvaG9tZS1pdC1jb21wdXRlci1zdX

Bwb3J0LmFzcHgeCURhdGFCb3VuZGdkFCsAAhYSHwIFCEJ1c2luZXNzHwhnHghTZWxlY3RlZGcfAQUIQnVzaW5

lc3MfAwUwL0JlYXVmb3J0IC1OZXcvQnVzaW5lc3MtSVQtQ29tcHV0ZXItc3VwcG9ydC5hc3B4HwVnHwZnHwQF

HEJ1c2luZXNzIElUIFN1cHBvcnQgU2VydmljZXMfBwUwL2JlYXVmb3J0IC1uZXcvYnVzaW5lc3MtaXQtY29tc

HV0ZXItc3VwcG9ydC5hc3B4ZBQrAAIWEB8BBQlBbnRpVmlydXMfAgUJQW50aVZpcnVzHwMFJi9CZWF1Zm9ydC

AtTmV3L0FudGlWaXJ1cy1CdXNpbmVzcy5hc3B4HwQFKUFudGkgVmlydXMgIFNvbHV0aW9ucyBmb3IgSG9tZSB

hbmQgT2ZmaWNlHwVnHwZnHwcFJi9iZWF1Zm9ydCAtbmV3L2FudGl2aXJ1cy1idXNpbmVzcy5hc3B4HwhnZBQr

AAIWEB8BBQZCYWNrdXAfAgUGQmFja3VwHwMFMC9CZWF1Zm9ydCAtTmV3L0JhY2t1cC1hbmQtRGlzYXN0ZXItU

mVjb3ZlcnkuYXNweB8EBRxCYWNrdXAgYW5kIGRpc2FzdGVyIHJlY292ZXJ5HwVnHwZnHwcFMC9iZWF1Zm9ydC

AtbmV3L2JhY2t1cC1hbmQtZGlzYXN0ZXItcmVjb3ZlcnkuYXNweB8IZ2QUKwACFhAfAQUKVm9pcA0KVm9pcB8

CBQpWb2lwDQpWb2lwHwMFGC9CZWF1Zm9ydCAtTmV3L3ZvaXAuYXNweB8EBQ9Wb2lwIFRlbGVwaG9uZXMfBWcf

BmcfBwUYL2JlYXVmb3J0IC1uZXcvdm9pcC5hc3B4HwhnZBQrAAIWEB8BBQpDb250YWN0IFVzHwIFCkNvbnRhY

3QgVXMfAwUbL0JlYXVmb3J0IC1OZXcvQ29udGFjdC5hc3B4HwQFB0NvbnRhY3QfBWcfBmcfBwUbL2JlYXVmb3

J0IC1uZXcvY29udGFjdC5hc3B4HwhnZGQYAQUZY3RsMDAkY3RsMDAkbWVudWJhciRNZW51MQ8PZAUIQnVzaW5

lc3NkcaIhmxyg/MXPeaaftsJV18dGOIo=" /></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="/Beaufort -

New/WebResource.axd?d=p-

eJ61uIaIRd_jGZPxHHLN0YVkt3AZwQ_WyA_Xmg71e74en4SrjPaqjeweFEVQiWIf29b17EZvnU7lnvoTOvwOa

S2mw1&amp;t=634210400612724343" type="text/javascript"></script><script 

src="/Beaufort -New/WebResource.axd?d=S5QGEjnyNH7bt4AzOFhLovslvsobJ3CX-GD4iv-Qk046-

3az6s896ILJXH8zp6Lj_8YHqv3eyp5xSs1LfMxApAVZYRA1&amp;t=634210400612724343" 

type="text/javascript"></script>    <div id="pagecontainer">       <div id="banner">  

                          <div id="leftbanner">             <img style="height:199px" 

alt="Beaufort Networks Logo" src="../images/BusinessIn.jpg" align="right" />          

   </div>             <!--- <div id="centrebanner">             </div>--->            

 <div id="Rightbanner">             <a style="color:#ffffff"  

href="~/default.aspx"><img  style="height:199px" alt="Beaufort Networks Logo" 

src="~/images/SignatureLogosEtc/beaufort_logoNEW.jpg" align="right" /> </a>           

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

href="#ctl00_ctl00_menubar_Menu1_SkipLink"><img alt="Skip Navigation Links" 

src="/Beaufort%20-New/WebResource.axd?

d=_qqKDdcTlRTq0Hum11VNmFcHcJeKd1fE5uRZR3E8yDCJ7MQck_XNI75jre-s3sjg71U_q6X_-

dLXMEKjrY4j_ujcgRA1&amp;t=634210400612724343" width="0" height="0" style="border-

width:0px;" /></a><table id="ctl00_ctl00_menubar_Menu1" 

class="ctl00_ctl00_menubar_Menu1_2" align="center" cellpadding="0" cellspacing="0" 

border="0">	<tr>		<td onmouseover="Menu_HoverStatic(this)" 

onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="It Support for Home 

Users" id="ctl00_ctl00_menubar_Menu1n0"><table class="StaticMenuItemStyle 

ctl00_ctl00_menubar_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">	

		<tr>				<td><a 

class="ctl00_ctl00_menubar_Menu1_1 StaticMenuItemStyle ctl00_ctl00_menubar_Menu1_3" 

href="/Beaufort%20-New/Home-IT-Computer-support.aspx" style="border-style:none;font-

size:1em;">Home Solutions</a></td>			</tr>		

</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" 

onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Business IT Support 

Services" id="ctl00_ctl00_menubar_Menu1n1"><table class="StaticMenuItemStyle 

ctl00_ctl00_menubar_Menu1_4 StaticSelectedStyle ctl00_ctl00_menubar_Menu1_6" 

cellpadding="0" cellspacing="0" border="0" width="100%">			<tr>	

			<td><a class="ctl00_ctl00_menubar_Menu1_1 StaticMenuItemStyle 

ctl00_ctl00_menubar_Menu1_3 StaticSelectedStyle ctl00_ctl00_menubar_Menu1_5" 

href="/Beaufort%20-New/Business-IT-Computer-support.aspx" style="border-

style:none;font-size:1em;">Business</a></td>			</tr>		

</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" 

onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Anti Virus  

Solutions for Home and Office" id="ctl00_ctl00_menubar_Menu1n2"><table 

class="StaticMenuItemStyle ctl00_ctl00_menubar_Menu1_4" cellpadding="0" 

cellspacing="0" border="0" width="100%">			<tr>			

	<td><a class="ctl00_ctl00_menubar_Menu1_1 StaticMenuItemStyle 

ctl00_ctl00_menubar_Menu1_3" href="/Beaufort%20-New/AntiVirus-Business.aspx" 

style="border-style:none;font-size:1em;">AntiVirus</a></td>			</tr>	

	</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic

(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Backup and 

disaster recovery" id="ctl00_ctl00_menubar_Menu1n3"><table class="StaticMenuItemStyle 

ctl00_ctl00_menubar_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">	

		<tr>				<td><a 

class="ctl00_ctl00_menubar_Menu1_1 StaticMenuItemStyle ctl00_ctl00_menubar_Menu1_3" 

href="/Beaufort%20-New/Backup-and-Disaster-Recovery.aspx" style="border-

style:none;font-size:1em;">Backup</a></td>			</tr>		

</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" 

onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Voip Telephones" 

id="ctl00_ctl00_menubar_Menu1n4"><table class="StaticMenuItemStyle 

ctl00_ctl00_menubar_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">	

		<tr>				<td><a 

class="ctl00_ctl00_menubar_Menu1_1 StaticMenuItemStyle ctl00_ctl00_menubar_Menu1_3" 

href="/Beaufort%20-New/voip.aspx" style="border-style:none;font-

size:1em;">VoipVoip</a></td>			</tr>		</table></td><td 

style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" 

onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Contact" 

id="ctl00_ctl00_menubar_Menu1n5"><table class="StaticMenuItemStyle 

ctl00_ctl00_menubar_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">	

		<tr>				<td><a 

class="ctl00_ctl00_menubar_Menu1_1 StaticMenuItemStyle ctl00_ctl00_menubar_Menu1_3" 

href="/Beaufort%20-New/Contact.aspx" style="border-style:none;font-size:1em;">Contact 

Us</a></td>			</tr>		</table></td>	</tr></table><a 

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

id="leftsidebar" >            <p>   <br />  </p>  <p>  </p>  <p>  </p>  

<h6>Partners:</h6><br />  <a href="AntiVirus-Business.aspx"><img 

id="ctl00_ctl00_LeftColumnMaster1_LeftColumn_Image1" class="leftsidebar" 

src="Images/Kaspersky/toplogo.jpg" style="width:100px;border-width:0px;" /></a>    <p 

style="text-align:center">Business Antivirus Solutions</p>   <img alt="" 

style="height:50px" src="Images/WhiteSpace.jpg" />   <a href="Backup-and-Disaster-

Recovery.aspx"><img id="ctl00_ctl00_LeftColumnMaster1_LeftColumn_Image2" 

class="leftsidebar" src="Images/StorageCraft/StCr_SP_small.jpg" 

style="width:100px;border-width:0px;" /></a>  <p style="text-align:center">Desktop 

and server backup</p>  <img alt="" style="height:50px" src="Images/WhiteSpace.jpg" /> 

 <a href="http://www.eclipse.net.uk/index.cfm?

id=referrerredirect&type=order&referrercode=BEAUFORTNW" target="_top">  <img 

alt="Eclipse 

Logo"src="https://www.eclipse.net.uk/images/eclipse/cobrand_logo_120x60.gif"  

width="120" height="60" border="0" /></a>  <p style="text-align:center">Broadband and 

Hosted Solutions</p>                  </div>              <div id="maincontent" >     

             <div id="maincontent">  <h1>    Whenever you need IT...</h1>   <p>PC 

failure? Lost vital customer emails? Need IT you can rely on?  IT problems can be 

expensive,    time wasting and very frustrating!</p>    <p>Beaufort Networks provides 

you with the services of an IT manager for one hour a       month or one day a week â 

whatever you need, whether you have a single laptop or       100 PCs.</p>    <p>When 

your IT runs smoothly your business is in much better shape. You can work       more 

effectively, thereâs less downtime and you can concentrate on making money.</p>    

<p><b>Fit for business:           </b>weâll help you choose and set up all you need 

for email, backup, disaster       recovery and general office requirements â for 

security and efficiency.</p>    <p><b>Prevention:     </b>weâll monitor your network 

so you donât get nasty surprises, sorting out       problems before they happen â for 

your peace of mind.</p>    <p><b>Crashes:</b>    weâll be there quickly if something 

goes wrong, so you can be back in action as       soon as possible â because we know 

time is money. </p>    <p><b>And more:</b>    want to integrate your iPhone or 

Blackberry? Need to hook up an additional office?     Our expert guidance and market 

know-how will find the cost-effective solution that suits your business best.</p>    

<p>Talk to us today and hand all your IT worries over to your own part-time IT 

manager â     so you can get on with growing your business </p>     </div>      

</div>      <div id="rightsidebar">                <img alt="" height="20px" 

src="./App_Themes/3Column/Images/WhiteSpace.jpg" />  <blockquote>âBeaufort Networks 

provide an extremely reliable, professional and competent service. They're there when 

they say they will be and correct any software issues in a methodical, patient and 

timely manner. They provide cost effective solutions and advice and offer remote or 

face to face support.â </blockquote><blockquote>  Lisa Lye : Training and Development 

Consultant</blockquote>      </div>    </div>               <div id="Bottombanner">   

   <a style="color: #C0C0C0" href="./admin/logon.aspx">Admin Logon</a>      </div>    

          <div id="footer">        <p>Website design and maintenance by <a 

target="_blank" href="http://www.beaufortnetworks.com">Beaufort Networks Ltd</a></p>  

    </div>  <script type="text/javascript">//<![CDATA[var 

ctl00_ctl00_menubar_Menu1_Data = new Object

();ctl00_ctl00_menubar_Menu1_Data.disappearAfter = 

500;ctl00_ctl00_menubar_Menu1_Data.horizontalOffset = 

0;ctl00_ctl00_menubar_Menu1_Data.verticalOffset = 

0;ctl00_ctl00_menubar_Menu1_Data.staticHoverClass = 'ctl00_ctl00_menubar_Menu1_8 

StaticHoverStyle';ctl00_ctl00_menubar_Menu1_Data.staticHoverHyperLinkClass = 

'ctl00_ctl00_menubar_Menu1_7 StaticHoverStyle';//]]></script></form></body></html>

Imar · April 14th, 2011, 07:49 AM

Try adding:

margin: auto;

to the menu item. If I add it as an in-line style using the IE Developer toolbar that seems to fix the problem. Not sure if it causes other issues when you add it to StaticMenuItemStyle.

Cheers,

Imar