• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1158
  • Last Modified:

relatively positioned div not expanding container div

i ahve a nested div, the inner div is positioned at 400px inside a 558px parent div with a bg image, ona click event content is added to the child div but the parent div does not expand to accomodate teh div, cant seem to figure it out.

tia

0
James Rodgers
Asked:
James Rodgers
  • 2
1 Solution
 
rbudjCommented:
Please post code.  This cannot be troubleshooted without either code or a link to your page.
0
 
James RodgersWeb Applications DeveloperAuthor Commented:
cant post a link and this is the best i can do for code, css is complete, page code is complete-minus images and the js is just dummied up to prevent errors
the div with teh gold border(just for debugging) is the container div which has a bg image 960X558 teh child div is positioned at 400px from top and has a black border and no content, when clicking a button the content is added, actual page uses an ajax call to populate currently using test content and is simulated by the js in the code

when the content is added the black border div expands with the content but it overlaps the content blow the gold bordered div, i need it to push teh gold bordered div down to accomodate the new contetn...whech may b 5 lines or may be 100(not likely but you get the idea)

thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<title>The Voila Institute</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Expires" content="-1">
	<meta name="TITLE" content="The Voila Institute">
	<meta name="DESCRIPTION" content="Voila ">
	<meta name="KEYWORDS" content="hair, styling, salon, education, spa, colouring, fashion">
	<meta name="OWNER" content="Voila Institute">
	<meta name="AUTHOR" content="Radii Web & Print Production">
	<meta name="RATING" content="General">
	<meta name="ROBOTS" content="index,follow">
 
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" language="javascript">
var str='<h3>About the School	</h3><img src="/images/sml_intranet.jpg" class="imgTabDesc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras condimentum rhoncus arcu. Aliquam massa tellus, cursus et, dignissim eget, auctor sit amet, libero.<br>  <br><br><br><br><br><br><br><br><br><br><br><br><br><div class="clearBoth"></div>';
function getSource(sSource, eTarget){
	
    document.getElementById(eTarget).innerHTML=str;
 
}
 
function setImage(lstParentID, objOn){
	var y=1;
	var iStep=2;
	//change indexing for IE - Opera also supports document.all, so check that it is not opera!! 
	if(document.all && navigator.appName.toLowerCase().indexOf('opera')==-1){
		y=0;
		iStep=1;
	}	
	for (x=y; x<document.getElementById(lstParentID).childNodes.length;x+=iStep){
		document.getElementById(lstParentID).childNodes[x].firstChild.src=document.getElementById(lstParentID).childNodes[x].firstChild.src.replace(/on|hv/i,'nm');
	}
	objOn.src=objOn.src.replace(/on|hv|nm/i,'on');
	sTemp=objOn.src
}
 
</script>
<style>
body {
	font-family:Arial, Helvetica, sans-serif;
	color:#333333;
	background-color:#383838;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin:0px;
	padding:0px;
	font-size:80%;
}
 
a {
	color:#0066CC;
}
 
a:visited {
	color:#0066CC;
}
 
a:hover {
	color:#0033CC;
}
 
 
p {
	padding: 0px;
	margin:0px 0px 16px 0px;
	line-height:130%;
}
 
.bgMain {
	background-image:url(../images/bg_main.gif);
	background-repeat:repeat-y;
	width:976px;
}
 
.bgCopyright {
	background-repeat:no-repeat;
	width:976px;
	height:39px;
}
 
.bgFooter {
	background-image:url(../images/bg_footer.gif);
	background-repeat:no-repeat;
	width:976px;
	height:39px;
}
 
.contentContainer {
	width:880px;
	padding:20px 48px 16px 48px;
	text-align:left;
}
 
.headerContainer {
	width:976px;
	padding:0px 16px 16px 16px;
}
 
.footerContainer {
	padding:4px 16px 16px 16px;
}
 
.pNavContainer {
	width:966px;
	padding:10px 0px 8px 0px;
	text-align:right;
}
 
.pNav {
	padding: 0px 16px 0px 0px;
}
 
.fNav {
	font-size:11px;
	color:#333333;
	text-decoration:none;
	padding: 0px 3px 0px 3px;
}
 
