[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 411
  • Last Modified:

streching div with scrollbar

Hello
what i try to do and fail is this:

iwant that the div listOfCats will be streched all over the page height and if the content of it's is more then the page height - to have it scrolling. in safari browser it seems to work but not in IE or FF.
css:
#listOfCats {margin:0 8px 0 8px;width:95%;height:98%;overflow-x:hidden; overflow-y:auto;background:#434343;}
#listOfCats a { text-decoration:none;color:black;}
.mainMenuTable { width:220px;padding:0 5px 0 5px;}
 
 
 
<body>
	
	<table height="100%" width="100%" bgcolor="white">
		<tr valign="top">
			<td height="80" colspan="2" bgcolor="black"><img src="1.jpg" alt="" /></td>
		</tr>
		<tr valign="top">
			<td height="70" colspan="2" bgcolor="#434343"><div id="dashboard"></div></td>
		</tr>
		<tr valign="top">
			<td width="230" valign="top"; bgcolor="#434343" valign="top" overflow:auto;>
				<table width="100%" height="100%" style="overflow:auto;">
					<tr valign="top"><td style="background:url('images/rightMenuTop.gif'); background-repeat:no-repeat; height:12px;" valign="top"></td></tr>
					<tr valign="top"><td style="border-bottom:2px solid #628B41;background:url('images/rightMenuBG.gif');background-repeat:repeat-y;" height="30" valign="top" align="center">
						<a href="javascript:reloadPage('dashboard/generalSettings.php','','dashboard');changeClassMenu('mainBtnGeneral','icons/mainBtnGeneralOn.png');hideByID('toHideForTop');" id="rmGenSettings" class="greenRightMenuLink"><img src="icons/mainBtnGeneral.png" id="mainBtnGeneral" alt="blah" title="blah"/></a> 
						<a href="javascript:reloadContentDiv();changeClassMenu('mainBtnContent','icons/mainBtnContentOn.png');hideByID('toHideForTop');" class="whiteRightMenuLink" id="rmContent""><img src="icons/mainBtnContentOn.png" id="mainBtnContent" alt="blah"  title="blah"/></a>
						<a href="javascript:reloadEcom();changeClassMenu('mainBtnECom','icons/mainBtnEComOn.png');hideByID('toHideForTop');" id="rmEcom" class="whiteRightMenuLink"><img src="icons/mainBtnECom.png" id="mainBtnECom" alt="blah" title="blah"/></a>
						<a href="javascript:reloadPage('dashboard/seo.php','','dashboard');changeClassMenu('mainBtnSeo','icons/mainBtnSeoOn.png');hideByID('toHideForTop');" id="rmMarketting" class="whiteRightMenuLink"><img src="icons/mainBtnSeo.png" id="mainBtnSeo" alt="blah" title="blah"/></a>
					</td></tr>
					<tr valign="top"><td style="background:url('images/rightMenuBG.gif'); background-repeat:repeat-y;overflow:auto;" o valign="top" ><div id="listOfCats" style="position:fixed"></div></td></tr>
					<tr valign="top"><td style="background:url('images/rightMenuBtm.gif'); background-repeat:no-repeat; height:14px;" valign="top"></td></tr>
				</table>
			</td>
			<td bgcolor="white" ><div id="content"><!-- --></div></td>
		</tr>
	</table>

Open in new window

0
sd1sd1
Asked:
sd1sd1
  • 4
  • 3
1 Solution
 
OnthraxCommented:
Your HTML is a little messy. There are some tags incorrectly closed and such..

This will accomplish what you are after though.. although I recommend cleaning it up a bit :)

Good Luck

<style>
#listOfCats {
	margin:0 8px 0 8px;
	width:95%;
	height:65%;
	overflow-x:hidden;
	overflow-y:auto;
	background:#434343;
}
*html #listOfCats {
	height:100%;
}
 
