Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

streching div with scrollbar

Posted on 2009-05-07
7
Medium Priority
?
409 Views
Last Modified: 2012-05-06
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
Comment
Question by:sd1sd1
  • 4
  • 3
7 Comments
 
LVL 13

Accepted Solution

by:
Onthrax earned 1500 total points
ID: 24330524
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
 

Author Comment

by:sd1sd1
ID: 24333335
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
 

Author Comment

by:sd1sd1
ID: 24333352
attached a file of how it looks and working in safari browser
Image-12.jpg
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 13

Expert Comment

by:Onthrax
ID: 24333717
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
 

Author Comment

by:sd1sd1
ID: 24333724
Hi
it's working only in safari, not in my FF
0
 
LVL 13

Expert Comment

by:Onthrax
ID: 24334257
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
 

Author Comment

by:sd1sd1
ID: 24335249

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

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question