.fNav a.fNav, a.fNav:visited {
	color:#333333;
	text-decoration:none;
}
 
.fNav a, a:hover {
	text-decoration:underline;
}
 
 
.clearBoth {
	clear:both;
}
 
.caseImage {
	float:right;
	width:240px;
	height:160px;
	margin:0px 0px 10px 10px;
	border:1px solid black;
}
 
.caption {
	font-size:80%;
	text-align:right;
}
 
 
h1 {
 
}
 
h2 {
	font-size:110%;
}
 
h3 {
	font-family:Tahoma,Arial,Verdana,sans-serif;
	font-size:120%;
	font-weight:bold;
	margin:5px 0px 5px 0px;
	padding:5px 0px 5px 0px;
	clear:both;
	color:#000000;
}
 
h4 {
	font-family:Tahoma,Arial,Verdana,sans-serif;
	font-size:100%;
	font-weight:bold;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	clear:both;
	color:#000000;
}
 
.dividerH {
	border-top-style:solid;
	border-top-color: #cccccc;
	border-top-width:1px;
	margin:10px 0px 0px 0px;
}
 
.tabDescription {
	margin:0px 0px 0px 0px;
}
 
.imgLanding {
	bottom:0px;
	right:0px;
	float:right;
	width:290px;
	/* border-style:solid;
	border-width:1px;
	border-color:#cccccc; */
}
 
.imgTabDesc {
	bottom:0px;
	right:0px;
	float:right;
	margin:0px 0px 16px 16px;
	width:160px;
}
 
.moreInfo {
	padding:10px 0px 0px 0px;
}
 
 
/* lists */
 
 
ul {
	width:70%;
	margin:0px;
	padding:10px 0px 0px 20px;
	line-height:150%;
}
 
 
ul.landing {
	margin:0px;
	padding:10px 0px 0px 20px;
	line-height:150%;
	font-weight:bold;
	color:#ff0000;
}
 
ul.landing a:link {
	color:#ff0000;
}
 
/* end lists */
 
.introCopy {
	font-family:Tahoma,Arial,Verdana,sans-serif;
	font-size:110%;	
	color:#333333;
	line-height:130%;
	width:100%;
	margin:10px 0px 10px 0px;
}
 
.introHeader {
	font-family:Tahoma,Arial,Verdana,sans-serif;
	font-size:150%;	
	font-weight:bold;
	color:#000000;
	line-height:130%;
}
 
.wrapperContent {
	width:100%;
}
 
.wrapperColumn1 {
	width:65%;
	float:left;
}
 
.wrapperColumn2 {
	width:30%;
	float:right;
	vertical-align:text-bottom;
}
 
.columnDivider {
	float:left;
	width:40px;
	height:400px;
	margin:10px 0px 10px 0px;
	background: url('/images/columnDivider.gif') repeat-y;
}
 
.divClearFloat, .clsDivClearBoth {
	clear:both;
	height:15px;
}
 
.clsDivFormLabel{
	width:150px;
	float:left;
}
 
.clsDivFormInputText, .clsDivFormInputTextArea{
	float:left;
}
 
/* Links */
 
p.moreInfo_wrap {
	float: left;
}
 
a.moreInfo {
	font-size: 90%;
	font-family:Tahoma,Arial,Verdana,sans-serif;
	color: #1d1b19;
}
 
a.moreInfo:hover {
	color: #2d6ea8;
}
 
/* end links */
 
 
#divContentWrapper{
	width:959px; /* change this width to desired page width; contents will scale */	
	margin:auto;	/* 0 for left alignment - auto for center alignment */
	text-align:left;	
}
 
#divPageHeader {
	position:relative;
	width:100%;
	height:110px;
	text-align:center;
	color:#000000;
	padding-top:0px;
}
 
#divLogoLeft {
	position:absolute;
	left:0;
	top:0;
}
#divTagLineLeft {
	font-weight:bolder;
}
 
#divLogoRight {
	position:absolute;
	right:0;
	top:0;
	width:460px;
	height:102px;
	background: url('/images/hNav_background.gif') no-repeat top center;
}
#divGlobalNav {
	position:relative;
	right:0;
	top:0;
	width:460px;
	height:102px;
}
 
 
 
#divTagLineRight {
	font-weight:bolder;
}
 
