jQuery causing CSS to fail over SSL

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.


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

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

            else {
                // Hide the login box
    <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" />
    <table cellspacing="0" class="tblLoginBox">
            <td class="tdHeader">
                <img src="images/login-logo.jpg" alt="Gateway" /></td>
            <td class="tdTitle">Gateway</td>
                <table cellspacing="0" class="tblSpacer">
                        <td colspan="2" class="tdSpacer">
                        <td class="tdHeading">Username</td>
                        <td><asp:TextBox ID="txtUsername" MaxLength="30" CssClass="txtInput" runat="server" /></td>
                        <td class="tdHeading">Password</td>
                        <td><asp:TextBox ID="txtPassword" MaxLength="30" AutoPostBack="true" TextMode="Password" CssClass="txtInput" runat="server" /></td>
                        <td colspan="2" class="tdSpacer">
                        <td colspan="2" class="tdSpacer">
                <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 />
    <asp:PlaceHolder ID="phPrivacy" runat="server">
        <table cellspacing="0" class="tblPrivacyBox">
                <td class="tdContainer">
                    <div class="divTitle">WARNING:</div>
                    It is a criminal offence to:
                            Obtain access to data without authority.<br />
                            <i>(Penalty: 2 years imprisonment)</i>
                            Damage, delete, alter or insert data without authority.<br />
                            <i>(Penalty: 10 years imprisonment)</i>


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&#37;; 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.


Sorry, I forgot to mention that the CSS only has issues when the jQuery animation is active.