Menu control - width and valign

Discussion in 'ASP .Net Web Controls' started by Leslie, Oct 3, 2007.

  1. Leslie

    Leslie Guest

    I have a customer that is very concerned with having all web sites present
    standards compliant html. When using the Menu control I have found a couple
    of problems regarding the width and the valign attributes.

    When I specify a StaticMenuStyle.Width of 188 the resulting html is
    generated with two width attributes as in:
    <table border="0" cellpadding="0" cellspacing="0" width="100%" width="188">

    When I build a menu item that references an ImageUrl the resulting html is
    generated with the valign attribute as in:
    <img src="spacer.gif" alt="" valign="middle" />
    My understanding is that the valign attribute is not valid for the img
    element.

    Is there a way I can remove these two problem cases via my code or is it
    something that cannot be fixed for now? I am using Visual Studio 2005 with
    the .NETFramework 2.0.

    The source page used to generate these problems is included below.

    Thanks,

    Leslie

    <%@ Page Language="C#" %>

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

    <script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
    MenuItem miHeader = null;
    MenuItem mi;
    mi = new MenuItem("", "", "spacer.gif", "");
    mi.Selectable = false;
    mnuSpacer.Visible = true;
    mnuSpacer.Items.Add(mi);

    mi = new MenuItem("First Section", "", "", "");
    mi.Selectable = false;
    miHeader = mi;
    mnuLinks.Visible = true;
    mnuLinks.Items.Add(mi);
    mi = new MenuItem("Microsoft", "", "", "http://www.microsoft.com");
    mi.Selectable = true;
    miHeader.ChildItems.Add(mi);
    mnuLinks.StaticDisplayLevels = 2;

    } // protected void Page_Load(object sender, EventArgs e)

    </script>

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>Untitled Page</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <asp:menu id="mnuSpacer" runat="server">
    </asp:menu>
    <br />
    <br />
    <asp:menu id="mnuLinks" runat="server">
    <staticmenustyle width="188px" />
    </asp:menu>

    </div>
    </form>
    </body>
    </html>
     
    Leslie, Oct 3, 2007
    #1
    1. Advertising

  2. Hi Leslie,

    From your description, you're using the ASP.NET 2.0 Menu control and meet
    some html rendering issue, correct?

    According to the two problems you mentioned, I have performed tests (via
    the code you provided) and here is what I found:

    it seems the problem maybe specific to environment. In my test
    enviornment(windows XP pro sp2 with VS 2005 SP1 and IE7), the menu content
    will displayed without those unexpected elements/attributes you mentioned.
    For example, for the image, it won't add "valign" attribute, but use the
    "vertical-align" style attributes as below:

    =========
    <img src="spacer.gif" alt=""
    style="border-style:none;vertical-align:middle;" />
    ===========

    Also, for width, I didn't find the following like html fragment:

    <table border="0" cellpadding="0" cellspacing="0" width="100%" width="188">

    in my test page, it won't render out additionl "width" attribute, only the
    "100%" exists. Therefore, I also suggest you try some other test
    environment(such as browser ...) to see whether it behaves different.

    BTW, for ASP.NET 2.0 navigation control, the dev team provides an
    additional CSS friendtly adapter which can help you make the navigation
    controls(such as menu, treeview) be rendered with some more brower
    compatible and CSS compatible html elements:

    #CSS Control Adapter Toolkit for ASP.NET 2.0
    http://weblogs.asp.net/scottgu/archive/2006/05/02/CSS-Control-Adapter-Toolki
    t-for-ASP.NET-2.0-.aspx

    You can also have a look to see whether it helps.

    Sincerely,

    Steven Cheng

    Microsoft MSDN Online Support Lead


    This posting is provided "AS IS" with no warranties, and confers no rights.

    --------------------

    >From: =?Utf-8?B?TGVzbGll?= <>
    >Subject: Menu control - width and valign
    >Date: Wed, 3 Oct 2007 13:31:02 -0700


    >
    >I have a customer that is very concerned with having all web sites present
    >standards compliant html. When using the Menu control I have found a

    couple
    >of problems regarding the width and the valign attributes.
    >
    >When I specify a StaticMenuStyle.Width of 188 the resulting html is
    >generated with two width attributes as in:
    ><table border="0" cellpadding="0" cellspacing="0" width="100%" width="188">
    >
    >When I build a menu item that references an ImageUrl the resulting html is
    >generated with the valign attribute as in:
    ><img src="spacer.gif" alt="" valign="middle" />
    >My understanding is that the valign attribute is not valid for the img
    >element.
    >
    >Is there a way I can remove these two problem cases via my code or is it
    >something that cannot be fixed for now? I am using Visual Studio 2005 with
    >the .NETFramework 2.0.
    >
    >The source page used to generate these problems is included below.
    >
    >Thanks,
    >
    >Leslie
    >
    ><%@ Page Language="C#" %>
    >
    ><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    >"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    >
    ><script runat="server">
    > protected void Page_Load(object sender, EventArgs e)
    > {
    > MenuItem miHeader = null;
    > MenuItem mi;
    > mi = new MenuItem("", "", "spacer.gif", "");
    > mi.Selectable = false;
    > mnuSpacer.Visible = true;
    > mnuSpacer.Items.Add(mi);
    >
    > mi = new MenuItem("First Section", "", "", "");
    > mi.Selectable = false;
    > miHeader = mi;
    > mnuLinks.Visible = true;
    > mnuLinks.Items.Add(mi);
    > mi = new MenuItem("Microsoft", "", "", "http://www.microsoft.com");
    > mi.Selectable = true;
    > miHeader.ChildItems.Add(mi);
    > mnuLinks.StaticDisplayLevels = 2;
    >
    > } // protected void Page_Load(object sender, EventArgs e)
    >
    ></script>
    >
    ><html xmlns="http://www.w3.org/1999/xhtml" >
    ><head runat="server">
    > <title>Untitled Page</title>
    ></head>
    ><body>
    > <form id="form1" runat="server">
    > <div>
    > <asp:menu id="mnuSpacer" runat="server">
    > </asp:menu>
    > <br />
    > <br />
    > <asp:menu id="mnuLinks" runat="server">
    > <staticmenustyle width="188px" />
    > </asp:menu>
    >
    > </div>
    > </form>
    ></body>
    ></html>
    >
    >
     
    Steven Cheng[MSFT], Oct 4, 2007
    #2
    1. Advertising

  3. Leslie

    Leslie Guest

    Steven,

    Thanks for checking out the details. I had been using a product called CSE
    HTML Validator to check the HTML. When I checked the html that was sent to IE
    I received the same results you received. In addition, I found out how to
    configure the CSE tool to identify itself as other browsers. Once that was
    done the Validator tool receives html that is similar to the html that IE
    receives.

    Leslie

    "Steven Cheng[MSFT]" wrote:

    > Hi Leslie,
    >
    > From your description, you're using the ASP.NET 2.0 Menu control and meet
    > some html rendering issue, correct?
    >
    > According to the two problems you mentioned, I have performed tests (via
    > the code you provided) and here is what I found:
    >
    > it seems the problem maybe specific to environment. In my test
    > enviornment(windows XP pro sp2 with VS 2005 SP1 and IE7), the menu content
    > will displayed without those unexpected elements/attributes you mentioned.
    > For example, for the image, it won't add "valign" attribute, but use the
    > "vertical-align" style attributes as below:
    >
    > =========
    > <img src="spacer.gif" alt=""
    > style="border-style:none;vertical-align:middle;" />
    > ===========
    >
    > Also, for width, I didn't find the following like html fragment:
    >
    > <table border="0" cellpadding="0" cellspacing="0" width="100%" width="188">
    >
    > in my test page, it won't render out additionl "width" attribute, only the
    > "100%" exists. Therefore, I also suggest you try some other test
    > environment(such as browser ...) to see whether it behaves different.
    >
    > BTW, for ASP.NET 2.0 navigation control, the dev team provides an
    > additional CSS friendtly adapter which can help you make the navigation
    > controls(such as menu, treeview) be rendered with some more brower
    > compatible and CSS compatible html elements:
    >
    > #CSS Control Adapter Toolkit for ASP.NET 2.0
    > http://weblogs.asp.net/scottgu/archive/2006/05/02/CSS-Control-Adapter-Toolki
    > t-for-ASP.NET-2.0-.aspx
    >
    > You can also have a look to see whether it helps.
    >
    > Sincerely,
    >
    > Steven Cheng
    >
    > Microsoft MSDN Online Support Lead
    >
    >
    > This posting is provided "AS IS" with no warranties, and confers no rights.
    >
    > --------------------
    >
    > >From: =?Utf-8?B?TGVzbGll?= <>
    > >Subject: Menu control - width and valign
    > >Date: Wed, 3 Oct 2007 13:31:02 -0700

    >
    > >
    > >I have a customer that is very concerned with having all web sites present
    > >standards compliant html. When using the Menu control I have found a

    > couple
    > >of problems regarding the width and the valign attributes.
    > >
    > >When I specify a StaticMenuStyle.Width of 188 the resulting html is
    > >generated with two width attributes as in:
    > ><table border="0" cellpadding="0" cellspacing="0" width="100%" width="188">
    > >
    > >When I build a menu item that references an ImageUrl the resulting html is
    > >generated with the valign attribute as in:
    > ><img src="spacer.gif" alt="" valign="middle" />
    > >My understanding is that the valign attribute is not valid for the img
    > >element.
    > >
    > >Is there a way I can remove these two problem cases via my code or is it
    > >something that cannot be fixed for now? I am using Visual Studio 2005 with
    > >the .NETFramework 2.0.
    > >
    > >The source page used to generate these problems is included below.
    > >
    > >Thanks,
    > >
    > >Leslie
    > >
    > ><%@ Page Language="C#" %>
    > >
    > ><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > >"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > >
    > ><script runat="server">
    > > protected void Page_Load(object sender, EventArgs e)
    > > {
    > > MenuItem miHeader = null;
    > > MenuItem mi;
    > > mi = new MenuItem("", "", "spacer.gif", "");
    > > mi.Selectable = false;
    > > mnuSpacer.Visible = true;
    > > mnuSpacer.Items.Add(mi);
    > >
    > > mi = new MenuItem("First Section", "", "", "");
    > > mi.Selectable = false;
    > > miHeader = mi;
    > > mnuLinks.Visible = true;
    > > mnuLinks.Items.Add(mi);
    > > mi = new MenuItem("Microsoft", "", "", "http://www.microsoft.com");
    > > mi.Selectable = true;
    > > miHeader.ChildItems.Add(mi);
    > > mnuLinks.StaticDisplayLevels = 2;
    > >
    > > } // protected void Page_Load(object sender, EventArgs e)
    > >
    > ></script>
    > >
    > ><html xmlns="http://www.w3.org/1999/xhtml" >
    > ><head runat="server">
    > > <title>Untitled Page</title>
    > ></head>
    > ><body>
    > > <form id="form1" runat="server">
    > > <div>
    > > <asp:menu id="mnuSpacer" runat="server">
    > > </asp:menu>
    > > <br />
    > > <br />
    > > <asp:menu id="mnuLinks" runat="server">
    > > <staticmenustyle width="188px" />
    > > </asp:menu>
    > >
    > > </div>
    > > </form>
    > ></body>
    > ></html>
    > >
    > >

    >
    >
     
    Leslie, Oct 4, 2007
    #3
  4. Thanks for your reply Leslie,

    Glad that you've found out it. BTW, I also haven't expected that you're
    using a validator tool to simulate the browser:)

    Sincerely,

    Steven Cheng

    Microsoft MSDN Online Support Lead


    This posting is provided "AS IS" with no warranties, and confers no rights.
    --------------------

    >References: <>

    <>
    >Subject: RE: Menu control - width and valign
    >Date: Thu, 4 Oct 2007 12:18:00 -0700


    >
    >Steven,
    >
    >Thanks for checking out the details. I had been using a product called CSE
    >HTML Validator to check the HTML. When I checked the html that was sent to

    IE
    >I received the same results you received. In addition, I found out how to
    >configure the CSE tool to identify itself as other browsers. Once that was
    >done the Validator tool receives html that is similar to the html that IE
    >receives.
    >
    >Leslie
    >
    >"Steven Cheng[MSFT]" wrote:
    >
    >> Hi Leslie,
    >>
    >> From your description, you're using the ASP.NET 2.0 Menu control and

    meet
    >> some html rendering issue, correct?
    >>
    >> According to the two problems you mentioned, I have performed tests (via
    >> the code you provided) and here is what I found:
    >>
    >> it seems the problem maybe specific to environment. In my test
    >> enviornment(windows XP pro sp2 with VS 2005 SP1 and IE7), the menu

    content
    >> will displayed without those unexpected elements/attributes you

    mentioned.
    >> For example, for the image, it won't add "valign" attribute, but use the
    >> "vertical-align" style attributes as below:
    >>
    >> =========
    >> <img src="spacer.gif" alt=""
    >> style="border-style:none;vertical-align:middle;" />
    >> ===========
    >>
    >> Also, for width, I didn't find the following like html fragment:
    >>
    >> <table border="0" cellpadding="0" cellspacing="0" width="100%"

    width="188">
    >>
    >> in my test page, it won't render out additionl "width" attribute, only

    the
    >> "100%" exists. Therefore, I also suggest you try some other test
    >> environment(such as browser ...) to see whether it behaves different.
    >>
    >> BTW, for ASP.NET 2.0 navigation control, the dev team provides an
    >> additional CSS friendtly adapter which can help you make the navigation
    >> controls(such as menu, treeview) be rendered with some more brower
    >> compatible and CSS compatible html elements:
    >>
    >> #CSS Control Adapter Toolkit for ASP.NET 2.0
    >>

    http://weblogs.asp.net/scottgu/archive/2006/05/02/CSS-Control-Adapter-Toolki
    >> t-for-ASP.NET-2.0-.aspx
    >>
    >> You can also have a look to see whether it helps.
    >>
    >> Sincerely,
    >>
    >> Steven Cheng
    >>
    >> Microsoft MSDN Online Support Lead
    >>
    >>
    >> This posting is provided "AS IS" with no warranties, and confers no

    rights.
    >>
    >> --------------------
    >>
    >> >From: =?Utf-8?B?TGVzbGll?= <>
    >> >Subject: Menu control - width and valign
    >> >Date: Wed, 3 Oct 2007 13:31:02 -0700

    >>
    >> >
    >> >I have a customer that is very concerned with having all web sites

    present
    >> >standards compliant html. When using the Menu control I have found a

    >> couple
    >> >of problems regarding the width and the valign attributes.
    >> >
    >> >When I specify a StaticMenuStyle.Width of 188 the resulting html is
    >> >generated with two width attributes as in:
    >> ><table border="0" cellpadding="0" cellspacing="0" width="100%"

    width="188">
    >> >
    >> >When I build a menu item that references an ImageUrl the resulting html

    is
    >> >generated with the valign attribute as in:
    >> ><img src="spacer.gif" alt="" valign="middle" />
    >> >My understanding is that the valign attribute is not valid for the img
    >> >element.
    >> >
    >> >Is there a way I can remove these two problem cases via my code or is

    it
    >> >something that cannot be fixed for now? I am using Visual Studio 2005

    with
    >> >the .NETFramework 2.0.
    >> >
    >> >The source page used to generate these problems is included below.
    >> >
    >> >Thanks,
    >> >
    >> >Leslie
    >> >
    >> ><%@ Page Language="C#" %>
    >> >
    >> ><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    >> >"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    >> >
    >> ><script runat="server">
    >> > protected void Page_Load(object sender, EventArgs e)
    >> > {
    >> > MenuItem miHeader = null;
    >> > MenuItem mi;
    >> > mi = new MenuItem("", "", "spacer.gif", "");
    >> > mi.Selectable = false;
    >> > mnuSpacer.Visible = true;
    >> > mnuSpacer.Items.Add(mi);
    >> >
    >> > mi = new MenuItem("First Section", "", "", "");
    >> > mi.Selectable = false;
    >> > miHeader = mi;
    >> > mnuLinks.Visible = true;
    >> > mnuLinks.Items.Add(mi);
    >> > mi = new MenuItem("Microsoft", "", "", "http://www.microsoft.com");
    >> > mi.Selectable = true;
    >> > miHeader.ChildItems.Add(mi);
    >> > mnuLinks.StaticDisplayLevels = 2;
    >> >
    >> > } // protected void Page_Load(object sender, EventArgs e)
    >> >
    >> ></script>
    >> >
    >> ><html xmlns="http://www.w3.org/1999/xhtml" >
    >> ><head runat="server">
    >> > <title>Untitled Page</title>
    >> ></head>
    >> ><body>
    >> > <form id="form1" runat="server">
    >> > <div>
    >> > <asp:menu id="mnuSpacer" runat="server">
    >> > </asp:menu>
    >> > <br />
    >> > <br />
    >> > <asp:menu id="mnuLinks" runat="server">
    >> > <staticmenustyle width="188px" />
    >> > </asp:menu>
    >> >
    >> > </div>
    >> > </form>
    >> ></body>
    >> ></html>
    >> >
    >> >

    >>
    >>

    >
     
    Steven Cheng[MSFT], Oct 5, 2007
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Cezar

    valign in DataGrid Column

    Cezar, Dec 2, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    999
    g pavlov
    Dec 3, 2003
  2. AndrewF
    Replies:
    1
    Views:
    838
    Bruce Barker
    Oct 10, 2005
  3. Replies:
    0
    Views:
    428
  4. legacy

    valign text and image

    legacy, Mar 26, 2008, in forum: HTML and CSS
    Replies:
    0
    Views:
    484
    legacy
    Mar 26, 2008
  5. Hoa

    Horizontal menu with same width menu items

    Hoa, Aug 30, 2006, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    280
Loading...

Share This Page