Changing master page's menu

Question

I discovered that the existing menu in a web app I'm working on has an issue in Chrome, where the "Logged in as" section would jump off the menu bar down below. After looking through the code, I'm trying to rewrite it a bit so that it works more consistently.

<div style="z-index: 22000; height: 25px; position: fixed; left: 0; top: 0; width: 100%;
 min-width: 960px;" class="HideMenuFromPrint">
 <table style="width: 100%; height: 100%; font-family: Arial; font-size: small;" cellpadding="0"
 cellspacing="0">
 <tr>
 <td style="width: 140px; height: 30px; background-color: #FFF; border-bottom-style: solid;
 border-bottom-width: thin; border-bottom-color: #bbb99d;">
 <asp:Image ID="SiteLogoHeader" runat="server" CssClass="HeaderImagePaddingLeft" />
 </td>
 <td style="background-color: #FFF;">
 <asp:Panel ID="pnlHeading" runat="server" Width="100%" Font-Size="Medium">
 <table style="width: 100%; vertical-align: top;" cellpadding="0" cellspacing="0">
 <tr>
 <td align="left">
 <telerik:RadMenu ID="MasterPageMenu" runat="server" Height="20px" Style="top: 0px;
 left: 0px;" Width="100%" CssClass="RadMenuLevel" EnableRoundedCorners="True"
 OnItemDataBound="MasterPageMenu_ItemDataBound" OnClientItemClicking="onClicking"
 DataTextField="title" DataNavigateUrlField="url">
 <DefaultGroupSettings OffsetX="11" OffsetY="2" />
 </telerik:RadMenu>
 <div style="position: absolute; right: -3px; top: 4px; width: auto; z-index: 24999;
 font-size: 8pt;">
 <asp:Button runat="server" ID="LogoutButtonPrompt" Width="80" OnClick="LogoutButtonPrompt_Click"
 Text="" BackColor="Transparent" BorderColor="Transparent" CssClass="logOutBtnDefault" />
 <div style="float: left; margin-top: 8px; text-align: right; padding-right: 20px;">
 Logged In As:
 <asp:HyperLink ID="hlChangePassword" runat="server" NavigateUrl="~/Membership/ChangePassword.aspx"
 Font-Underline="false" Target="_self">
 <asp:Label ID="Label1" runat="server"></asp:Label></asp:HyperLink>
 </div>
 </div>
 </td>
 </tr>
 <tr>
 <td>
 </td>
 </tr>
 </table>
 </asp:Panel>
 </td>
 </tr>
 </table>
</div>

Original CSS:

.HeaderImagePaddingLeft
{
 padding-left: 8px;
}
.RadMenuLevel
{
 z-index: 22000;
 background-image: url('../Images/Nav_Background.png');
}

This was after my changes:

 <div id="MainMenu" class="HideMenuFromPrint">
 <asp:Panel ID="pnlHeading" runat="server" Width="100%" Font-Size="8pt" Font-Names="Arial">
 <ul id="MenuList">
 <li style="display: block; float: left; padding-right: 25px; padding-left: 5px; background-color: #FFF;">
 <asp:Image ID="SiteLogoHeader" runat="server" /></li>
 <li style="display: inline; position: absolute; right: -3px; padding: 2px; vertical-align: middle;">
 Logged In As:
 <asp:HyperLink ID="hlChangePassword" runat="server" NavigateUrl="~/Membership/ChangePassword.aspx"
 Font-Underline="false" Target="_self">
 <asp:Label ID="Label1" runat="server"></asp:Label></asp:HyperLink>
 <asp:Button runat="server" ID="LogoutButtonPrompt" OnClick="LogoutButtonPrompt_Click"
 Text="" BackColor="Transparent" BorderColor="Transparent" CssClass="logOutBtnDefault" />
 </li>
 <li style="display: inline; float: none; vertical-align: bottom;">
 <telerik:RadMenu ID="MasterPageMenu" runat="server" EnableRoundedCorners="True" OnItemDataBound="MasterPageMenu_ItemDataBound"
 OnClientItemClicking="onClicking" DataTextField="title" DataNavigateUrlField="url"
 CssClass="RadMenuLevel" BorderStyle="None">
 <DefaultGroupSettings OffsetX="11" OffsetY="2" />
 </telerik:RadMenu>
 </li>
 </ul>
 </asp:Panel>
 </div>

