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 *具有相同的樣式 –