CSS Style carry issue

Question

I have a css error that I cant seem to locate whatsoever. I am having this issue on an asp website. I have a navigation bar which i have some styling for ( Not very good mind you). The styling for my navigation bar is also being used on any validation that I perform on form entries but im not sure why. I have shown an example below from two different pages:

Here is a page where I attempt to change my password, The error returned is correct however the styling is not simply red 'danger-text' but has the same formatting as my nav bar.

The register page is the same story however it has an enormous blank space also

Here is the code I am using for my Manage password page

<%@ 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)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{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>

And this is the code for the register page:

<%@ 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)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{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)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{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>

I can also add the cs behind but im not sure if it is relevant much, perhaps only this line:

    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();
    }

Here is my site.css in its current state:

/* 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;
}

Answer 1

Links in your navigation and the error have same styling but it does not look the same? Is that the problem? Well, the navigation elements are links, and they have their style, but the error is not a link? Maybe create another CSS element with that error codes class and paste styling there.

Answer 2

Your css looks far too generic. That's applying your styles to every ul or li element in the page. Either make classes, or at the very least prepend .main-navigation to all your current selectors so that it only affects the navigation section. eg:

.main-navigation li {
    border-right: 1px solid #ff6600;
    z-index: 299;
    position: relative;
}