1
Я не могу получить текст div, чтобы остановить перекрытие, и я не уверен, почему. Текст извлекается из JS-файла, если для вас ничего не заполняется.Текст div накладывается на другой div
По некоторым причинам я не могу получить текст в классе div.subheader, чтобы остановить перекрытием в div.resource класс
HTML
<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>
CSS
a.sfLink {font-family: Segoe Print; size; 10}
a {text-decoration:none;}
a:hover {text-decoration: underline;}
a.qLink:hover {text-decoration:none;}
a.whtNavLinks {color:#FFFFFF; font-family: Corbel; font-size: 14px; text-decoration: none; font-weight: bold;}
div {box-sizing: border-box;}
div.actnHeader {position: absolute; top: 12px; right: 285px;}
div.contactsScreen {display: none; z-index:-4; position: absolute; top: 0px; right: 0px; width:582px; height:100%; background-color :#ffffff; opacity: 0.70; filter: alpha(opacity=70);}
div.contactsTbl {display: none; z-index:-5; position: absolute; top: 15px; width: 530px; background-color :#cfcfcf; padding: 1px; border-style: solid; border-radius: 10px; border-width: 1px 2px 3px 1px; border-color: #aeaeae #aeaeae #989898 #aeaeae; font-family: Corbel;}
div.emplHeader {position: absolute; top: 15px; right: 62px;}
div.hlpCtgDiv {border-radius: 10px; border-width: 1px; border-style:dotted; border-color: #ffffff; display: none; width:494px;}
div.loading {z-index: 100; position: absolute; top: 5px; right: 0px; width: 100%; height: 390px; background-color: 2195DF; text-align: center; vertical-align: middle;}
div.mgrHeader {position: absolute; top: 15px; right: -8px; width: 60px; text-align:center;}
div.processBlurb {font-family: Segoe Print; font-size: 16px; text-align: center; width:430px; margin-bottom:10px;}
div.subHeader {z-index: 0; float: left; clear: both; height: 26px; width: 530px; font-family: Calibri, Arial; font-style: italic; font-size:12px; font-weight:bold; text-align: center;}
div.mainHeader {float: left; height: 30px; width: 530px; font-family: Calibri, Arial; font-size: 14pt; font-weight:bold; color:#ffffff; text-align: center; vertical-align: middle; border-style: solid; border-bottom-left-radius: 7px; border-bottom-right-radius:7px; border-width: 0px 2px 3px 1px; border-color: #c6c6c6 #c6c6c6 #888888 #c6c6c6;}
div.q {float: left; vertical-align:top; background-color: #fffce7; border-style: solid; border-top-left-radius: 10px; border-top-right-radius:10px; border-width: 1px 2px 0px 1px; border-color: #fff8c4 #fff8c4 #ece39C#fff8c4; width: 90px; height: 60px; color:#c6c6c6;}
div.qCurrent {float: left; vertical-align:top; border-style: solid; border-top-left-radius: 10px; border-top-right-radius:10px; border-width: 1px 2px 0px 1px; border-color: #c6c6c6 #c6c6c6 #666666 #c6c6c6; width: 248px; height: 60px; color:#3f3f3f;}
div.qcontentTbl {float: left; align: center; width: 440px;}
div.qcontentTbl {float: left; align: center; width: 440px;}
div.qspacerRow {float: left; width: 4px; height: 60px; padding:0px}
div.quarterTitle {position: relative; top: 10px; text-align:center; font-family: Corbel; font-size: 14px;}
div.quarterTitle:hover {position: relative; top: 10px; text-align:center; font-family: Corbel; font-size: 14px; border-radius: 5px; border: solid; border-width: 1px 2px 2px 1px; background-color :#fff; border-color: #fff8c4 #fff8c4 #ece39C#fff8c4;}
div.quarterText {position: relative; top: 10px; text-align:center; font-family: Corbel; font-size: 14px;}
div.quarterTitleCurrent {position: relative; top: -1px; text-align: center; font-family: Corbel; font-size: 32px; color:#ffffff;}
div.quarterTextCurrent {position: relative; top: -1px; text-align:center; vertical-align:top; font-family: Corbel; font-size: 14px; color:#ffffff; line-height: 110%;}
div.resource {z-index: 2; left; clear: both; width: 530px; height: 30px; background-color: #fffce7; border-style: solid; border-radius: 7px; border-width: 1px 2px 3px 1px; border-color: #fff8c4 #fff8c4 #ece39C#fff8c4; font-family: Corbel, Arial;}
div.resourcesVideo{position: absolute; left: 85px;font-family: Corbel; font-size:11px; font-weight: bold; text-align: left; line-height: 70%; }
div.resourcesEE {position: absolute; left: 220px;font-family: Corbel; font-size:11px; font-weight: bold; line-height: 23px; text-align: left; line-height: 70%;}
div.resourcesMgr {position: absolute; left: 355px;font-family: Corbel; font-size:11px; font-weight: bold; text-align: left; line-height: 70%;}
div.subHeaderBlurb {position: absolute; top: 80px; left: 130px; width: 400px; font-family: Segoe Print; font-size:12px; color:#3f3f3f;}
img.docIcon {vertical-align: middle; height: 23px; border: 0;}
img.docIconSmall {position: relative; left: 8px; height: 20px; border: 0;}
img.emailimg {height: 20px; border:0;}
img.empHdLn {position: absolute; top: 27px; right: 40px; width: 2px; height: 10px;}
img.mgrHdLn {position: absolute; top: 13px; right: 12px; width: 2px; height: 26px;}
img.playButton {vertical-align: middle; height: 20px; border: 0;}
img.helpicon {float: left; height:20px; border:0;}
span.resourceTxt {width: 100px; height: 20px; vertical-align: middle;}
table.contactsGrid {width:500px;}
table.helpTbl {width:500px; border-color:#FFFFFF; border-radius: 10px; border-width: 1px; border-style: dotted; padding: 0px; border-spacing: 0px}
table.hlpCtgTbl {padding: 0px; border-spacing: 0px; border-width: 0px; border-radius: 10px; width: 100%; background-color: #fffce7;}
table.maintable {position: absolute; top: 0px; left: 0px; width: 530px; border-width: 0px; border-color: #000; padding: 0px; border-spacing: 0px;}
td.actnMgrSpc {padding-left: 5px;}
td.actnVertLn {border-right: dotted 1px; border-color: #ededed; padding-left: 5px; padding-right: 5px;}
td.contacts {color:#FFFFFF; text-align: left; vertical-align:top; margin: 20px; border-color:#a0a6a7; border-bottom: dotted 1px; font-family: Corbel; font-size: 12px;}
td.contactshdr {color:#FFFFFF; text-align: left; vertical-align:top; margin: 20px; border-color:#a0a6a7; border-bottom: dotted 1px; font-family: Corbel; font-weight: bold; font-size: 12px;}
td.gridheader {position: relative; font-family: Corbel; font-size:12px; font-weight: bold; background:url("images/ActionTableGradient.gif"); background-repeat: repeat; background-size: 462px 35px;}
td.gridsubheader {font-family: Corbel; font-size:13px; font-weight: bold; color: #3f3f3f; padding-right: 4px;}
td.gridtext {font-family: Corbel; font-size:12px; color: #000000; height: 35px;}
td.divider {border-bottom: dotted 2px; border-color: #c5c5c5 #ededed #c5c5c5 #ededed;}
td.header {width: 530px; padding: 0px;}
td.helpborder {border-right: double 3px; border-color: #fc1919; width: 35px;}
td.helpList {z-index: 5; background-color: #fffce7; border-style: solid; border-radius: 10px; border-width: 1px 2px 3px 1px; border-color: #fff8c4 #fff8c4 #ece39C#fff8c4; font-family: Corbel; font-size:8px; font-weight:normal; vertical-align: top; width: 400px; height: 100%;}
td.linksList {vertical-align:top;}
tr.helpItem {font-family: Corbel; font-size:12px; font-weight:normal; vertical-align: middle; height: 25px;}
tr.helpItemHiglight {font-family: Corbel; font-size:12px; font-weight:normal; vertical-align: middle; height: 25px; background-color: #FFFEF4; cursor:pointer; border-radius: 10px; border-width: 1px 2px 3px 1px;}
ul, li {list-style-type: circle; padding: 0; margin-left: 10; font-weight: bold;}
Да, я бы сказал, что вам нужно настроить JS Fiddle, если это возможно, или, по крайней мере, попытаться структурировать код в вашем вопросе. – thecraighammond
Извинения, он не форматировался должным образом. Должно быть исправлено сейчас. – Rohith
Я предлагаю вам снять с кода, который вы предоставили, какие-то несвязанные вещи, такие как div-parent divs или css, не нужны для вашего вопроса. – Onilol