#listOfCats a {
	text-decoration:none;
	color:black;
}
.mainMenuTable {
	width:220px;
	padding:0 5px 0 5px;
}
</style>
<body>
<table height="100%" width="100%" style="border:1px solid red;">
<tr>
<td height="30%" style="border:1px solid green">
<table width="100%" bgcolor="white">
  <tr valign="top">
    <td height="80" colspan="2" bgcolor="black"><img src="1.jpg" alt="" /></td>
  </tr>
  <tr valign="top">
    <td height="70" colspan="2" bgcolor="#434343"><div id="dashboard"></div></td>
  </tr>
  <tr valign="top">
    <td width="230" valign="top"; bgcolor="#434343" style="overflow:auto;">
    	<table width="100%" style="overflow:auto;">
        <tr valign="top">
          <td style="background:url('images/rightMenuTop.gif'); background-repeat:no-repeat; height:12px;" valign="top"></td>
        </tr>
        <tr valign="top">
          <td style="border-bottom:2px solid #628B41;background:url('images/rightMenuBG.gif');background-repeat:repeat-y;" height="30" valign="top" align="center">
          	<a href="javascript:reloadPage('dashboard/generalSettings.php','','dashboard');changeClassMenu('mainBtnGeneral','icons/mainBtnGeneralOn.png');hideByID('toHideForTop');" id="rmGenSettings" class="greenRightMenuLink"><img src="icons/mainBtnGeneral.png" id="mainBtnGeneral" alt="blah" title="blah"/></a> 
            <a href="javascript:reloadContentDiv();changeClassMenu('mainBtnContent','icons/mainBtnContentOn.png');hideByID('toHideForTop');" class="whiteRightMenuLink" id="rmContent"><img src="icons/mainBtnContentOn.png" id="mainBtnContent" alt="blah"  title="blah"/></a> 
            <a href="javascript:reloadEcom();changeClassMenu('mainBtnECom','icons/mainBtnEComOn.png');hideByID('toHideForTop');" id="rmEcom" class="whiteRightMenuLink"><img src="icons/mainBtnECom.png" id="mainBtnECom" alt="blah" title="blah"/></a> <a href="javascript:reloadPage('dashboard/seo.php','','dashboard');changeClassMenu('mainBtnSeo','icons/mainBtnSeoOn.png');hideByID('toHideForTop');" id="rmMarketting" class="whiteRightMenuLink"><img src="icons/mainBtnSeo.png" id="mainBtnSeo" alt="blah" title="blah"/></a> 
        	</td>
        </tr>
        <tr valign="top">
          <td style="background:url('images/rightMenuBG.gif'); background-repeat:repeat-y;overflow:auto;" o valign="top" >
          	
          </td>
        </tr>
        <tr valign="top">
          <td style="background:url('images/rightMenuBtm.gif'); background-repeat:no-repeat; height:14px;" valign="top"></td>
        </tr>
      </table></td>
    <td bgcolor="white" ><div id="content">
        <!-- -->
      </div></td>
  </tr>
</table>
</td>
</tr>
<tr>
<td height="70%" valign="top">
<div id="listOfCats" style="position:fixed; border:1px solid orange">dfsgdsfgdfgdgf
            dfsg<br>
            dsfgdsfg<br>
            dsfg<br>
            dsfg<br>
            gdfs<br>
            dfsg<br>
            dfsgdsfg<br>
            dfsgdfs<br>gds
            gdf<br>
            g<br>
            dfsgdsfg<br><br>
            dfsg<br>
            dsfgdsfg<br>
            dsfg<br>
            dsfg<br>
            gdfs<br>
            dfsg<br>
            dfsgdsfg<br>
            dfsgdfs<br>gds
            gdf<br>
            g<br>
            dfsgdsfg<br><br>
                        dfsg<br>
            dsfgdsfg<br>
            dsfg<br>
            dsfg<br>
            gdfs<br>
            dfsg<br>
            dfsgdsfg<br>
            dfsgdfs<br>gds
            gdf<br>
            g<br>
            dfsgdsfg<br><br>
                        dfsg<br>
            dsfgdsfg<br>
            dsfg<br>
            dsfg<br>
            gdfs<br>
            dfsg<br>
            dfsgdsfg<br>
            dfsgdfs<br>gds
            gdf<br>
            g<br>
            dfsgdsfg<br><br>            
            </div>
</td>
</tr>
</table>

Open in new window

0
 
sd1sd1Author Commented:
Hi

thanks for the help. the code is messy just because i'm playing with it.

about your solution - it does seem to work for the scrolling in the div but it's making the listOfCats div centered in the screen and after the main table. it should be  left aligned
0
 
sd1sd1Author Commented:
attached a file of how it looks and working in safari browser
Image-12.jpg
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
OnthraxCommented:
I have checked it in IE and FF and it works fine there.. I don't have safari here right now, I'll check back later from my own pc for that... stay tuned.
0
 
sd1sd1Author Commented:
Hi
it's working only in safari, not in my FF
0
 
OnthraxCommented:
As I don't have all the images, css and such it looks a little strange but the dimensions look fine in FF.

