IE和FireFox中的CSS问题_Css_Ajax_Jquery Ui

IE和FireFox中的CSS问题

css ajax jquery-ui

IE和FireFox中的CSS问题,css,ajax,jquery-ui,Css,Ajax,Jquery Ui,我使用Jquery.Block-UI和ajax构建了一个弹出窗口。。我对功能没有任何问题，但问题是CSS，当我登录Chrome时，没有CSS问题。。。但说到IE和FIREFOX，情况就更糟了。。弹出窗口的设计已经过时了。。。请看下面的图片 IN CHROME : WORKS FINE: 代码如下：在头标签中： <link href="style.css" rel="stylesheet" type="text/css" /> Html：单击时将调用弹出窗口谢谢你。伙计……你的

我使用Jquery.Block-UI和ajax构建了一个弹出窗口。。我对功能没有任何问题，但问题是CSS，当我登录Chrome时，没有CSS问题。。。但说到IE和FIREFOX，情况就更糟了。。弹出窗口的设计已经过时了。。。请看下面的图片

IN CHROME : WORKS FINE:

代码如下：

在头标签中：

<link href="style.css" rel="stylesheet" type="text/css" />

Html：单击时将调用弹出窗口

谢谢你。

伙计……你的代码。。。对不起，很难读

我打赌你有CSS问题是因为你把它塞进桌子的方式。表和TDs看起来像div，但它们绝对不是。我敢打赌这就是为什么Chrome看起来运行良好，但FF和IE却在冷落你

那么-你能简化你的设计，让事情变得更简单吗

<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>

对于单单元格表，您将显示11行CSS。我相信，当我的CSS开始像那样膨胀时……我的代码在某个地方出错了——是时候重构了

您离语义标记太远了。你将花更多的时间去研究一个黑客，然后只是简化你的代码设计。

解决了。。。。谢谢大家。。。Css、代码或浏览器没有问题。。。它使用Apache服务器缓存。。。清除了Apache缓存，在所有浏览器中都很好…

我建议Photoshop甚至MS Paint来修复这些问题。添加代码更好地分析问题！！

<link href="style.css" rel="stylesheet" type="text/css" />

<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>

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;}

<!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>

<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>

#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.