With the CSS:

#MainMenu
{
 z-index: 22000;
 position: fixed;
 border-bottom-style: solid;
 min-width: 960px;
 display: block;
 background: transparent url('../Images/Nav_Background.png');
 border-bottom-width: thin;
 border-bottom-color: #bbb99d;
 width: 100%;
}
#MenuList
{
 float: left;
 list-style-type: none;
}

The results were more or less what I was wanting (which is to say, not significantly different from the original and didn't have the problem in Chrome). Below is what it looks like in Firefox, before and after.

Before change

After change

Answer 1

You've done a pretty good job but there is still a lot of room for improvement. Some notes:

• It doesn't really make sense to use <ul> and <li> for the logo, menu and logged in text. Ideally they should each be in <div>s so they are more semantically correct; using a <ul> carries with it additional semantic meaning that it contains a list of similar items.
• Try to leverage classes or ids to target different elements.
• For border use the shorthand: border: 1px solid #bbb99d;
• Make sure you include AlternateText for your logo so that screen readers can read the site/company name.
• Prefer CSS to WebForms styling like Width="100%" and Font-Underline="false".
• It's generally bad to use pt for font-size, it's more difficult to make your site look nicer across a wide range of devices. Prefer em or %.
• Text="" on your asp:Button concerns me for accessibility reasons, unless you're setting the text in your code behind?

I'll try my best to improve it but it may not be perfect as it's not a working example.

HTML

<div id="MainMenu" class="HideMenuFromPrint">
 <asp:Panel ID="pnlHeading" runat="server" CssClass="menu-panel">
 <div id="logo">
 <asp:Image ID="SiteLogoHeader" runat="server" AlternateText="Site name" />
 <div>
 <div id="login">
 Logged In As:
 <asp:HyperLink ID="hlChangePassword" runat="server" NavigateUrl="~/Membership/ChangePassword.aspx" 
 Target="_self">
 <asp:Label ID="Label1" runat="server"></asp:Label>
 </asp:HyperLink>
 <asp:Button runat="server" ID="LogoutButtonPrompt" OnClick="LogoutButtonPrompt_Click"
 Text="" CssClass="logOutBtnDefault" />
 </div>
 <div id="menu">
 <telerik:RadMenu ID="MasterPageMenu" runat="server" EnableRoundedCorners="True" 
 OnItemDataBound="MasterPageMenu_ItemDataBound" OnClientItemClicking="onClicking" 
 DataTextField="title" DataNavigateUrlField="url"
 CssClass="RadMenuLevel">
 <DefaultGroupSettings OffsetX="11" OffsetY="2" />
 </telerik:RadMenu>
 </div>
 </asp:Panel>
</div>

CSS

#MainMenu
{
 z-index: 22000;
 position: fixed;
 border: 1px solid #bbb99d;
 min-width: 960px;
 display: block;
 background: transparent url('../Images/Nav_Background.png');
 width: 100%;
}
.menu-panel {
 width:100%;
 font-size:.9em;
 font-family:arial;
}
#logo {
 display: block;
 float: left; 
 padding-right: 25px;
 padding-left: 5px;
 background-color: #FFF;
}
#login {
 display: inline;
 position: absolute;
 right: -3px;
 padding: 2px;
 vertical-align: middle;
}
#login a {
 text-decoration:none;
}
.logOutBtnDefault {
 border:0;
 background-color:transparent;
}
#menu {
 display: inline;
 float: none;
 vertical-align: bottom;
}
.RadMenuLevel {
 border:0;
}

• Jason Whitish: Thank you, I appreciate the suggestions. Until this particular assignment, it's been a long time since I've done any HTML markup, been trying to learn what's best practice as I go.