Which version of FF are you using?
Could you post the code you have now. I'll see how that works over here..
0
 
sd1sd1Author Commented:

this is my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr"  xmlns="http://www.w3.org/1999/xhtml" xml:lang="he">
<head>
	<title>TQ-Soft ToolBox - Login</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="" />
	<meta name="keyowrds" content="" />
	<meta http-equiv="cache-control" content="no-cache"> 
	<meta http-equiv="pragma" content="no-cache"> 
	<meta http-equiv="expires" content="0"> 
	<meta http-equiv="msthemecompatible" content="no" />
	<link rel="stylesheet" rev="stylesheet" href="style.css" />
	<script type="text/javascript" src="infra/functions.js"></script>
 
</head>
<body>
	<script type="text/javascript" src="infra/wz_tooltip.js"></script>
	<div id="dhtmltooltip"></div>
	<script type="text/javascript">
	var offsetxpoint=-60 //Customize x offset of tooltip
	var offsetypoint=20 //Customize y offset of tooltip
	var ie=document.all
	var ns6=document.getElementById && !document.all
	var enabletip=false
	if (ie||ns6)
	var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
	function ietruebody(){
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
	}
	
	function ddrivetip(thetext, thecolor, thewidth){
	if (ns6||ie){
	if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
	if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
	tipobj.innerHTML=thetext
	enabletip=true
	return false
	}
	}
	
	function positiontip(e){
	if (enabletip){
	var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
	var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
	//Find out how close the mouse is to the corner of the window
	var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
	var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
	
	var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
	
	//if the horizontal distance isn't enough to accomodate the width of the context menu
	if (rightedge<tipobj.offsetWidth)
	//move the horizontal position of the menu to the left by it's width
	tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
	else if (curX<leftedge)
	tipobj.style.left="5px"
	else
	//position the horizontal position of the menu where the mouse is positioned
	tipobj.style.left=curX+offsetxpoint+"px"
	
	//same concept with the vertical position
	if (bottomedge<tipobj.offsetHeight)
	tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
	else
	tipobj.style.top=curY+offsetypoint+"px"
	tipobj.style.visibility="visible"
	}
	}
	
	function hideddrivetip(){
	if (ns6||ie){
		enabletip=false
		tipobj.style.visibility="hidden"
		tipobj.style.left="0px"
		tipobj.style.backgroundColor=''
		tipobj.style.width=''
		}
	}
	document.onmousemove=positiontip
	</script>
	<table height="100%" width="100%" bgcolor="white">
		<tr valign="top">
			<td height="80" colspan="2" bgcolor="black"><img src="images/tq-net.gif" alt="" /></td>
		</tr>
		<tr valign="top">
			<td height="70" colspan="2" bgcolor="#434343"><div id="dashboard"></div></td>
		</tr>
		<tr valign="top">
			<td width="230" valign="top"; bgcolor="#434343" valign="top" overflow:auto;>
				<table width="100%" height="100%" style="overflow:auto;">
					<tr valign="top"><td style="background:url('images/rightMenuTop.gif'); background-repeat:no-repeat; height:12px;" valign="top"></td></tr>
					<tr valign="top"><td style="border-bottom:2px solid #628B41;background:url('images/rightMenuBG.gif');background-repeat:repeat-y;" height="30" valign="top" align="center">
						<a href="javascript:reloadPage('dashboard/generalSettings.php','','dashboard');changeClassMenu('mainBtnGeneral','icons/mainBtnGeneralOn.png');hideByID('toHideForTop');" id="rmGenSettings" class="greenRightMenuLink"><img src="icons/mainBtnGeneral.png" id="mainBtnGeneral" alt="General" title="General"/></a> 
						<a href="javascript:reloadContentDiv();changeClassMenu('mainBtnContent','icons/mainBtnContentOn.png');hideByID('toHideForTop');" class="whiteRightMenuLink" id="rmContent""><img src="icons/mainBtnContentOn.png" id="mainBtnContent" alt="Content Management"  title="Content Management"/></a>
						<a href="javascript:reloadEcom();changeClassMenu('mainBtnECom','icons/mainBtnEComOn.png');hideByID('toHideForTop');" id="rmEcom" class="whiteRightMenuLink"><img src="icons/mainBtnECom.png" id="mainBtnECom" alt="Customers Management" title="Customers Management"/></a>
						<a href="javascript:reloadPage('dashboard/seo.php','','dashboard');changeClassMenu('mainBtnSeo','icons/mainBtnSeoOn.png');hideByID('toHideForTop');" id="rmMarketting" class="whiteRightMenuLink"><img src="icons/mainBtnSeo.png" id="mainBtnSeo" alt="Internet Marketing" title="Internet Marketing"/></a>
					</td></tr>
					<tr valign="top"><td style="background:url('images/rightMenuBG.gif'); background-repeat:repeat-y;overflow:auto;" o valign="top" ><div id="listOfCats"></div></td></tr>
					<tr valign="top"><td style="background:url('images/rightMenuBtm.gif'); background-repeat:no-repeat; height:14px;" valign="top"></td></tr>
				</table>
			</td>
			<td bgcolor="white" ><div id="content"><!-- --></div></td>
		</tr>
	</table>
	<script type="text/javascript">
		// load the general settings and list of cats
		function reloadContentDiv() {
			var pagesNameArray = new Array('content/categoryTreeList.php','dashboard/content.php');
			var refreshElementsArray = new Array ('listOfCats','dashboard');
			reloadPageWArray(pagesNameArray,refreshElementsArray,'');
		}		
		//load the e-com
		function reloadEcom() {
			var pagesNameArray = new Array('ecom/productTypeList.php','dashboard/ecom.php');
			var refreshElementsArray = new Array ('listOfCats','dashboard');
			reloadPageWArray(pagesNameArray,refreshElementsArray,'');
		}
		function changeClassMenu(elementName,picName) {
			changePic('mainBtnGeneral','icons/mainBtnGeneral.png');
			changePic('mainBtnContent','icons/mainBtnContent.png');
			changePic('mainBtnECom','icons/mainBtnECom.png');
			changePic('mainBtnSeo','icons/mainBtnSeo.png');
			changePic(elementName,picName);
		}
		
		reloadContentDiv();
		changeClassMenu('mainBtnContent','icons/mainBtnContentOn.png');
	</script>