#divHeaderName {
	margin-top:10px;
	font-size:24pt;
	font-weight:bolder;
}
 
 
#divMainNav {
	height:25px;
	position:absolute;
	text-align:center;
	left:0px;
	bottom:0px;
	width:100%;
	z-index:100;
}
 
 
#divMainContent {
	padding:0px 0px 0px 0px;
	position:relative;
	width:100%;
	z-index:0;
	min-height:400px;
}
 
#divSecondNav {
	position:relative;
	z-index:2;
	padding:0px 0px 0px 0px;
	background: url(/images/sNav_filler.gif) repeat-x;
	height:23px;
	 /*float:left; left side menu layout */
 
}
#divSecondNavInner {
	position:relative;
	padding:0px 0px 0px 0px;
	top:0px;
	left:0px;
	z-index:2;
	height:23px;
}
 
.tdSecondNav {
	padding:0px;
	margin:0px;
	color:black;
	text-align:left;
	position:relative;
	z-index:2;
}
 
.tdSecondNav a{
 
 
}
 
#divTertNav{
	margin-top:10px;
 
} 
 
 
#divPageContentNarrow {
	padding-top:0px;
	width:98%;
	color:#000000;
	/*float:right;  left side menu layout */    
}
 
#divPageContentWide {
	padding-top:0px;
	width:98%;
	color:#000000;
	float:right; /* left side menu layout */     
}
 
#divBreadCrumbs {
	position:relative;
	width:100%;
	font-size:8pt;
	padding:0 0 15px 0;
	color:red;
	padding-left:0px;
	margin-top:20px;
}
 
#divPageContentHeader {
	position:relative;
	width:100%;
	font-size:18pt;
	font-weight:bold;
	padding:0px 0px 0px 0px;
	margin:0px;
}
 
#divPageContentBody {
	padding-top:15px;
}
 
#divPageFooter {
	position:relative;
	width:100%;
	height:80px;
	text-align:center;
	color:#000000;
	font-weight:bolder;
	border-top:1px solid #999999;
	padding-top:5px;
	margin-top:10px;
}
 
#divCopyright {
	position:relative;
	bottom:0px;
	left:0;
	color:#00008B;
	text-align:right;
	width:100%;
	font-size:12pt;
	display:block;
}
 
#divLastUpdated {
	color:red;
	font-size:8pt;
	text-align:center;
}
 
tr {
	vertical-align:top;
}
 
/* Main Menu Styles */
 
.sMainMenu1{
	border:	none;
} 
 
.sMainMenu2, .sMainMenu3 {
	border:1px solid black;
	background-color:white;
}
 
.sMainMenuText1, .sMainMenuText2, .sMainMenuText3 {
	color:black;
	font-size: 8pt;
	text-decoration:none;
}
 
/* Form Styles */
 
 
 
.clsFormContainer {
	padding:20px 0 0 0 ;
}
 
.clsFormLabel {
	width:30%;
	float:left;
}
 
#divEditFormLastNameInput, #divEditFormFirstNameInput, #divEditFormGroupNameInput {
	width: 25%;
	float:right;
	
}
 
 
#divFormButtonCancel, #divFormButtonReset, #divFormButtonSubmit{
	width:25%;
	margin:0;
	float:left;
	text-align:center;
}
 
.clsFormSelInput, .clsFormTextInput, .clsFormFileInput {
	width:35%;
	float:left;
	margin:0;
	border:2px solid black;
}
.clsFormButton {
	width:80px;
}
 
.clsDivider {
	margin-top:15px;
	margin-bottom:10px;
	border-top: 3px double black;
	
}
 
.clsPageContainer {
	padding-top:10px;
}
 
.clsPageSubHeading {
	font-size:14pt;
	font-weight:bold;
}
#divTabbingContainer {
	min-height:400px;
	overflow-y:auto;
	position:relative; 
}
 
#divSettingsContainer {
	position:relative; 
 
} 
 
.clsSectionHeaderOn {
	background-color:#ffffff;
	font-size:10pt;
	color:black;
	width:100px;
	padding-left:5px;
	border-left:2px solid black;
	border-top:2px solid black;
	border-right:2px solid black;
}
 
