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.
Changing master page's menu
html;asp.net;css
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;}