I have a pop-up built using Jquery.Block-UI and ajax.. and i have no issues with the functionality but the thing is CSS, when i checked in Chrome there are no CSS problem… But when it comes to IE and FIREFOX its worse.. the Design of pop-up is gone… please take a look at images below
IN CHROME : WORKS FINE:
IN IE-8
IN FIREFOX:
Here is the Code:
In head tag:
<link href="style.css" rel="stylesheet" type="text/css" />
Content:
<table class="quot-popup" cellpadding="0" cellspacing="0">
<tr><td><div style="float: right;"><input type="image" style="" src="../Webimages/x.png" onclick="closePop();"/></div></td></tr>
<%if(navLevel.trim().equalsIgnoreCase("0")){%>
<tr><td class="poptd">Are you a Registered User please <a href="web/login.jsp">Sign in</a> to Quote List, Or <a href="web/new_user_registration.jsp">Sign Up</a> to Register.</td></tr>
<%}else if(navLevel.trim().equalsIgnoreCase("1")){%>
<tr><td class="poptd">Are you a Registered User please <a href="login.jsp">Sign in</a> to Quote List, Or <a href="new_user_registration.jsp">Sign Up</a> to Register.</td></tr>
<%}%>
<tr><td class="poptd">Or</td></tr>
<tr><td class="poptd">You want to continue without Register, <a href="javascript:showMail();">Click Here</a> to Quote List.</td></tr>
</table>
<table id="askEmail" class="quot-mailPopup" cellpadding="0" cellspacing="0">
<tr><td class="mailtd1">Enter your Email Address : </td>
<td class="mailtd2"><input type="text" id="anonymousEmailId" name="anonymousEmailId" value=""/></td>
<td class="mailtd3"><input type="image" src="../Webimages/go-btn.jpg" onclick="sbtEmail(); return false;"/></td></tr>
</table>
CSS:
table.quot-popup{width: 100%; font-size: 11px; font-weight: bold;}
table.quot-popup td.poptd{padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-popup td.poptd A:hover{color:#99CF99;}
table.quot-popup{width: 100%; font-size: 11px; font-weight: bold;}
table.quot-popup td.poptd{padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-popup td.poptd A:hover{color:#99CF99;}
table.quot-mailPopup{width: 100%; font-size: 11px; font-weight: bold; display: none; text-align: center;}
table.quot-mailPopup td.mailtd1{width: 40%; padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-mailPopup td.mailtd2{width: 50%; padding-top:6px;padding-bottom:6px; padding-right:3px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-mailPopup td.mailtd2 input{width: 250px; height:18px;}
table.quot-mailPopup td.mailtd3{padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
Html: pop up will be called on click <a href="***.jsp" id="QutLstLnkId">List</a>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<link href="Webcss/style.css" rel="stylesheet" type="text/css" />
<link href="Webcss/contentslider.css" rel="stylesheet" type="text/css" />
<link href="Webcss/jquery.jcarousel.css" rel="stylesheet" type="text/css" />
<link href="Webimages/favicon.ico" rel="shortcut icon" />
<script type="text/javascript" src="Webjs/jquery.js"></script>
<script type="text/javascript" src="Webjs/jquery.blockUI.js"></script>
<script type="text/javascript" src="Webjs/ajax.js"></script>
<script type="text/javascript">
//------------------------------------- For Pop-Up
$(function() {
$('#QutLstLnkId').click(function() {
var qMailId = $("#qtMailId").val();
qMailId = $.trim(qMailId);
if(qMailId == "null" || qMailId == ""){
$.blockUI({
message: $('#messageDispDiv'),css: {
width:'530px',
height:'auto',
top: ($(window).height() - 110) /2 + 'px',
left: ($(window).width() - 530) /2 + 'px'
} });
$("#messageDispDiv").block({css:{border: 'none',padding: '15px',backgroundColor: '#000','-webkit-border-radius': '10px','-moz-border-radius': '10px',width:'200px',opacity: .5,color: '#0A7A48'}});
enqueue("web/quoteList.jsp?oper=QUOTLSTAUTH&pg=0",processAjax);
}else{window.location.href="web/createQuoteList.jsp";}
});
});
function processAjax(s){
$("#messageDispDiv").unblock();
$("#messageDispDiv").html(s);
}
function closePop(){
$.unblockUI();
}
function showMail(){
$("#askEmail").show();
}
//------------------------------------- For Pop-Up
</script>
</head>
<body>
<!-- PopUp div -->
<div id="messageDispDiv" style=" display: none; width:530px; min-height: 110px; border: 1px solid #0A7A48; text-align:center;">
<div id="askEmailId" style="display:none;">
</div>
</div>
<!-- PopUp div -->
</body>
</html>
Thank you.
Solved…. Thank you all… there was nothing wrong with Css or Code or Browser… it was with Apache server cache… cleared Apache cache and its good in all browsers…