I'm having trouble with my div text overlapping in unexpected ways. The source of the text is a JS file, so it may not appear correctly here.
The text in the div.subheader class keeps overlapping into the div.resource class, which is causing layout issues.
Here is the relevant HTML code snippet:
<body>
<div class="loading" id="loading"><img src="./images/dash-loading-graphic.gif"/></div>
<div class="contactsScreen" id="contactsScreen"></div>
<div style="text-align:center;" id="popupTbl"></div>
<table class="maintable">
<tr style="vertical-align: top; height: 130px;">
<td class="header">
<div id="qcntntTbl"></div>
<div class="mainHeader" id="mainHeader"></div>
<br/>
<div class="subHeader" id="subHeader"></div>
</br>
<div class="resource">
<div class="resourcesVideo"><a href="javascript: openVidWin();"><script type="text/javascript">document.write("<img alt=\"\" src=\"" + imgpath + "playbutton.gif\" class=\"playButton\">");</script> <span class="resourceTxt" id="videoTxt"></span></a></div>
<div class="resourcesEE"><a href="javascript: setHelpContent(0);"><script type="text/javascript">document.write("<img alt=\"\" src=\"" + imgpath + "documentIcon.gif\" class=\"docIcon\"/>");</script> <span class="resourceTxt" id="empRsrcs"></span></a></div>
<div class="resourcesMgr" id="divMgrResource"><a href="javascript: setHelpContent(1);"><script type="text/javascript">document.write("<img alt=\"\" src=\"" + imgpath + "documentIcon.gif\" class=\"docIcon\"/>");</script><span class="resourceTxt" id="mgrRsrcs"></span></a></div>
</div>
</td>
</tr>
<tr>
<td><div id="ActnContent"></div></td>
</tr>
</table>
<script type="text/javascript">
function findObj(){
if (filesloaded !=4) {
cntrnum = cntrnum + 1;
setTimeout(findObj,2000);
if (cntrnum == 20){
alert(" - Please contact your local IT Helpdesk for assistance viewing the What's Happening Now content. \n The content object is not defined.");
}
}
else{
document.getElementById("loading").style.display = "none";
if (qryStrArr.length == 3 && frameQuarterIndicator.length == 1 && checkValidQuarter(frameQuarterIndicator) == true){
changeQ(frameQuarterIndicator);
}
else{
changeQ(getThisQ());
}
}
}
//test to see if the js file loaded
findObj();
</script>
</body>
And here is the relevant CSS code:
a.sfLink {font-family: Segoe Print; size; 10}
/* Additional CSS styles go here */