• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

What is causing my website's menu system to render funky?

Y

YoungGun21

Platinum Member
Two things are happening on the website I'm creating:

1. Menu is rendering about half an inch lower than it should be, even though Visual Studio shows it correctly in designer mode.

2. Menu text is rendering with wrong colors. Changing things in CSS style sheet does nothing. It should be white, and everything I can see says it should render white.

I am using VS 2010 Pro, and I have no prior experience with HTML/JavaScript/CSS.

Help?

Pics
2ynjrbm.jpg
 
Last edited:
YoungGun21 said:
1. Menu is rendering about half an inch lower than it should be, even though Visual Studio shows it correctly in designer mode.
Click to expand...

Hard to assess without some idea of what the markup looks like. WYSIWYG editors can produce... creative... things.

YoungGun21 said:
2. Menu text is rendering with wrong colors. Changing things in CSS style sheet does nothing. It should be white, and everything I can see says it should render white.
Click to expand...

The text is all links, and link-specific styles override "regular" text styles.

http://www.w3schools.com/css/css_link.asp
 
I went through my entire Site.css file and changed everything that was text/link related to white and nothing changed.
 
It's dirty..I know. The compare menu is cascading, so that added a lot.
Code: 
<&#37;@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication2.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        .menu
        {
            margin-left: 0px;
        }
    </style>
</head>
<body>
    <form runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    Don't. Stop. Working.
                </h1>
            </div>
            <div class="loginDisplay">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                        [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
        </div>
        <div class="main" style="position: relative; top: 109px; left: -3px;">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
            <div class="clear hideSkiplink" style="float: left; margin-bottom: 20px;">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" 
                    EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal" 
                    BackColor="#4B6C9E" DynamicHorizontalOffset="2" Font-Names="Verdana" 
                    Font-Size="Medium" ForeColor="#CCCCCC" StaticSubMenuIndent="10px" 
                    BorderColor="Silver" BorderStyle="Solid" BorderWidth="2px" Font-Bold="False" 
                    RenderingMode="Table" Height="16px" 
                    onmenuitemclick="NavigationMenu_MenuItemClick" Width="115px">
                    <DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
                    <DynamicMenuStyle BackColor="#B5C7DE" />
                    <DynamicSelectedStyle BackColor="#507CD1" />
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/News.aspx" Text="News"/>
                        <asp:MenuItem Text="Compare" Value="Compare" Selectable="False">
                            <asp:MenuItem Text="Hard Drives" Value="Hard Drives" 
                                NavigateUrl="~/HDDs/HDDLanding.aspx">
                                <asp:MenuItem NavigateUrl="~/HDDs/InternalHDD.aspx" Text="Internal" 
                                    Value="InternalHDD"></asp:MenuItem>
                                <asp:MenuItem Text="External" Value="ExternalHDD" 
                                    NavigateUrl="~/HDDs/ExternalHDD.aspx"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Memory" Value="Memory" NavigateUrl="~/Memory.aspx"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/Motherboards/MoboLanding.aspx" Text="Motherboards" 
                                Value="Motherboards">
                                <asp:MenuItem Text="AMD" Value="AMD" NavigateUrl="~/Motherboards/AMD.aspx"></asp:MenuItem>
                                <asp:MenuItem Text="Intel" Value="Intel" 
                                    NavigateUrl="~/Motherboards/Intel.aspx"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Power Supplies" Value="Power Supplies" 
                                NavigateUrl="~/PSU.aspx"></asp:MenuItem>
                            <asp:MenuItem Text="Processors" Value="Processors" 
                                NavigateUrl="~/CPUs/CPULanding.aspx">
                                <asp:MenuItem Text="Desktop" Value="Desktop" NavigateUrl="~/CPUs/Desktop.aspx"></asp:MenuItem>
                                <asp:MenuItem Text="Server" Value="Server" NavigateUrl="~/CPUs/Server.aspx"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Solid State Disks" Value="Solid State Disks" 
                                NavigateUrl="~/SSDs/SSDLanding.aspx">
                                <asp:MenuItem NavigateUrl="~/SSDs/InternalSSD.aspx" Text="Internal" 
                                    Value="InternalSSD"></asp:MenuItem>
                                <asp:MenuItem Text="External" Value="ExternalSSD" 
                                    NavigateUrl="~/SSDs/ExternalSSD.aspx"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Video Cards" Value="Video Cards" NavigateUrl="~/GPU.aspx"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                        
                    </Items>
                    <StaticHoverStyle BackColor="White" ForeColor="White" />
                    <StaticMenuItemStyle HorizontalPadding="5px" BackColor="#4B6C9E" 
                        BorderColor="#CCCCCC" BorderStyle="Inset" BorderWidth="1px" ForeColor="White" 
                        ItemSpacing="3px" Width="80px" />
                    <StaticMenuStyle Width="80px" />
                    <StaticSelectedStyle BackColor="#339933" />
                </asp:Menu>
            </div>
    </div>
    <div class="footer">
        
        This is Copywrited (C), Trademarked (TM), and Patented as of 2011. Mmkay?
        <br />
        <br />
        </div>
    </form>
</body>
</html>
 
View the page in Google Chrome, hit F-12, and in the developer tools panel explore the styles that are applied to those elements. and where the style rules come from.
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top