Need help with firefox bug

heliosphan · 07-17-2009, 09:22 AM

I have been trying to troubleshoot a bug that keeps coming up in firefox for a complicated css rollover i implemented for a site.

Let me explain what happens. Occasionally, when someone looks at the site: the hidden text appears in red. If you refresh the page - it stops occurring because I think is saves in the cache. I've spent a long time trying to troubleshoot this and cannot seem to come up with a solution.

The url for one of the pages (the problem occurs on multiple pages):
soartest.amdesigngroup.com/suite/soar_card.html

html:

HTML Code:

    <div class="hoverbox">
   <div class="sCard01_">
        <img id="../images/sCard01" src="http://www.v7n.com/forums/images/sCard01.png" width="62" height="117" border="0" alt="" />
    </div>
    <div class="sCard02_">
        <a class="thumbnail3" href="stra_plan.html"><img src="http://www.v7n.com/forums/images/sCard02.png" width="122" height="102" border="0" alt="" /><div><span class="ltGreen">Strategic Planning</span> - a comprehensive, compact two-day process that helps companies develop a vision of where they want to be and plan the details of how to get there.</div>
        </a>
    </div>
    <div class="sCard03_">
        <img id="../images/sCard03" src="http://www.v7n.com/forums/images/sCard03.png" width="130" height="78" border="0" alt="" />
    </div>
    <div class="sCard04_">
        <img id="../images/sCard04" src="http://www.v7n.com/forums/images/sCard04.png" width="26" height="24" border="0" alt="" />
    </div>
    <div class="sCard05_">
        <a class="thumbnail5" href="sales_body.html"><img id="../images/sCard05" src="http://www.v7n.com/forums/images/sCard05.png" width="115" height="108" border="0" alt="" /><div><span class="dPurp">Sales Body Scan&trade;</span> - a process that provides a comprehensive, quantified assessment of the effectiveness of a company’s sales strategy and execution. It identifies the root causes of disappointing sales performance and helps develop a plan to grow sales and profitability.</div></a>
    </div>
    <div class="sCard06_">
        <img id="../images/sCard06" src="http://www.v7n.com/forums/images/sCard06.png" width="38" height="15" border="0" alt="" />
    </div>
    <div class="sCard07_">
        <a class="thumbnail4" href="corp_bscan.html"><img id="../images/sCard07" src="http://www.v7n.com/forums/images/sCard07.png" width="110" height="104" border="0" alt="" /><div><span class="red">Corporate Body Scan&trade;</span> &ndash; a one-day process that provides a comprehensive, quantified assessment of a company’s overall effectiveness and opportunities for improvement. Knowing their own company better than anyone else, a team comprised of senior and middle management along with other employees initially performs an assessment. They then develop a detailed action plan for making specific profit and performance improvements, benchmarking their company against high-performance, world-class businesses.</div></a>
    </div>
    <div class="sCard08_">
        <a href="op_body.html" class="thumbnail2"><img id="../images/sCard08" src="http://www.v7n.com/forums/images/sCard08.png" width="100" height="134" border="0" alt="" /><div class="inner"><span class="mBlue">Operational Body Scan&trade;</span> - a process that provides a comprehensive, quantified assessment of quality of a company’s operational strategy and execution. It identifies the root causes of disappointing operational performance and helps develop a plan to significantly improve operational effectiveness.</div></a>
    </div>
    <div class="sCard09_">
        <img id="../images/sCard09" src="http://www.v7n.com/forums/images/sCard09.png" width="104" height="20" border="0" alt="" />
    </div>
    <div class="sCard10_">
        <img id="../images/sCard10" src="http://www.v7n.com/forums/images/sCard10.png" width="31" height="110" border="0" alt="" />
    </div>
    <div class="sCard11_">
        <a class="thumbnail6" href="sw_manag.html"><img src="http://www.v7n.com/forums/images/sCard11.png" alt="" width="116" height="120" border="0" class="thumbnail6" id="../images/sCard11" /><div><span class="dOrng">Sweet Spot Management&trade;</span> - a tool that helps identify and focus a company’s efforts on business segments, products and customers that are best suited for its strengths.</div></a>
    </div>
    <div class="sCard12_">
        <img id="../images/sCard12" src="http://www.v7n.com/forums/images/sCard12.png" width="67" height="110" border="0" alt="" />
    </div>
    <div class="sCard13_">
        <img id="../images/sCard13" src="http://www.v7n.com/forums/images/sCard13.png" width="100" height="65" border="0" alt="" />
    </div>
    </div>