.clsSectionHeaderOff {
	background-color:#ffffff;
	font-size:10pt;
	color:black;
	width:100px;
	padding-left:5px;
	border-left:1px dotted black;
	border-top:1px dotted black;
	border-right:1px dotted black;
	border-bottom:2px solid black;
}
.clsSectionHeaderOff:hover {
	background-color:#ffffff;
}
 
.clsSubSectionOn {
	background-color:#ffffff;
	font-size:10pt;
	color:black;
}
 
.clsEmphaticSmall {
	font-size:8pt;
	color:red;
	font-weight:bold;
}
 
.clsDivSpacer {
	height:20px;
}
 
.clsFormSubHeading {
	font-size:10pt;
	font-weight:bold;
	border-bottom:1px dashed black;
}
 
#tabFaxInBox th, #tabVoicemailInBox th{
	padding-top:5px;
	border-bottom:2px double black;
	text-align:center;
	vertical-align:top;
}
 
#tabFaxInBox td, #tabVoicemailInBox td{
	padding-top:5px;
}
 
#divAdminTools, #divSupportTools, #divMyTools {
	margin-right:25px;
	
}
 
.clsToolsHeader {
	padding-bottom:15px;
}
 
form, .clsText, .clsSubmit{
	display:inline;
	white-space : nowrap;
}
 
#divClientExtensions {
	float:left;
	width:20%;
	border:1px solid red;
}
.clsActiveExtension input {
	margin:0;
	padding:0;
	white-space : nowrap;
}
#divActiveExtensionsHeader {
	padding-bottom:10px;
	
}
.clsActiveExtension {
	padding:3px 5px 2px 10px;
	font-size:10pt;
}
 
#divInActiveExtensionsHeader {
	padding-bottom:10px;
	
}
.clsInActiveExtension {
	padding:3px 5px 2px 10px;
	font-size:10pt;
}
 
.clsTextInput {
	border:2px solid black;
}
 
.clsFromSectionSubHeading {
	font-weight:bold; 
	padding-bottom:5px;
}
 
.clsWorkWithExt {
	width:184px;
	color:white;
	background-color:#0000cd;
}
 
.clsButAssignExt {
	width:184px;
	color:white;
	background-color:#ff6347;
}
 
#divCallout {
	float:right;
	width:120px;
	height: 200px;
	padding:5px;
	font-size:10pt;
	border-left:1px solid black;
}
#divCallout div {
	padding: 2px 0 3px 0;
}
#divCallout div a {
	text-decoration:none;
}
 
a img {
	border:0;
 
}
 
#imgPageTitle{
	position:relative;
	z-index:1;
}
 
.clsTinyMCESection{
	margin-bottom:10px;
}
 
.clsClearBoth{
	clear:both;
}
 
/* begin tab menu style */
/* base container style */
#divTabContainer{
	width:100%;
}
 
/* content window (div) where ajax response to be written */
#divTabContent{
	/*height:300px;
	padding:10px;
	position:relative;*/
	/*border:1px solid gray; border should to be same color as clsTabOff bg colour for best look */
}
 
/* tabs are list items - set list style */
#ulTabList {
	margin:0;
	list-style-type:none;
	padding:0;
}
 
/* div containing tab list items, having them in this div allows for ease of placement 
allows overlapping placement of menu item layer/div with content layer/div */
#divTabList{
	position:relative;
	z-index:10;
}
 
/* list item style - mainly intended to be used if tabs are text but margins can be important */
#ulTabList li{
	width:100px;
	float:left;
	margin:0 5px -1px 0px;
	border:1px solid gray;
	border-bottom:none;
	text-align:center;
	list-style-type:none;
	padding:0;
	cursor:pointer;
}
 
/* only used for text tabs - set 'on' state style */
.clsTabOn{
	background-color:#ffffff;
	color:#000000;
	cursor:pointer;
}
 
/* only used for text tabs - set 'off' state style */
.clsTabOff{
	background-color:gray;
	color:#ffffff;
	cursor:pointer;
}
 
/* end tab menu style */
 
</style>
</head>
 
<body>
 
<div align="center" id="mainContainer">
 
<div class="headerContainer">
 
<div style="float:left;position:relative;left:30px;top:20px;">
	<a href="/p_home.cfm"><img src="/images/header_logo.gif" alt=""></a>
