Hi all,
I am having a very strange issue with a site I am programming. I am using ASP.NET for data retrieval and jQuery to perform various functions/animations (error bar, slide menu, table sorter, etc…). Everything is working great until the pages are viewed over and SSL connection. When viewing over SSL, some of the margins/padding stops working and the hover effects on tables stop working correctly (leaving cells coloured, not colouring others). After spending a day looking for the solution in Google, I haven’t found anything that will fix the issue. No errors/warnings are displayed on the page. Code is as below.
HTML
<!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 runat="server">
<title>File Gateway 09 - Caznet Solutions</title>
<link href="css/login.css" rel="stylesheet" type="text/css" />
<script src="/lib/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="lib/AC_OETags.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
// Hides the errorbar and then animates it to slide down
$("#errorbar").slideDown("slow");
$("#divErrorPad").slideDown("slow");
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 10;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor revision of Flash required
var requiredRevision = 0;
// -----------------------------------------------------------------------------
// Version check based upon the values entered above in "Globals"
var hasReqestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
// Check to see if the version meets the requirements for playback
if (hasReqestedVersion) {
// if we've detected an acceptable version
$("#divNoFlash").hide();
}
else {
// Hide the login box
$(".tblSpacer").hide();
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:PlaceHolder ID="phError" Visible="false" runat="server">
<div id="errorbar">
<div id="divErrorPad">
<img src="/images/warning.gif" alt="Warning" width="30" height="25" />
<span class="errorbar_heading"><asp:Label ID="lblErrorType" runat="server" /></span>
- <asp:Label ID="lblErrorMsg" runat="server" />
</div>
</div>
</asp:PlaceHolder>
<table cellspacing="0" class="tblLoginBox">
<tr>
<td class="tdHeader">
<img src="images/login-logo.jpg" alt="Gateway" /></td>
</tr>
<tr>
<td class="tdTitle">Gateway</td>
</tr>
<tr>
<td>
<table cellspacing="0" class="tblSpacer">
<tr>
<td colspan="2" class="tdSpacer">
</td>
</tr>
<tr>
<td class="tdHeading">Username</td>
<td><asp:TextBox ID="txtUsername" MaxLength="30" CssClass="txtInput" runat="server" /></td>
</tr>
<tr>
<td class="tdHeading">Password</td>
<td><asp:TextBox ID="txtPassword" MaxLength="30" AutoPostBack="true" TextMode="Password" CssClass="txtInput" runat="server" /></td>
</tr>
<tr>
<td colspan="2" class="tdSpacer">
</td>
</tr>
<tr>
<td colspan="2" class="tdSpacer">
</td>
</tr>
</table>
<div id="divNoFlash">
<div class="divTitle">WARNING</div>
This site requires Adobe Flash Player version 10 or higher.
Please click the image below to install the lastest version
of Adobe Flash Player. Once you have downloaded the newest
version of Adobe Flash Player, please refresh this page.<br />
<a href="http://get.adobe.com/flashplayer/" target="_blank">
<img src="images/getflashplayer.gif" alt="Get Flash Player" style="border: 0;" /></a><br />
</div>
</td>
</tr>
</table>
<asp:PlaceHolder ID="phPrivacy" runat="server">
<table cellspacing="0" class="tblPrivacyBox">
<tr>
<td class="tdContainer">
<div class="divTitle">WARNING:</div>
It is a criminal offence to:
<ol>
<li>
Obtain access to data without authority.<br />
<i>(Penalty: 2 years imprisonment)</i>
</li>
<li>
Damage, delete, alter or insert data without authority.<br />
<i>(Penalty: 10 years imprisonment)</i>
</li>
</ol>
</td>
</tr>
</table>
</asp:PlaceHolder>
</form>
</body>
</html>
CSS
html, body { margin: 0; padding: 0; background-color: #EDEDED; }
.tblLoginBox { width: 400px; background-color: White; margin-left: auto; margin-right: auto; margin-top: 200px;
font-family: Calibri, Arial; }
.tblLoginBox .tdHeader { height: 90px; vertical-align: middle; text-align: left; padding-left: 15px; }
.tblLoginBox .tdTitle { height: 35px; padding: 3px 0px 0px 40px; font-weight: bold; background-image: url(/images/loginheader.gif);
background-repeat: repeat-x; color: White; font-size: 10pt; }
.tblLoginBox .tblSpacer { width: 350px; margin-left: auto; margin-right: auto; }
.tblLoginBox .tblSpacer .tdHeading { width: 100px; font-weight: bold; font-size: 10pt; padding-left: 30px; }
.tblLoginBox .tblSpacer .tdSpacer { font-size: 6pt; }
.tblLoginBox .tblSpacer td { font-size: 10pt; font-weight: bold; padding: 5px 5px 5px 5px; }
.tblPrivacyBox { width: 400px; background-color: White; margin-left: auto; margin-right: auto; margin-top: 50px;
font-family: Calibri, Arial; vertical-align: top; text-align: left; font-size: 10pt;
padding: 10px 25px 10px 25px; }
.tblPrivacyBox .tdContainer { min-height: 100px; vertical-align: top; }
.tdContainer .divTitle { color: #ff0000; font-size: 12pt; font-weight: bold; }
.tdContainer ol { list-style-type: decimal; margin-top: 20px; }
.tdContainer ol li { padding: 3px; }
#errorbar { background-color: #FF9; height: 30px; font-size: 10pt; color: #000;
padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 10px;
display: block; width: 100%; position: absolute; left: 0; top: 0;
font-family: Calibri, Arial; display: none; }
#errorbar #divErrorPad { margin: 0px 0px 0px 25px; }
.errorbar_heading { font-size: 13pt; color: #F00; font-weight: bold; }
.btnNormal { font-family: Calibri, Arial; color: White; font-weight: bold; font-size: 8pt;
background-color: #26365E; }
.txtInput { width: 150px; }
#divNoFlash { width: 350px; background-color: White; margin-left: auto; margin-right: auto; margin-top: 0px;
font-family: Calibri, Arial; vertical-align: top; text-align: center; font-size: 10pt;
padding: 10px 25px 10px 25px; display: block; }
#divNoFlash .divTitle { color: #ff0000; font-size: 12pt; font-weight: bold; }
Any help would be very appriciated.
Cheers
Tuvek