I have created a vertical menu control on a master page with 2 static display levels that is pulling its data from a sitemap data source. Due to the formatting of the page I have restricted the width of the menu. This was done in CSS. To be more precise, the "sidemenu" exists within a "Sidebar" <div> that contains all of the objects in the sidebar, which includes news updates, links etc... The width of the menu is being limited by the width of the sidebar <div>.Some of the items of the second static display level, or the staticSubmenu have text that wraps (which I like), but the first letter in the second line of text is not aligning with the first letter in the first line of text. Below I will provide the relevant code from my .master page as well as my CSS file. Please let me know if any additional code snippits are required, and thank you in advance for any help. I have also included a screenshot to illustrate the undesired behavior.

Code from appmaster.master

<div id="sidebar">

<div id="sidemenu">

<asp:SiteMapDataSource runat="server" ID="SiteMapDS2" ShowStartingNode="true" />

</asp:Menu>

</div>

 ..... other items in sidebar

</div>

Code from CSS file, I have regurgitated some of it from the main menu which is displayed horizontally accross the top of the screen. Also, I was using the "Personal" design template available for download from Microsoft to utilize the "Jello Mold" design technique. So far I have had fun learning how it works, as well as modifying and manipulating it for my own needs.

margin-left:-3px; /*IE Win 3px gap fix*/

background-image:url(Images/sidebar_bg.png);

z-index:0;

background-color:#DEDEBC;

* html #sidemenu {margin-top:-1px;}

#sidemenu a {text-decoration:none;}

* html #sidemenu a {height: 1%;}

/* end hiding */

padding:0 10px;

padding:0 10px;

background-color:#DEDEBC;

Interestingly enough if I right align the text within the menu, I get a similar problem, notice in the screenshot how now the last letter in the first line is extended beyond all the other text.... I have also included the code from the CSS file, no other code has changed to date.

 Again, any help would be much appreciated.

position:relative;

color:#D3D3A7;

text-align:right;

Another interesting phenominon, while trying to work this out, I set the text indent to 15px, it would appear as though when the text wraps, it is immune to any and all formating via the CSS, notice in the screenshot how all of the text is indented further, but the text that wraps is not changed AT ALL.

position:relative;

color:#D3D3A7;

text-align:left;

text-indent only indents the first line of text in your element - what you are seeing is the correct behavior. What are you using to debug your CSS design? Have you tried using Firebug for Firefox? Firebug is the best Web Design / CSS / DOM debugger I have come across yet.

Are you using the overloaded Menu control from the ASP.NET 2.0 CSS Friendly Control Adapters 1.0 or are you using the standard ASP.NET Menu?

Thank you, I am looking into Firebug now. I am at a new  job and haven't even installed Firefox yet!!! So I will be doing that at the same time as well.....

Also thank you for the tip that this is the default behavior... but I get the problem, per my first post, with an indent of 0, so why is it going further left than all of the other text? It is good to know that this is the default behavior for indent, is there another property that I can set that will properly align all of the text on the LHS?

 I am currently using the standard .NET 2.0 Control, I will also look into the overloaded CSS Friendly Control Adapters.

 Additionally, I have rectified the problem my setting the text to allign centered, which is a work around that I decided on because I was too frustrated with it... nevertheless, I would like to get the formatting proper without "settling" on a workaround.

Once you install Firebug for Firefox you can click on the effected element and see how the CSS styles are computed in your web browser. At this point you should be able to make the appropriate changes to your Styles and get your alignment on the LHS correct.

I noticed a couple CSS hacks in your Style Sheets, you may want to consider building on the CSS provided from the Menu Control in the CSS Friendly Control Adapters. Then you could make the appropriate modifications. CSS hacks are generally not recommended and should be a last resort, often times we can use Conditional Comments in place of the hacks, this offers a nicer approach to targeting CSS to different browsers. 

Thanks for your help.

Using firebug I was able to isolate the problem to the part of the CSS where I specify the formatting for the "Normal" and "Selected' links, I had originally put in some padding on the left, which I suppose, like the indent property, was only applied to the fist line of text. After removing the padding the text is all aligned as I would like it. To achieve an overall "indent" I applied a margin to the menu control and now I get the desired look and feel.

 Also, the CSS hacks were given to me my Microsoft to achieve the fluid layout that I desired as well as providing cross platform functionality. According to Microsoft they are necessary to acieve the fluid layout in IE.

 Thank you again.