</div>
 
<div class="clearBoth"></div>
</div> <!-- end headerContainer -->
 
<div class="pNavContainer">
	<a href="/p_home.cfm" onmouseover="MM_swapImage('pNav_home','','/images/pNav_home_hv.gif');" onmouseout="MM_swapImage('pNav_home','','/images/pNav_home_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_home_nm.gif" border="0" name="pNav_home"></a>
	<a href="/p_about.cfm" onmouseover="MM_swapImage('pNav_about','','/images/pNav_about_hv.gif');" onmouseout="MM_swapImage('pNav_about','','/images/pNav_about_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_about_nm.gif" border="0" name="pNav_about"></a>
	<a href="/p_vision.cfm" onmouseover="MM_swapImage('pNav_vision','','/images/pNav_vision_hv.gif');" onmouseout="MM_swapImage('pNav_vision','','/images/pNav_vision_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_vision_nm.gif" border="0" name="pNav_vision"></a>
	<a href="/p_program.cfm" onmouseover="MM_swapImage('pNav_program','','/images/pNav_program_hv.gif');" onmouseout="MM_swapImage('pNav_program','','/images/pNav_program_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_program_nm.gif" border="0" name="pNav_program"></a>
	<a href="/p_services.cfm" onmouseover="MM_swapImage('pNav_services','','/images/pNav_services_hv.gif');" onmouseout="MM_swapImage('pNav_services','','/images/pNav_services_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_services_nm.gif" border="0" name="pNav_services"></a>
	<a href="/p_gallery.cfm" onmouseover="MM_swapImage('pNav_gallery','','/images/pNav_gallery_hv.gif');" onmouseout="MM_swapImage('pNav_gallery','','/images/pNav_gallery_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_gallery_nm.gif" border="0" name="pNav_gallery"></a>
	<a href="/p_contact.cfm" onmouseover="MM_swapImage('pNav_contactus','','/images/pNav_contactus_hv.gif');" onmouseout="MM_swapImage('pNav_contactus','','/images/pNav_contactus_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_contactus_nm.gif" border="0" name="pNav_contactus"></a>
</div> <!-- end pNavContainer -->
 
<div class="bgMain" id="divBgMain">
 
<div class="contentContainer">
 
<div class="wrapperContent">
	
	<div class="wrapperColumn1">
 
<div style="position:relative;top:-20px;left:-40px;background:#ffffff; background-image: url('./images/landing_home.jpg');background-repeat:no-repeat;background-position:center top; width:960px; min-height:558px;border:1px solid gold; z-index:0;">	<!-- border is just dtil issue resolved -->
 
	<div id="divTabContainer" style="position:relative; top:400px;left:0; width:100%;">
	
		<ul id="ulTabList" style="margin-left:15px;">
			<li onclick="setImage(this.parentNode.id, this.childNodes[0])"><img id="img1" src="/images/pNav_corporate_nm.gif" onmouseover="sTemp=this.src;if(this.src.indexOf('_on')==-1){this.src='/images/pNav_corporate_hv.gif'}" onmouseout="this.src=sTemp;" onclick="getSource('about.school','divTabContent')"></li>
			<li onclick="setImage(this.parentNode.id, this.childNodes[0])"><img id="img2" src="/images/pNav_corporate_on.gif" onmouseover="sTemp=this.src;if(this.src.indexOf('_on')==-1){this.src='/images/pNav_corporate_hv.gif'}" onmouseout="this.src=sTemp;" onclick="getSource('about.course','divTabContent')"></li>
			<li onclick="setImage(this.parentNode.id, this.childNodes[0])"><img id="img3" src="/images/pNav_corporate_hv.gif" onmouseover="sTemp=this.src;if(this.src.indexOf('_on')==-1){this.src='/images/pNav_corporate_hv.gif'}" onmouseout="this.src=sTemp;" onclick="getSource('our.mission','divTabContent')"></li>
		</ul>
		<div class="clsClearBoth"></div>
	
		<div id="divTabContentContainer">
			<div id="divTabContent" class="clsTabContent" style="position:relative;border:1px solid black"> <!-- border is for testing only --->
				
			</div>
			<div style="clear:both;"></div>
		</div>
	</div>
