I'm using a ValidatorCalloutExtender on a RequiredFieldValidator and decided to change the style from the default to a more 'Modern UI'. I found a Wonderful Post Which helped me get all the relevant CSS fields. I proceeded to change the style and was very happy with the result. I tested in IE, Chrome, and FireFox and it worked perfectly. I then Installed on the production server and noticed the CSS is NOT rendered correctly, no matter which browser I use.
http://s14.postimg.org/gn5kjgovl/Rendered_Differently.png Example Image
I have included my CSS below (Just incase I've done something wrong).
/* AjaxControlToolkit Validator */
.validatorCalloutHighlight
{
border:solid;
border-color: #FFCC00;
/*background-color: lemonchiffon;*/
}
.ajax__validatorcallout_popup_table
{
/*position:absolute;*/
min-width: 350px;
min-height: 40px;
/*padding: 8px;*/
background: #FFCC00;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-left:250px;
margin-top:-20px;
color:black;
}
.ajax__validatorcallout_popup_table:after
{
content: '';
position:absolute;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: #FFCC00 transparent transparent transparent;
display: block;
width: 0;
bottom: -20px;
left: 0px;
}
/* The popup table row */
.ajax__validatorcallout_popup_table_row
{
}
/* The callout cell */
.ajax__validatorcallout_callout_cell
{
}
/* The table in the callout cell */
.ajax__validatorcallout_callout_table
{
}
/* The callout table row */
.ajax__validatorcallout_callout_table_row
{
}
/* The error message cell */
.ajax__validatorcallout_error_message_cell
{
}
/* The warning icon cell */
.validator_callout .ajax__validatorcallout_icon_cell
{
padding:0px;
}
.validator_callout .ajax__validatorcallout_icon_cell img
{
/* Remove the 'Warning' icon */
display: none;
}
/* The close button cell */
.ajax__validatorcallout_close_button_cell
{
}
/* The arrow cell */
.ajax__validatorcallout_arrow_cell
{
display:none;
}
/* Inner div of a cell. Used in the close button */
.ajax__validatorcallout_innerdiv
{
}The ASP code is below
<asp:TextBox ID="txtUsername" runat="server" Width="300px"></asp:TextBox>
<asp:RequiredFieldValidator CssClass="validator_callout" ID="reqvalUsername" runat="server" ControlToValidate="txtUsername" Display="None" ErrorMessage="Enter a new login name" ValidationGroup="Submit">*</asp:RequiredFieldValidator>
<cc1:ValidatorCalloutExtender ID="reqvalUsername_ValidatorCalloutExtender" runat="server" CloseImageUrl="~/Images/Buttons/cancel_Validator.png" HighlightCssClass="validatorCalloutHighlight" TargetControlID="reqvalUsername" PopupPosition="TopRight" WarningIconImageUrl="~/Images/Status/clear.png">
</cc1:ValidatorCalloutExtender>I even went so far as to alter the web.config with a custom header, which did not resolve my problem. CSS renders differently on web server than on development environment
I would very much like to use the new style and feel that like it is only something small I've overlooked, but I'm out of ideas on how to resolve this. Could anybody please assist with this frustrating problem?
