tags:

views:

33

answers:

1

The title poses the question. Here's a scenario:

You're making a website with ASP.NET 4.0/C#, although xml alone is suitable for this example. The site will have a site map and a default page with a menu control, as follows:

Web.sitemap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/default.aspx" title="Home"  description="">
    <siteMapNode url="~/1.aspx" title="Link 1" description="" />
    <siteMapNode url="~/2.aspx" title="Link 2"  description="" />
    <siteMapNode url="~/3.aspx" title="Link 3"  description="" />
    <siteMapNode url="~/4.aspx" title="Link 4" description="" />
    <siteMapNode url="~/5.aspx" title="Link 5" description="" />
  </siteMapNode>
</siteMap>

Web.config

<?xml version="1.0"?>
  <configuration>
    <system.web>
      <compilation debug="true" targetFramework="4.0"/>
      <pages theme="Default" clientIDMode="AutoID">
      </pages>
    </system.web>
  </configuration>

Default.aspx
Note: Only the contents of the <form> element are shown.

<asp:Menu 
  ID="navMenu" 
  DataSourceID="srcSiteMap"
  StaticEnableDefaultPopOutImage="false"
  RenderingMode="list"
  CssClass="navMenu"
  runat="server"> 
</asp:Menu>
<asp:SiteMapDataSource ID="srcSiteMap" runat="server" 

ShowStartingNode="false" />

StyleSheet.css
_Note: This file is included in ~/App_Themes/Default/ and referenced in

Web.config._

body {
width:800px;
margin:0px auto;
}
.navMenu {
background-color:Yellow;
}


With these files in use, the asp.net 4.0 engine will proceed to render a column of broken links. What I am unable to explain is why this column is only the width of the widest link, instead of the width of the 800px body element. Even if width:auto; is specified for the .navMenu css class, this remains the case. However, if you specify width:100%; or width:800px;, this fixes the problem, whatever the problem may be.

Now, I am hardly a master of css or the asp.net rendering engine, but looking at the page's source, I simply can't find any explanation. Perhaps I'm overlooking the obvious, but in the name of science, I hope to discover the truth! Should someone find the time to create a new visual studio solution, or simply know off the top of his/her head, I'd appreciate it.

+1  A: 

Is this an issue within your .net creation program (e.g. Visual studio) or a browser? If it is not an issue in browser then it must be the program's own stylesheet

without seeing the html output this is a little tricky but I suspect you will have something like:

<html>
  <body>
    <form>
      <ul class="navMenu">
      </ul>
    </form>
  </body>
</html>

using firebug or something similar I would check to see what the highest item in the tier is with the small width. I suspect that the form element is somehow shrink wrapping (is it display:inline? floated?)

lnrbob
Almost on the money. The <ul> element for the Menu is contained in a div, as follows: <div class="navMenu"> <ul ...></ul> </div>I had never used Firebug before, but I downloaded it and started playing around. It appears some styles are being applied to particular elements. More specifically, it seems a javascript must be applying an element.style selector to all elements with the .navMenu ID, which includes varying properties, including float: left; That more or less answers my question, but as an addendum, do you know how to prevent this behavior?
Shaun
override the same styles in your style sheet. You will probably need to use the !important tag on your default values for them to override the embedded WebResource files for the NavMenu
TheGeekYouNeed
Thanks. This will help me keep the styles in the .css file, and while it isn't the most elegant solution, it is certainly probably the easiest. I appreciate your time.
Shaun