css menu style not showing up on page load.

I'm having this problem that is driving me up a wall. I am trying to set up master pages. When I test the pages on my development server, they are showing up fine, but I transfered the pages onto the company webserver, the css menus are not working. They are showing up in the design view of Web Developer for the sub pages, but not the master page, but it is not showing up in the browser when the site is ran. The code for my master page is below.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!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>
    <style type ="text/css">
        /* DEFAULTS
----------------------------------------------------------*/

body   
{
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #034af3;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
    width: 1200px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.main
{
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}


/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu ul
{
    list-style:none;
    margin:0;
    padding:0;
    width:auto;
}

div.menu ul li
{
    padding-left: 8px;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    line-height: 2.8em;
    padding: 4px 20px;
    text-decoration: none;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.submitButton
{
    float: right;
    margin: 0px 10px 0px 0px;
}

input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 55%;
}

/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
}

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

    </style>
    
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    <link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    GIS Help Site Database Applications
                </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 class="clear hideSkiplink">
                  <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"   Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="LA_Submit.aspx" Text="Land Analysis Input"/>
                        <asp:MenuItem NavigateUrl="LA_Results.aspx" Text="Land Analysis Results"/>
                        <asp:MenuItem NavigateUrl="QC_Submit.aspx" Text="QC Submit Input" />
                        <asp:MenuItem NavigateUrl="QC_Results.aspx" Text="QC Results" />
                    </Items>
                </asp:Menu>
              </div>
            </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">
        
    </div>
    </form>
</body>
</html>

Open in new window

GravitaZ24Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Paul MacDonaldDirector, Information SystemsCommented:
So is none of the CSS working, or is it just the embedded CSS that's not working, or the linked CSS that's not working?
0
GravitaZ24Author Commented:
oh sorry, Just disregard the css link, I had just transferred the linked css code over to the master page because I was trying to figure out what was going wrong.

The only css that does not seem to work is the css for the menu.
0
IanThCommented:
yes I agree is the linked one not working

<link href="/Styles/Site.css" rel="stylesheet" type="text/css" />

should be

<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

GravitaZ24Author Commented:
if it helps a little more here are screenshots of what is happening.
menuworking.gif
menufail.gif
0
Paul MacDonaldDirector, Information SystemsCommented:
Since you have .menu tied to a div tag, how about changing
           <div class="clear hideSkiplink">
             ...
to
           <div class="clear hideSkiplink menu">
             ...

Alternately, you could try something like
           <div class="clear hideSkiplink">
             <div class="menu">
               ...
             </div>
           </div>
0
GravitaZ24Author Commented:
that didn't seem to help anything :/
0
Paul MacDonaldDirector, Information SystemsCommented:
Can you remove the linked CSS reference and see if that makes any difference?  This is puzzling...
0
LZ1Commented:
Do you have a live link for this page at all?  Or is it strictly in dev right now?
0
GravitaZ24Author Commented:
It's in dev, and It is on our company intranet unfortunately.
0
LZ1Commented:
If the linked CSS is the only one not working, try an absolute link.
 <link href="http://yourdomainname.local/Styles/site.css" rel="stylesheet" type="text/css" />
0
GravitaZ24Author Commented:
There is some confusion with the code I posted, I'm sorry. I deleted the css link completely and embedded the code into the master page, which is what I copied and pasted, and had the same problem. Most of the css is actually working, but the portion that is controlling the menu isn't.
0
LZ1Commented:
Is there any way to post a live link?  I'm afraid we may not be able to accurately track down the problem if we can't see it.
0
GravitaZ24Author Commented:
darn I'll try to figure something out but I don't think it'll be possible.
0
LZ1Commented:
The main reason we're asking is because of paths.  If the path isn't right we'll be able to see it right away.  If it's something else, we're also more prone to see it right off the bat.  
In the meantime, I'll take a look through the code and see what I can find.
0
Paul MacDonaldDirector, Information SystemsCommented:
ASP/IIS is pretty smart about pathing.  I don't think this is a pathing issue.  All the more so since the CSS the OP wants to use is embedded.
It looks like the embedded CSS - which is what you are trying to use - is being overridden somewhere.  My best guess is the linked CSS - which probably doesn't exist in your development environment but does in your live environment - is causing the problem.  I could be wrong.
0
LZ1Commented:
Try putting the linked CSS above the embedded CSS.  
0
GravitaZ24Author Commented:
I figured out what the problem was. The css was set up to style an ASP.NET 4.0 Menu control, while the webserver is using ASP.NET 3.5. The menu control is completely revamped for ASP.NET 4.0.

http://msdn.microsoft.com/en-us/magazine/ee819129.aspx


Man, that was bugging the hell out of me.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Paul MacDonaldDirector, Information SystemsCommented:
Hey, good one.  That might help me some day.  Thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.