IE和FireFox中的CSS问题
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.
Dude...your code... (sorry, it's hard to read).
I'm betting you're having a CSS issue because of the way you're shoehorning it into the table. Tables, and TDs look like DIVs, but they absolutely are not. I'm betting this is why Chrome seems to be working fine, but FF, and IE are snubbin' ya.
So - could you just simplify your design, and make things easier?:
<table id="popup"> <!-- this could/should be a div //-->
<tr>
<td align="center">
<img src="close.png" />
<p>Are You Registered...Register</p>
<p>Or</p>
<p>Or</p>
<p>You want to continue....list.<br />
Enter your Email Address : <input></p>
</td>
</tr>
</table>
CSS (for example):
#popup { border:4px solid gray; position:relative; }
#popup #closer { position:absolute; top:10px; right:10px; }
p { font: 1.1em/1.5 sans-serif; }
...etc. You get the gist - it's simple.
For a single-cell table, you're showing 11 lines of CSS. It's my belief that when my CSS starts to bloat like that...my code's gone awry somewhere - time to refactor.
You've strayed too far from semantic markup. You'll spend more time working up a hack then to just simplify your code design.
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...