Solved

streching div with scrollbar

Posted on 2009-05-07
7
398 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 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
attached a file of how it looks and working in safari browser
Image-12.jpg
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 13

Expert Comment

by:Onthrax
Comment Utility
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
Comment Utility
Hi
it's working only in safari, not in my FF
0
 
LVL 13

Expert Comment

by:Onthrax
Comment Utility
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
Comment Utility

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

762 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now