</body>
</html>
 
 
 
this is my css:
/* HTML Tags */
html {height:100%;margin:0;padding:0;}
body {height:100%; font-size:12px;font-family:Arial;padding:0;margin:0;background:#000;}
table {border-spacing:0; border-collapse: collapse;}
table tr th a{text-decoration:none; color:#434343;}
/*input[type="text"]  {width:97%; border:0; }*/
/*ul {padding:0 15px 0 0px; margin: 0px;}
li {border-top:1px solid #dcdcdc; white-space:nowrap;}*/
img {border:0;}
h1 {font-size:14px; padding:0; margin:0;}
button {cursor:pointer;} /* added by shai */
 
.dimmer{opacity:.70;filter:alpha(opacity='70');background:#000  no-repeat fixed center center;overflow:hidden;position:absolute;top:0;left:0;z-index:10;width:100%;height:100%}
.minisite{padding:0;margin:10px;font:13px;} 
#minisiteBox{width:720px;height:750px;border:1px solid #000;overflow:hidden;position:absolute;left:50%;top:50%;margin-left:-360px;margin-top:-350px;z-index:100;}
#minisiteBox iframe{padding:0;border:1px solid black;background:#fff;width:720px;height:750px;overflow:hidden}
 
 
/* content tables */
#contentTableList th {background:#82d43e;color:#434343; line-height:30px; border-top:0px;}
#contentTableList td {color:#434343;line-height:19px; }
#contentTableList  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#adminsTable {background:white;border:4px solid white;} 
#adminsTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#adminsTable td {color:#434343;line-height:19px; }
#adminsTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#adminsEditTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#adminsEditTable td {color:#434343;line-height:19px; }
#adminsEditTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#adminsEditTable  input {width:120px;background:#cccccc;border:1px solid #434343;height:18px;}
 
#adminsAuthTable  {background:white;}
#adminsAuthTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#adminsAuthTable td {color:#434343;line-height:19px; }
#adminsAuthTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#adminsEcomAuthTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#adminsEcomAuthTable td {color:#434343;line-height:19px; }
#adminsEcomAuthTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#generalAuthTable {background:white;}
#generalAuthTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#generalAuthTable td {color:#434343;line-height:19px; }
#generalAuthTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#customerListTable  {background:white;border:4px solid white;}
#customerListTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#customerListTable td {color:#434343;line-height:19px; }
#customerListTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#customerAddEditTable  {background:white;border:4px solid white;}
#customerAddEditTable input {background:#cccccc;border:1px solid #434343;height:18px;width:100px;}
#customerAddEditTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#customerAddEditTable td {color:#434343;line-height:19px; }
#customerAddEditTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#customersOrdersTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#customersOrdersTable td {color:#434343;line-height:19px; }
#customersOrdersTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#customersInvoicesTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#customersInvoicesTable td {color:#434343;line-height:19px; }
#customersInvoicesTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#customersCatsTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#customersCatsTable td {color:#434343;line-height:19px; }
#customersCatsTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#customersFilesTable {background:white;border:4px solid white;}
#customersFilesTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#customersFilesTable td {color:#434343;line-height:19px; }
#customersFilesTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#customersFilesAddTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#customersFilesAddTable td {color:#434343;line-height:19px; }
#customersFilesAddTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#customersRemarksTable {background-color:white;border:4px solid white;}
#customersRemarksTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#customersRemarksTable td {color:#434343;line-height:19px; }
#customersRemarksTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#licenseTable {background-color:white;border:4px solid white;}
#licenseTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#licenseTable td {color:#434343;line-height:19px; }
#licenseTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#templateTable {background-color:white;border:4px solid white;}
#templateTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#templateTable td {color:#434343;line-height:19px; }
#templateTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#listContentTable  {background-color:white;border:4px solid white;}
#listContentTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#listContentTable td {color:#434343;line-height:19px; }
#listContentTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#addContentTable {background:white;border:4px solid white;}
#addContentTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#addContentTable td {color:#434343;line-height:19px;line-height:30px; }
#addContentTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#addContentTable input {background:#cccccc;border:1px solid #434343;width:160px;height:18px}
#addContentTable textarea {background:#cccccc;border:1px solid #434343;width:158px;}
 
#contentReviewsTable {background:white;border:4px solid white;}
#contentReviewsTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#contentReviewsTable td {color:#434343;line-height:19px; }
#contentReviewsTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#contentLinksTable {background:white;border:4px solid white;}
#contentLinksTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#contentLinksTable td {color:#434343;line-height:19px; }
#contentLinksTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#contentRelocateTable {background:white;border:4px solid white;}
#contentRelocateTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#contentRelocateTable td {color:#434343;line-height:19px; }
#contentRelocateTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#contentVotesTable {background:white;border:4px solid white;}
#contentVotesTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#contentVotesTable td {color:#434343;line-height:19px; }
#contentVotesTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#contentVersionsTable {background:white;border:4px solid white;}
#contentVersionsTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#contentVersionsTable td {color:#434343;line-height:19px; }
#contentVersionsTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#sectionSettingsTable {background:white;border:4px solid white;}
#sectionSettingsTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#sectionSettingsTable td {color:#434343;line-height:19px;  }
#sectionSettingsTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#sectionSettingsTable input {width:90%;background:#cccccc;border:1px solid #434343;}
 
#listOfItemsPerTqTag th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#listOfItemsPerTqTag td {color:#434343;line-height:19px;  }
#listOfItemsPerTqTag .curSelected {background-color:yellow;}
#listOfItemsPerTqTag .alreadyUsed {background-color:#C0C0C0;}
#listOfItemsPerTqTag .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#addAlbomTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#addAlbomTable td {color:#434343;line-height:19px; }
#addAlbomTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#supportTable th {background:#e6e6e6;height:70px;color:#434343;}
#supportTable td {color:#e6e6e6;background:#ffffff; line-height:19px;  }
#supportTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#supportTable .supportYes {color:green;}
#supportTable .supportNo {color:red;}
#supportIframe {width:90%; height:250px;}
 
#listOfMailGroups  {background:white;border:4px solid white;} 
#listOfMailGroups th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#listOfMailGroups td {color:#434343;line-height:19px; text-align:center;border-top:1px solid #f3f3f3;border-bottom:1px solid #ececec; }
#listOfMailGroups  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#listOfMailGroups input {background:#cccccc;border:1px solid #434343;height:18px;width:200px;}
 
#createNewsLetter  {background:white;border:4px solid white;} 
#createNewsLetter td {color:#434343;line-height:19px;  }
#createNewsLetter  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#createNewsLetter  input {width:100%;background:#cccccc;border:1px solid #434343;height:18px;}
#createNewsLetter  select {width:100%;background:#cccccc;border:1px solid #434343;}
 
#galleryListTable  {background:white;border:4px solid white;} 
#galleryListTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#galleryListTable td {color:#434343;line-height:19px;  }
#galleryListTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#galleryListTable  input {width:200px;background:#cccccc;border:1px solid #434343;height:18px;}
 
#galleryAlbumsTable  {background:white;border:4px solid white;} 
#galleryAlbumsTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#galleryAlbumsTable td {color:#434343;line-height:19px;  }
#galleryAlbumsTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#galleryAlbumsTable  input {width:200px;background:#cccccc;border:1px solid #434343;height:18px;}
 
#galleryAlbumsPicsTable  {background:white;border:4px solid white;} 
#galleryAlbumsPicsTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#galleryAlbumsPicsTable td {color:#434343;line-height:19px;  }
#galleryAlbumsPicsTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
 
#listOfAlbums {list-style-type:none;}
#listOfAlbums li {text-align:center;float:right;margin:5px 15px 5px 15px;padding:5px 5px 5px 5px;background:silver;width:80px;height:60px;border:2px solid gray;}
#listOfAlbums li a {color:black;text-decoration:none;}
#listOfAlbums li a:hover {color:red;text-decoration:none;}
 
.smallFileInput {width:80px;}
 
/* Breadcrumbs Navigator */
#navigator {border-bottom:4px solid #dcdcdc; color:#FF6600; line-height:20px; font-family:tahoma; font-weight:700; font-size:10px;background:url('images/td.png') repeat-x; margin:0; padding:0 3px 0 3px; }
#navigator  a {text-decoration:none; color: #666}
#navigator  a:hover {text-decoration:none; color:black;}
#navigator #breadSelected {color:#cc0000;}
#navigator img {behavior: url(infra/iepngfix.htc); }
#mainTable {border:0px solid #dcdcdc; height:100%;width:100%; background:black;}
 
/*categories at the right of the page */
#listOfCats {margin:0 8px 0 8px;width:95%;height:98%;overflow-x:hidden; overflow-y:auto;background:#434343;}
#listOfCats a { text-decoration:none;color:black;}
.mainMenuTable { width:220px;padding:0 5px 0 5px;}
 
 
 
/*product types at the right of the page */
#listOfProductTypes {overflow-x:hidden;overflow-y:scroll;height:150px;vertical-align:top;background:#e6e6e6;border-top:2px solid #949494;border-bottom:2px solid #bdbdbd;}
#listOfProductTypes a {text-decoration:none;color:black;}
 
 
#contentTable {height:100%; width:100%;}
 
#top {border:0px solid #dcdcdc; background:#000000; width:100%; text-align:left; vertical-align:middle;}
 
/* Dashboard */
#dashboard {text-align:center;}
#line1 button {background:#434343;border:0;width:68px; margin:0 0 0 0;vertical-align:top;color:#ccc;}
#mainContent {background-color:#ffffff; overflow:auto; width:100%; border:0px solid black;}
#content {background-color:#e6e6e6; overflow:auto; width:100%; height:100%; float:right;}
 
/* licenses.php */
.licenseModuleImg {line-height:32px; vertical-align:middle; alignment:absmiddle;}
.licensModuleLabel {line-height:32px; vertical-align:middle;}
 
.hilite {background-color:#EeEece;}
.hiddenDiv {display:none;}
 
#pageHeader {width:100%;background:#e6e6e6;}
#pageHeader h1 {margin:0 10px 0 10px;color:#434343;font-size:25px;font-weight:normal;}
#pageHeader h2 {margin:0 10px 0 10px;color:#434343;font-size:14px;font-weight:normal;}
#listOfCats .noPermission {color:gray;}
#contentTableList td {height:22px;}
#dhtmltooltip {position: absolute;width: 150px;border: 2px solid black;padding: 2px;background-color: lightyellow;visibility: hidden;z-index: 100;}
 
.editDiv{padding-top:20px;position:absolute;visibility: hidden;border:2px solid #999999;z-index: 100;background-color: #ffffff;height:456px;width: 60%;}
 
/* should probably be removed */
.trTitle {height:32px;background:#c0c0c0;}
.tableTitle {border:0px; text-align:center; background-color:#F4F9F9;color:#666;}
 
 
.dhtmlwindow{position: absolute;border: 1px solid black;visibility: hidden;background-color: white;padding:0;margin:0;}
.drag-handle{padding: 1px;text-indent: 3px;font: bold 14px Arial;background-color: #E6E6E0;color: #999999;cursor: move;overflow: hidden;width: auto;text-align:center;} /*CSS for Drag Handle*/
.drag-handle .drag-controls{position: absolute;right: 1px;top: 2px;cursor: pointer;} /*CSS for controls (min, close etc) within Drag Handle*/
.drag-contentarea{ border-top: 1px solid brown;background-color: white;color: black;height: 150px;padding: 2px;overflow: auto;}/*CSS for Content Display Area div*/
.drag-statusarea{ border-top: 1px solid gray;background-color: #F8F8F8;height: 13px; } /*CSS for Status Bar div (includes resizearea)*/ /*height of resize image*/
.drag-resizearea{ float: left;direction:ltr;width: 13px; height: 13px;cursor: nw-resize;font-size: 0;}/*CSS for Resize Area itself*/  /*width of resize image*/  /*height of resize image*/
#scrolDiv {height:1000px;width:851px;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;float:right;}
 
 
#loginForm {width:430px;height:170px;color:#434343;}
#loginForm input {margin-bottom:4px;width:130px;height:18px;background:#cccccc;border:1px solid #434343;}
#loginForm #loginBtn {background:url('images/btnLoginBG.gif');width:52px;height:19px;color:#ccc;font-family:Arial;font-size:12px;border:0;}
#loginForm #loginTitle {text-align:center;color:#434343;font-size:14px;padding:11px 0 22px 0;}
#loginForm #statusMsg {width:111px;padding:8px 22px 0 22px;}
 
#firstLoginTable {margin:0 10px 0 10px;background:url('images/grayBG.gif');}
#firstLoginTable h2{color:#cccccc;font-size:25px;font-weight:normal;}
#firstLoginTable th { line-height:30px;}
#firstLoginTable td {line-height:19px;  }
#firstLoginTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#firstLoginTable  .step {color:green;font-weight:bold;font-size:15px;}
#firstLoginTable #step1table input {border:0;width:128px;height:18px;background:#cccccc;}
#firstLoginTable #step1table  {color:#cccccc;}
#firstLoginTable #step1table  #nextOrange{color:#434343;background:url('images/btnOrangeNext.gif');width:67px;height:20px;border:0;}
#selectPlan {background:#43c0b5;height:35px;color:#434343;font-size:12px;}
 
#templateCats {width:694px;background:url('images/templateCatsBG.gif');}
#templateCats #searchTerm{width:100px;background:#ccc;border:1px solid #434343;height:18px;}
#templateCats .linkOrange {color:#ff7b0e;text-decoration:none;font-size:13px;}
#templateCats .linkGray {color:#cccccc;text-decoration:none;font-size:13px;}
 
#templateCatsGreen {width:694px;background:url('images/templateCatsGreenBG.gif');}
#templateCatsGreen #searchTerm{width:100px;background:#ccc;border:1px solid #434343;height:18px;}
#templateCatsGreen .linkOrange {color:#82d43e;text-decoration:none;font-size:13px;}
#templateCatsGreen .linkGray {color:#4c4c4c;text-decoration:none;font-size:13px;}
 
 
#productTypeTable th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#productTypeTable td {color:#434343;line-height:19px;  }
#productTypeTable  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#productTypeTable  .step {color:green;font-weight:bold;font-size:15px;}
 
#listOfProducts th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#listOfProducts td {color:#434343;line-height:19px;  }
#listOfProducts  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#listOfProducts  .step {color:green;font-weight:bold;font-size:15px;}
 
#addProduct th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#addProduct td {color:#434343;line-height:19px;  }
#addProduct  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#addProduct  .step {color:green;font-weight:bold;font-size:15px;}
 
#actionsForProduct th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#actionsForProduct td {color:#434343;line-height:19px;  }
#actionsForProduct  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#actionsForProduct  .step {color:green;font-weight:bold;font-size:15px;}
#actionsForProduct td a {color:black;text-decoration:none;}
 
#listOfLetters {background:white;border:4px solid white;}
#listOfLetters th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#listOfLetters td {color:#434343;line-height:19px;  }
#listOfLetters  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#listOfLetters  .step {color:green;font-weight:bold;font-size:15px;}
 
#listOfSuppliers th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#listOfSuppliers td {color:#434343;line-height:19px;  }
#listOfSuppliers  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#listOfSuppliers  .step {color:green;font-weight:bold;font-size:15px;}
 
#listOfVendors th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#listOfVendors td {color:#434343;line-height:19px;  }
#listOfVendors  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#listOfVendors  .step {color:green;font-weight:bold;font-size:15px;}
 
#addSupply th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#addSupply td {color:#434343;line-height:19px;  }
#addSupply  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#addSupply  .step {color:green;font-weight:bold;font-size:15px;}
 
/* product content lang table - ecom/productContents.php*/
#productLangs th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#productLangs td {color:#434343;line-height:19px;  }
#productLangs  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;}
#productLangs  .step {color:green;font-weight:bold;font-size:15px;}
 
#pricesPerPropertyTypes th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#pricesPerPropertyTypes td {color:#434343;line-height:19px;  }
#pricesPerPropertyTypes  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;} 
#pricesPerPropertyTypes  .step {color:green;font-weight:bold;font-size:15px;}
 
#productSuppliers th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#productSuppliers td {color:#434343;line-height:19px;  }
#productSuppliers  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;} 
#productSuppliers  .step {color:green;font-weight:bold;font-size:15px;}
 
#productPics th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#productPics td {color:#434343;line-height:19px;  }
#productPics  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;} 
#productPics  .step {color:green;font-weight:bold;font-size:15px;}
 
#currencyList th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#currencyList td {color:#434343;line-height:19px;  }
#currencyList  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;} 
#currencyList  .step {color:green;font-weight:bold;font-size:15px;}
 
#listOfRemarks th {background:#82d43e;color:#434343; line-height:30px;border-top:0px;}
#listOfRemarks td {color:#434343;line-height:19px;  }
#listOfRemarks  .sortSelected {background:url('images/sort_bg.png') repeat-x; line-height:30px;} 
#listOfRemarks  .step {color:green;font-weight:bold;font-size:15px;}
 
#tblAdvanceSearch    {width:100%;}
#tblAdvanceSearch th {line-height:30px;font-weight:bold;}
#tblAdvanceSearch td {}
 
.advSearchProperties th {text-align:right;color:black;}
.advSearchProperties td {padding:0 5px 0 10px; }
.advSearchProperties td a {text-decoration:none;}
.advSearchPropertiesDiv {height:60px; overflow:auto; overflow-x:hidden;}
.advSearchDiv {overflow:auto; overflow-y:hidden;}
.advSearchPropertiesNumOfProducts {font-size:9px; color:gray;}
 
 
 
.orangeBG {background-color:orange;}
.selectedTemplateBorder {border:4px dotted green;} 
 
.templatePic {background:url('images/templatePicBG.gif');width:117px;height:98px;}
.templatePic img {margin:4px 6px 0 3px;}
.templateName {color:#ff7b0e;}
 
.templatePicGreen {background:url('images/templatePicBGGreen.gif');width:117px;height:98px;}
.templatePicGreen img {margin:4px 6px 0 3px;}
.templateNameGreen {color:#82d43e;}
 
.greenRightMenuLink {color:#82d43e;text-decoration:none;font-size:15px;}
.whiteRightMenuLink {color:white;text-decoration:none;font-size:15px;} 
 
.sectionItem {background:#434343;}
.classLevel4 {color:lightgreen;}
.classLevel7 {color:#809966;}
.classLevel3 {color:pink;}
.classLevel5 {color:lightgray;}
.classLevel8 {color:#998066;}
.classLevel6 {color:#B1B18B;}
.classLevel2 {color:#CACAAF;}
.classLevel1 {color:lightblue;}
.sectionItem:hover {background:#343434;color:white;}
 
#listmyCats {width:100%;height:250px;overflow:auto;}
 
collectiveItemsTable {background-color:gray;}
 
 
.btnBrwoseWhite {background:white;border:0;width:20px;height:20px;}
.btnBrwoseGray {background:#e6e6e6;border:0;width:20px;height:20px;}
 
.productLineItemDefaultSelected {width:50px;height:50px;border:1px dashed green;}
.productLineItemDefaultNotSelected {width:50px;height:50px;}
.propertyGroupName {color:blue;font-weight:bold;font-size:15px;}
 
.contentCurrent {background:#82d43e;height:25px;text-align:center;}
.contentCurrent button {background:#82d43e;border:0;color:white;}
.contentNotCurrent {background:white;height:25px;text-align:center;}
.contentNotCurrent button {background:white;border:0;color:#82d43e;}
 
.collectiveItemInUse {background:yellow;color:red;}
.collectiveItemNotInUse {background:white;color:black;}
 
.collectiveInput {width:30px;}
.numItemsToApprove {font-size:15px;color:green;margin:20px;} 
#listOfItemsToApprove {font-weight:bold;}
 
 
 
.currentUse {background:yellow;}
.currentNotInUse {background:#e6e6e6;}

Open in new window

0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

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