问题
I copied and pasted the same exact css and asp code into another project and the CSS just will not take to the asp:menu control and I cannot figure it out. Also, when I view source the menu is creating its own style block.
I made it easy to help, you can just copy and past full page code and CSS below. Help is much appreciated.
Here is the aspx page in full:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="testing.aspx.vb" Inherits="eCASVS2005.testing" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>
<!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 id="Head1" runat="server">
<title></title>
<%="" %>
<link href="eCASScripts/cssMasterPage.css" rel="stylesheet" type="text/css" />
<% If False Then%> <!-- fix for seeing css in design view and handling url after deployed -->
<link href="<%= Page.ResolveUrl("~/eCASScripts/cssMasterPage.css")%>" rel="stylesheet" type="text/css" />
<% End If%>
</head>
<body>
<form id="Form1" runat="server" enctype="multipart/form-data" method="post">
<div class="page">
<div class="header left">
<div class="title left">
<h1>
MLG Dispatch Manager
</h1>
</div>
<div class="left">
<asp:Menu ID="NavigationMenu"
runat="server"
CssClass="myMenu"
EnableViewState="false"
IncludeStyleBlock="false"
Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="" Text="Dispatch">
<asp:MenuItem NavigateUrl="~/Dispatch/NewDispatchEntry.aspx" Text="New Entry" />
<asp:MenuItem NavigateUrl="~/Dispatch/SearchDispatchEntries.aspx" Text="Find Existing" />
<asp:MenuItem NavigateUrl="~/Dispatch/ViewDispatchHistory.aspx" Text="View History" />
</asp:MenuItem>
<asp:MenuItem NavigateUrl="" Text="Maintenance">
<asp:MenuItem NavigateUrl="~/Maintenance/EditTrailers.aspx" Text="Edit Trailers" />
<asp:MenuItem NavigateUrl="~/Maintenance/EditCarriers.aspx" Text="Edit Carriers" />
<asp:MenuItem NavigateUrl="~/Maintenance/EditDrivers.aspx" Text="Edit Drivers" />
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/UnderConstruction.aspx" Text="Help"/>
</Items>
</asp:Menu>
</div>
<div id="loggedInText" class="loginDisplay right" runat="server">
logged in: [User Name]
</div>
</div>
</div>
</form>
</body>
</html>
and here is the CSS in full:
/* 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;
height:100%;
}
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;
}
table
{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
/* 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.5em;
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;
}
.state
{
width:116px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 1020px;
background-color: #fff;
margin: 40px auto 0px auto;
border: 1px solid #496077;
}
.widthFullPx
{
width: 900px;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 1.5em;
}
.main
{
padding: 0px 12px;
/*min-height:500%;*/
min-height:100%;
margin-right: 8px;
margin-top: 10px;
margin-bottom: 8px;
}
.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;
}
#headerSeparator
{
background-color:White;
width:1px;
height:35px;
margin:0px 0px 0px 10px;
}
/* TAB MENU
----------------------------------------------------------*/
div.myMenu > ul > li
{
display: inline-block;
list-style: none;
}
div.myMenu ul li ul
{
display: none;
}
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.myMenu
{
padding: 5px 0px 5px 40px;
}
div.myMenu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.myMenu ul li a, div.myMenu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.myMenu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.myMenu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
bolFieldSet
{
background-color:Fuchsia;
margin: 1em 0px 1 0;
padding: 0em;
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.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.hidden{display: none;}
.autowidth
{
width:auto;
}
.width100pct
{
width:100%;
}
.largetext
{
font-size:large;
}
.medtext
{
font-size:medium;
}
.clear
{
clear: both;
}
.center
{
text-align: center;
vertical-align:middle;
}
.left /* floats left */
{
float:left;
}
.right /* floats right */
{
float:right;
}
Like I said this same exact code is working in another project I cannot figure this one out. Same css version in each, 2.1. Thanks. -Taylor
回答1:
I found the issue thanks to some guidance from the users here. After inspecting the menu control element it was rendering as a <table> whereas every other project I have ever used this control on it rendered as a <div>
here is the link with someone else with same situation:
http://forums.asp.net/t/1613711.aspx
simple solution for me was to add the property RenderingMode="List" to my asp:menu and it fixed my issue.
thanks to all who helped.
来源：https://stackoverflow.com/questions/15574306/cssclass-is-not-working-for-my-asp-menu-all-code-attached