title: stacking validation messages
body: <p>I have this below style to show asp.net validations as popup.
  </p>
  
  <pre><code>    .triangle-right.top::after
      {
          border-color: transparent #f00;
          border-width: 10px 0 0 10px;
          bottom: auto;
          left: 15px;
          top: -8px;
      }
      .triangle-right::after
      {
          border-color: #f00 transparent;
          border-style: solid;
          border-width: 20px 0 0 20px;
          bottom: -20px;
          content: "";
          display: block;
          left: 50px;
          position: absolute;
          width: 0;
      }
      .triangle-right.top
      {
          background: #f00 none repeat scroll 0 0;
      }
      .triangle-right
      {
          background: #f00 none repeat scroll 0 0;
          border-radius: 4px;
          color: #fff;
          height: 28px;
          padding: 5px 10px;
          position: relative;
          top: 40px;
          z-index: 1000;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>Below is how I use this css.</p>
  
  <pre><code>    &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                              ControlToValidate="FirstName" ErrorMessage="First Name is required" ForeColor="#FFFFFF"
                               CssClass="triangle-right top"&gt;&lt;/asp:RequiredFieldValidator&gt;
  </code></pre>
  
  <p><br/>
  This is how it displays.<br/>
  <a href="https://i.stack.imgur.com/2qPfy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2qPfy.png" alt="enter image description here"></a><br/>
  This works well until I have only one message to display. I have certain cases where a control may not follow more than one validation. So all the error messages are popping up one over the other. Can anyone help me in solving this?</p>