</div>
 
	</div> <!-- end wrapperColumn1 -->
 
</div> <!--  end wrapperContent -->
 
<div class="divClearFloat"></div>
 
<div class="dividerH"></div>
 
<div class="wrapperContent">
	
<div class="wrapperColumn1">
	
 
</div> <!-- end first column -->
 
	
	
	<div class="wrapperColumn2">
	
	
	</div> <!-- end second column -->
 
</div> <!--  end wrapper -->
 
<div class="divClearFloat"></div>
 
</div> <!-- end contentContainer -->
 
 
</div> <!-- end bgMain -->
 
<div class="bgFooter">
 
<div class="footerContainer">
<div style="float:left;">
<span class="fNav"></span>
</div>
 
<div style="float:right;">
<a href="/p_home.cfm" class="fNav">Home</a>
<a href="/p_about.cfm" class="fNav">About</a>
<a href="/p_vision.cfm" class="fNav">Our Vision</a>
<a href="/p_program.cfm" class="fNav">The Program</a>
<a href="/p_services.cfm" class="fNav">Services</a>
<a href="/p_gallery.cfm" class="fNav">Gallery</a>
<a href="/p_advanced.cfm" class="fNav">Alumni Login</a>
<a href="/p_contact.cfm" class="fNav">Contact Us</a>
</div>
 
<div class="clearBoth"></div>
 
 
</div>	<!-- end fNav -->
 
 
 
</div>	<!-- end wrapper -->
 
<div class="bgCopyright">
 
<div class="footerContainer">
<div style="float:left;">
<span class="fNav"><img src="/images/fNav_copyright.gif" alt=""></span>
</div>
 
<div style="float:right;">
	<img src="/images/fNav_address.gif" alt="">
</div>
 
<div class="clearBoth"></div>
 
 
</div>	<!-- end fNav -->
 
 
</body>
</html>

Open in new window

0
 
James RodgersWeb Applications DeveloperAuthor Commented:
figured it out,kinda funny tho

because i placed the inner div at 400px the browser was still placing it at 0,0 and adjusting teh psotion so when i expanded teh div because it did not go over 558px in height it did not push down the content below the containing div not sure if that makes any sense but i fixed it by placing a spacer div 400px in height rather than use css positioning and it now pushes the container out when the inner div expands


<div style="position:relative;top:-20px;left:-40px;background:#ffffff; background-image: url('./images/landing_home.jpg');background-repeat:no-repeat;background-position:center top; width:960px; min-height:558px;border:3px solid red;">	
			<div id="divImageSpacer" style="height:400px;"></div>
			<div id="divTabContainer" style="">
				<ul id="ulTabList" style="margin-left:15px;">
					<li onclick="setImage(this.parentNode.id, this.childNodes[0])"><img id="img1" src="/images/pNav_corporate_nm.gif" onmouseover="sTemp=this.src;if(this.src.indexOf('_on')==-1){this.src='/images/pNav_corporate_hv.gif'}" onmouseout="this.src=sTemp;" onclick="getSource('about.school','divTabContent')"></li>
					<li onclick="setImage(this.parentNode.id, this.childNodes[0])"><img id="img2" src="/images/pNav_corporate_on.gif" onmouseover="sTemp=this.src;if(this.src.indexOf('_on')==-1){this.src='/images/pNav_corporate_hv.gif'}" onmouseout="this.src=sTemp;" onclick="getSource('about.course','divTabContent')"></li>
					<li onclick="setImage(this.parentNode.id, this.childNodes[0])"><img id="img3" src="/images/pNav_corporate_hv.gif" onmouseover="sTemp=this.src;if(this.src.indexOf('_on')==-1){this.src='/images/pNav_corporate_hv.gif'}" onmouseout="this.src=sTemp;" onclick="getSource('ourVision.mission','divTabContent')"></li>
				</ul>
				<div class="clsClearBoth"></div>
				<div id="divTabContentContainer" style="border:1px solid purple">
					<div id="divTabContent" class="clsTabContent" style="border:1px solid black">
					</div><!--- end divTabContent --->
				</div><!--- end divTabContentContainer --->
			</div><!--- end divTabConatainer --->
		</div><!--- end image div --->

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now