Encountering an unusual issue with a custom validator function in my ASP.NET page when trying to display a validation summary at the top of the webpage using CSS styles...
Here is the screen shot before clicking the submit button and making changes:
Upon submitting the page, the validation summary displays at the top but the controls' position changes as shown below:
Below is the code snippet:
<div id="validationSummaryHolder" class="validationSummaryHolder">
<asp:ValidationSummary runat="server" ID="valsErrors" ValidationGroup="TestValidation" DisplayMode="BulletList"
CssClass="validationsummary" HeaderText="<div class='validationheader'>Please correct the following:</div>" />
</div>
And here are the CSS styles for the validation summary:
.validationheader
{
background-color: white;
color:green;
height: 14px;
font-weight: bold;
border-bottom: 1px solid #b08b34;
padding-top: 3px;
}
.validationsummary
{
border: 1px solid #b08b34;
padding: 0px;
margin:5px 0 20px 0px;
font-size:12px;
width:99%;
}
.validationsummary ul
{
padding-top: 1px;
font-size: 12px;
color:#982b12;
}
.validationsummary ul li
{
padding: 1px 0px;
}
All controls are placed in individual divs with a specified position type of Relative...
Uncertain why this strange behavior is occurring, should I set fixed height and width for the entire page? Any assistance would be greatly appreciated. Thank you in advance!