CSS:

HTML Code:

/*THUMBNAIL2 - thumbnail2 has border and border on hover*/



.thumbnail2 {
position: absolute;
float: left;
margin: 0;
left:0;
top:0;
z-index: 0;
}

.thumbnail3 {
position: absolute;
float: left;
margin:0;
left:0;
top:0;
z-index: 0;

}

.thumbnail4 {
position: absolute;
float: left;
margin: 0;
left:0;
top:0;
z-index: 0;

}
.thumbnail5 {
position: absolute;
float: left;
margin: 0;
left:0;
top:0;
z-index: 0;

}
.thumbnail6 {
position: absolute;
float: left;
margin:0;
left:0;
top:0;
z-index: 0;

}


.thumbnail2 div { /*CSS for enlarged image*/
position: absolute;
background-image: url(../images/popup3.png);
background-repeat: no-repeat;
left: -9999px;
color: black;
text-decoration: none;
width:400px;
height:300px;
z-index: 1;
}

.thumbnail3 div { /*CSS for enlarged image*/
position: absolute;
background-image: url(../images/popup3.png);
background-repeat: no-repeat;
left: -9999px;
color: black;
text-decoration: none;
width:300px;
height:300px;
z-index: 1;
}

.thumbnail4 div { /*CSS for enlarged image*/
position: absolute;
background-image: url(../images/popup3.png);
background-repeat: no-repeat;
left: -9999px;
color: black;
text-decoration: none;
width:320px;
height:300px;
z-index: 1;
}



.thumbnail5 div { /*CSS for enlarged image*/
position: absolute;
background-image: url(../images/popup4.png);
background-repeat: no-repeat;
left: -9999px;
color: black;
text-decoration: none;
width:330px;
height:300px;
z-index: 1;

}
.thumbnail6 div { /*CSS for enlarged image*/
position: absolute;
background-image: url(../images/popup4.png);
background-repeat: no-repeat;
left: -9999px;
color: black;
text-decoration: none;
width:330px;
height:300px;
z-index: 1;
}

.thumbnail2:hover div { /*CSS for enlarged image on hover*/
position:absolute;
padding: 65px 45px 0 105px;
display:inline; width: 265px;
*width: 400px;
top: 150px; /* use IF IE6 style to correct IE6 positions of larger image relative to thumb */
left: -80px;/*position where enlarged image should offset horizontally */
}

.thumbnail3:hover div { /*CSS for enlarged image on hover*/
position:absolute;
padding: 65px 45px 0 105px;
display:inline; width: 265px;
*width: 400px;
top: 267px; /* use IF IE6 style to correct IE6 positions of larger image relative to thumb */
left: -142px;/*position where enlarged image should offset horizontally */
}

.thumbnail4:hover div { /*CSS for enlarged image on hover*/
position:absolute;
padding: 65px 45px 0 105px;
display:inline; width: 265px;
*width: 400px;
top: 165px; /* use IF IE6 style to correct IE6 positions of larger image relative to thumb */
left: -180px;/*position where enlarged image should offset horizontally */
}
.thumbnail5:hover div { /*CSS for enlarged image on hover*/
position:absolute;
padding: 65px 45px 0 105px;
display:inline; width: 265px;
*width: 400px;
top: 189px; /* use IF IE6 style to correct IE6 positions of larger image relative to thumb */
left: -290px;/*position where enlarged image should offset horizontally */
}
.thumbnail6:hover div { /*CSS for enlarged image on hover*/
position:absolute;
padding: 65px 45px 0 105px;
display:inline; width: 265px;
*width: 400px;
top: 61px; /* use IF IE6 style to correct IE6 positions of larger image relative to thumb */
left: -211px;/*position where enlarged image should offset horizontally */
}