0
我有一个css错误，我似乎无法找到任何东西。我在一个asp网站上有这个问题。我有一个导航栏，我有一些样式（不太好介意你）。我的导航栏的样式也用于我在表单条目上执行的任何验证，但我不知道为什么。我在下面显示了两个不同页面的示例：CSS样式进位问题
这里是我尝试更改密码的页面，返回的错误是正确的，但是造型不是简单的红色'危险文本'，而是与格式相同我的导航栏。 
的注册页面是一样的故事，但它有一个巨大的空白也 
这里是我使用我的管理密码页面
<%@ Page Title="Manage Password" Language="C#" MasterPageFile="~/SyntherMaster.Master" AutoEventWireup="true" CodeBehind="ManagePassword.aspx.cs" Inherits="ComputingProjectwh.Account.ManagePassword" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<h2><%: Title %>.</h2>
<div class="form-horizontal">
<section id="passwordForm">
<asp:PlaceHolder runat="server" ID="changePasswordHolder" Visible="true">
<div class="form-horizontal">
<h4>Change Password Form </h4>
<hr />
<%-- Here a validation summary command shows any errors that occur furing the process of changing the password --%>
<asp:ValidationSummary runat="server" ShowModelStateErrors="true" CssClass="text-danger" />
<div class="form-group">
<%-- Here a label and textbox used so that the user can enter their current password and the input is controlled and confirmed in the backing code, the associatedcontrol id is the id of the input to validate--%>
<asp:Label runat="server" ID="CurrentPasswordLabel" AssociatedControlID="CurrentPassword" CssClass="col-md-2 control-label">Current password</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="CurrentPassword" TextMode="Password" CssClass="form-control" />
<%-- Here a validator cnfirms that the user has entered something into the box, whether it is correct or not will be confirmed in the backing code --%>
<asp:RequiredFieldValidator runat="server" ControlToValidate="CurrentPassword"
CssClass="text-danger" ErrorMessage="The current password field is required."
ValidationGroup="ChangePassword" />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" ID="NewPasswordLabel" AssociatedControlID="NewPassword" CssClass="col-md-2 control-label">New password</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="NewPassword" TextMode="Password" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="NewPassword" CssClass="text-danger" ErrorMessage="The new password is required." ValidationGroup="ChangePassword" />
<%-- Because the password is being changed, the password needs to be validated to confirm that it is suitable and follows the same rules as on the register page --%>
<asp:RegularExpressionValidator ID="PasswordValidator" runat="server" ErrorMessage="Invalid Password" ControlToValidate="NewPassword" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[[email protected]$!%*?&])[A-Za-z\[email protected]$!%*?&]{8,}"></asp:RegularExpressionValidator>
</div>
</div>
<div class="form-group">
<asp:Label runat="server" ID="ConfirmNewPasswordLabel" AssociatedControlID="ConfirmNewPassword" CssClass="col-md-2 control-label">Confirm new password</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="ConfirmNewPassword" TextMode="Password" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmNewPassword"
CssClass="text-danger" Display="Dynamic" ErrorMessage="Confirm new password is required."
ValidationGroup="ChangePassword" />
<%-- Here a compare validator is used in order to confirm the the user typed the password correctly by ensuring that they can type it twice --%>
<asp:CompareValidator runat="server" ControlToCompare="NewPassword" ControlToValidate="ConfirmNewPassword" CssClass="text-danger" Display="Dynamic" ErrorMessage="The new password and confirmation password do not match." ValidationGroup="ChangePassword" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<%-- Here a button is used in order to start the code behing of the page and to get it to perform the tasks it needs to --%>
<asp:Button runat="server" Text="Change Password" ValidationGroup="ChangePassword" OnClick="ChangePassword_Click" CssClass="btn btn-default" />
</div>
</div>
</div>
</asp:PlaceHolder>
</section>
</div>
</asp:Content>
代码这是代码为注册页面：
<%@ Page Title="Register" Language="C#" MasterPageFile="~/SyntherMaster.Master" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="ComputingProjectwh.Account.Register" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<h2><%: Title %>.</h2>
<p class="text-danger">
<asp:Literal runat="server" ID="ErrorMessage" />
</p>
<div class="form-horizontal">
<h4>Create a new account</h4>
<hr />
</div>
<div class="form-group">
<%-- This section is a a labbelled textbox used for the input of the user desired password, it is validated to ensure that
something is entered and also by REGEX that it has at least one upper and lower case letteras well as a number and a symbol --%>
<asp:Label runat="server" AssociatedControlID="Password" CssClass="col-md-2 control-label">Password</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Password"
CssClass="text-danger" ErrorMessage="The password field is required." />
<asp:RegularExpressionValidator ID="PasswordValidator" runat="server" ErrorMessage="Passwords must contain at least one upper and lower case character, be at least 8 characters in length and also contain one special character" ControlToValidate="Password" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[[email protected]$!%*?&])[A-Za-z\[email protected]$!%*?&]{8,}"></asp:RegularExpressionValidator>
</div>
</div>
<div class="form-group">
<%-- This section is a a labbelled textbox used for the input of the user desired password, it is validated to ensure that
something is entered and also by REGEX that it has at least one upper and lower case letteras well as a number and a symbol.
The entered password is compared with the first password entry to ensure that the two are the same --%>
<asp:Label runat="server" AssociatedControlID="ConfirmPassword" CssClass="col-md-2 control-label">Confirm password</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmPassword"
CssClass="text-danger" Display="static" ErrorMessage="The confirm password field is required." />
<asp:CompareValidator runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
CssClass="text-danger" Display="static" ErrorMessage="The password and confirmation password do not match." />
<asp:RegularExpressionValidator ID="ConfirmPasswordValidator" runat="server" CssClass="text-danger" ErrorMessage="Passwords must contain at least one upper and lower case character, be at least 8 characters in length and also contain one special character" ControlToValidate="ConfirmPassword" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[[email protected]$!%*?&])[A-Za-z\[email protected]$!%*?&]{8,}"></asp:RegularExpressionValidator>
</div>
</div>
<div class="form-group">
<%-- This section is a a labbelled textbox used for the input of the user desired username, it is validated to ensure that
something is entered and also by REGEX to ensure that it is suitable --%>
<asp:Label runat="server" AssociatedControlID="Username" CssClass="col-md-2 control-label">Username</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="Username" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Username"
CssClass="text-danger" ErrorMessage="The Username field is required." />
<asp:RegularExpressionValidator ID="UsernameValidator" runat="server" CssClass="text-danger" ErrorMessage="Usernames mcut be 3-15 characters long and cannot contain special characters" ControlToValidate="Username" ValidationExpression="^[a-z0-9_-]{3,15}$"></asp:RegularExpressionValidator>
</div>
</div>
<div class="form-group">
<%-- This section is a a labbelled textbox used for the input of the user desired email, it is validated to ensure that something is entered and that it matches email format by REGEX --%>
<asp:Label runat="server" AssociatedControlID="Email" CssClass="col-md-2 control-label">Email</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="Email" CssClass="form-control" TextMode="Email" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Email"
CssClass="text-danger" ErrorMessage="The email field is required." />
<asp:RegularExpressionValidator ID="EmailValidator" runat="server" CssClass="text-danger" ErrorMessage="RegularExpressionValidator" ControlToValidate="Email" ValidationExpression=""></asp:RegularExpressionValidator>
</div>
</div>
<div class="form-group">
<%-- This section is a simple data entry, validated by REGEX and asp to ensure that something is entered and the date is suitable and in the correct format --%>
<asp:Label runat="server" AssociatedControlID="DateOfBirth" CssClass="col-md-2 control-label">Date of birth</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="DateOfBirth" CssClass="form-control" TextMode="Date" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="DateOfBirth" CssClass="text-danger" ErrorMessage="Please enter a valid date." />
<asp:RegularExpressionValidator ID="DateOfBirthValidator" runat="server" CssClass="text-danger" ErrorMessage="RegularExpressionValidator" ControlToValidate="DateOfBirth" ValidationExpression="^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$"></asp:RegularExpressionValidator>
</div>
</div>
<div class="form-group">
<%-- Text box for first name entry, this field is required but not validated --%>
<asp:Label runat="server" AssociatedControlID="Firstname" CssClass="col-md-2 control-label">First Name</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="Firstname" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Firstname"
CssClass="text-danger" ErrorMessage="Please enter your first name." />
</div>
</div>
<div class="form-group">
<%-- Text box for surname entry, this field is required but not validated --%>
<asp:Label runat="server" AssociatedControlID="Surname" CssClass="col-md-2 control-label">Surname</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="Surname" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Surname"
CssClass="text-danger" ErrorMessage="Please enter your Surname." />
</div>
</div>
<div class="form-group">
<%-- This button is used to trigger the code to submit the users data and to create a new user--%>
<div class="col-md-offset-2 col-md-10">
<asp:Button runat="server" OnClick="CreateUser_Click" Text="Register" CssClass="btn btn-default" />
</div>
</div>
<asp:ValidationSummary runat="server" CssClass="text-danger" />
</asp:Content>
我也可以添加cs落后，但林不知道，如果是相关的很多，也许只有这条线：
else
{//if any errors occur then they are returned to the user on the page, for example if a username already exists and is in use.
ErrorMessage.Text = result.Errors.FirstOrDefault();
}
下面是在当前状态下我site.css：在您的导航
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
max-width: 280px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
.jumbotron {
margin-top: 20px;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
font-size: 12em;
font-weight: bold;
font-family: Helvetica;
}
}
/*all of the below styling is used to create the navigation bar and to give it colour and style*/
li {
border-right: 1px solid #ff6600;
z-index: 299;
position: relative;
}
ul {
list-style: none;
padding: 0;
margin: 0;
background: #2B3533;
border: 1px solid #ff6600;
z-index: 299;
position: relative;
}
ul li {
display: block;
position: relative;
float: left;
background: #2B3533;
z-index: 299;
position: relative;
}
li ul {
display: none;
z-index: 299;
position: relative;
}
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
z-index: 299;
position: relative;
}
li:hover > ul {
display: block;
position: absolute;
z-index: 992;
}
li:hover li {
float: none;
z-index: 992;
position: relative;
}
li:hover a {
background: #2B3533;
z-index: 992;
position: relative;
}
li:hover li a:hover {
background: #ff6600;
z-index: 992;
position: relative;
}
.main-navigation li ul li {
border-top: 0;
z-index: 299;
position: relative;
}
ul li a:hover {
background: #ff6600;
z-index: 299;
position: relative;
}
ul ul ul {
left: 100%;
top: 0;
z-index: 299;
position: relative;
}
ul:before,
ul:after {
content: " ";
display: table;
z-index: 299;
position: relative;
}
ul:after {
clear: both;
z-index: 992;
position: relative;
}
.main-navigation > li > a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: white;
z-index: 299;
position: relative;
}
.shadowing {
color: #fff;
font-size: 12em;
font-weight: bold;
font-family: Helvetica;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
margin-top: 20px;
}
.shadowing {
text-align: center;
}
我不想让错误看起来像那样，只是普通的红色文本，但问题是他们* DO *具有相同的样式 –