$30 Reward - Make this DHTML/Javascript Toolbar not require IE - or find me another

C

cr_

n00b
Joined
Aug 20, 2006
Messages
11
Here is a test page I setup:

Test site

Here's what it looks like in Opera and IE
exampleqv3.jpg


The toolbar at the top that lists Home, Product, Help, and has the input field for Item & Order is what I would like to get working in Opera/Firefox as it currently only works in Internet Explorer.

The main function of this toolbar is just to always have it on top of the current page, so at any time the user can click on a link to view the appropriate page or insert an item number, order number, etc and be brought to that page.

Normally the toolbar has a lot more options so it spans across the entire browser window, but i've removed some of them for this.

The only requirements I have are to make the toolbar completely functional in opera and firefox with instructions on how to do it so I can update the files on the correct server.

Alternatively, if you have another way to create the same functionality a different way that is cross-browser compatible, I would be interested in that as long as it has the same function as the current toolbar and is easily configurable.

The main file is index.cfm which contains the actual buttons..I don't think this is the problem

The toolbar data and javascript is loaded from files in the /Test/Toolbars directory with the following files (which I believe contain the problem):

menubody.htm
tbmenus.js
toolbar.js
toolbars.css

I think i've narrowed the problem down to toolbar.js since I can comment out the other two files loading (menubody.htm and tbmenus.js) and the page still loads regularly.

I'll send payment via paypal or check
 
I've been tinkering with it for awhile - I found some problems but I'm not sure why it doesn't display correctly in firefox yet - I'm still playing with it though :)
 
cr_ said:
Here is a test page I setup:

Test site

Here's what it looks like in Opera and IE
exampleqv3.jpg


The toolbar at the top that lists Home, Product, Help, and has the input field for Item & Order is what I would like to get working in Opera/Firefox as it currently only works in Internet Explorer.

The main function of this toolbar is just to always have it on top of the current page, so at any time the user can click on a link to view the appropriate page or insert an item number, order number, etc and be brought to that page.

Normally the toolbar has a lot more options so it spans across the entire browser window, but i've removed some of them for this.

The only requirements I have are to make the toolbar completely functional in opera and firefox with instructions on how to do it so I can update the files on the correct server.

Alternatively, if you have another way to create the same functionality a different way that is cross-browser compatible, I would be interested in that as long as it has the same function as the current toolbar and is easily configurable.

The main file is index.cfm which contains the actual buttons..I don't think this is the problem

The toolbar data and javascript is loaded from files in the /Test/Toolbars directory with the following files (which I believe contain the problem):

menubody.htm
tbmenus.js
toolbar.js
toolbars.css

I think i've narrowed the problem down to toolbar.js since I can comment out the other two files loading (menubody.htm and tbmenus.js) and the page still loads regularly.

I'll send payment via paypal or check
Click to expand...

Just a heads up, your not allowd to pay people for a certain service here on [H]
 
thanks calebb..I hope you can figure it out

I've seen threads like this before so I didn't think it was against the rules and it does no harm to the forum so I can't see why it wouldn't be allowed.
 
There are two critical flaws in the javascript code:

I've fixed the first one: the code was using the onreadystatechange event to determine when the page had been rendered. This doesn't work with firefox and it does'nt work with every version of IE either.

Instead I used this code:

At the very end of the html:
Code: 
<div id=”DOMREADY”></div>
</body>
</html>

This is a marker - once this div has been created, we know that all the other js has been executed / loaded.

So the code to check to see if this div has been created is a new function I added to toolbar.js:

Code: 
function domReady(nodeId)
	{
		// start or increment the counter
		this.n = typeof(this.n) == 'undefined' ? 0 : this.n + 1;
		var maxWait = 60;
		if (typeof(nodeId) != null && nodeId != "undefined")		
		{
			//alert("The DOM is ready!");
			runme();
		}
		else if (this.n < maxWait)
		{
			setTimeout(function(){domReady(nodeId)}, 50);
		}
	};
domReady("DOMREADY");


And the runme() function is the function formerly named document.onreadystatechange.


So after making these changes, the code works in IE without using the onreadystatechange event.

but there is another problem that I'm still tracking down:

"document.body.all has no properties" (in a function in toolbar.js and tbmenus.js).

I have a feeling a 'reserved' named was used for a variable but I haven't found it yet.
 
I gotta get some sleep. I'll take a look at it again tomorrow at lunch! Maybe someone else will be able to figure out the firefox issue with document.body.all (It is losing it's properties I think?)
 
:) I didn't have time to work on it today - I was swamped with my day job!

I'll have time tomorrow for sure :) And hey, the job is half done at least! (not that it matters until it is completely functional in firefox for you)
 
document.body.all has no properties
Click to expand...

document.body.all should be the same thing as document.body.getElementsByTagName("*").

The former may work in Opera and IE, but the latter should work in FF, Opera and IE and others.
 
I'm still working on this in my spare time.

Rather than rewrite this code to be compatible in Firefox, I've added ~100 new lines of code to emulate functions that are IE-only.

I only have one left.... it's starting to look better in Firefox, but not perfect yet!
 
good to hear...I replied to your PM with some more information.

I also updated the site a bit direct to real pages - let me know if you need something better
 
Getting closer...

cv.jpg


There are no more Javascript errors - so finishing this is going to be more difficult. When I had error messages to go by, it was pretty simple :) Now there are no alerts or anything being generated... and it still works 100% in IE (which is obviously important too)
 
cr_ said:
I checked out that menu bar..but I don't need the drop downs and it doesn't seem to support input fields
Click to expand...

You could easily remove drop downs where you don't want/need them and adding form items isnt that difficult.

As an example have a look at this monstrosity I hacked out of the BrainJar code in a few minutes:

http://www.4d52.net/SkunkWorks/MenuTest/test.htm

Whilst it isnt pretty, that is primarily the CSS that needs fiddling with.
 
BuddhistPunk said:
You could easily remove drop downs where you don't want/need them and adding form items isnt that difficult.

As an example have a look at this monstrosity I hacked out of the BrainJar code in a few minutes:

http://www.4d52.net/SkunkWorks/MenuTest/test.htm

Whilst it isnt pretty, that is primarily the CSS that needs fiddling with.
Click to expand...

Well, depending on how much integration it will take to convert their intranet site, I would say this menu system that was designed with 'standard' javascript functions would be the better way to go.

There are tons of IE-only javascript functions from the 1999-2001 era - and I'm writing functions to try to emulate those functions. (like pulling out nodes as an associative array - that's IE only! The standard functions only allow you to pull them out as a nodelist)

Either way, I'm learning a lot about javascript so I think I'll have the old one working in firefox in a few more days.
 
what are you trying to do? fix a single menu or a bunch of menus?

I might be able to fix but still there are many other ways to make a top menu.
 
Neither - there's ~1000 lines of javascript (check the link in the first post).

And many of the functions they used are not available in firefox.

In fact, to give you an idea of how old the menu is, they use

<script language="JAVASCRIPT">
instead of
<script type="text/javascript">
 
I know what is wrong. the menus are all overlayed ontop of each other so there is something wrong with the position in the script.

i have a midterm soon i should be studying..

i might be able to fix it like i said but i am kind of buzy right now.


but main thing should be like the position might be ie and firefox have different ways of positioning objects.
 
well, this script is using too many just ie only calls. such as document.body.all so best is to use another script.

btw. 30 dollars only in rewriting this script is not worth it.
 
well here is a simple hack to get it working somewhat.
Code: 
<html>
<head>
<title>(May 03, 2007) Logged in as: test </title>
<link REL="stylesheet" TYPE="text/css" HREF="Toolbars/toolbars.css">

<script LANGUAGE="javascript">
function loadpage(URL,TAR){
if (TAR == 1){
document.frames("tbContentElement").document.location = URL;
tbContentElement.focus();}
if (TAR == 0){
window.open(URL);
return false;}
}

function loadlot(){
	 if (event.keyCode == 13) {
	 if (! isNaN(LOTID_VALUE.value)){
	 document.frames("tbContentElement").document.location = 'item.cfm?item='+LOTID_VALUE.value;
	 }
	 else{
	 	alert("You must enter a lot number.");
	 }
	}
  }

function loadwhlot(){
	 if (event.keyCode == 13) {
	  if (! isNaN(WHLOTID_VALUE.value)){
	 document.frames("tbContentElement").document.location = 'item.cfm?item='+WHLOTID_VALUE.value;
	}
	 else{
	 	alert("You must enter a lot number.");
	 }
	}
  }
function loadinvoice(){
	 if (event.keyCode == 13) {
	   if (! isNaN(INVOICEID_VALUE.value)){
	 document.frames("tbContentElement").document.location = 'invoice.cfm?invoiceid='+INVOICEID_VALUE.value;
	}
	 else{
	 	alert("You must enter an invoice number.");
	 }
	}
  }
function loadauction(){
	 if (event.keyCode == 13) {

	 document.frames("tbContentElement").document.location = 'test.cfm?='+AUCTIONID_VALUE.value;
	}
  }
  function loadtradeinid(){
	 if (event.keyCode == 13) {
	 document.frames("tbContentElement").document.location = 'test.cfm?='+TRADEINID_VALUE.value;
	}
  }
</script>
</head>
<body>
<!-- Toolbar definitions -->
<div class="tbToolbar" ID="Toolbar1" style="left: 0px; width: 230px;">
	<div style="left: 0px; width: 23px;"class="tbButton" ID="logo" TITLE="" TBTYPE="toggle" LANGUAGE="javascript" onClick="loadpage('test.cfm',1); document.title=' - Home - (May 03, 2007) Logged in as: test ';"><img class="tbIcon" src="/inc/images/logo.gif" WIDTH="23" HEIGHT="22"></div>
	<input style="left: 30px; width: 50px;" type="button" name="HOME" id="HOME" value="Home" class="tbGeneral" onClick="loadpage('test.cfm',1); document.title=' - Home - (May 03, 2007) Logged in as: test ';" onMouseOver="this.className='tbGeneralMouseOver';" onMouseOut="this.className='tbGeneral';" oncontextmenu="loadpage('test.cfm',0);">


	<div style="left: 90px; width: 1px;" class=tbSeparator></div>

	<input style="left: 100; width: 60px;" type="button" name="Warehouse" id="Warehouse" value="Products" class="tbGeneral" onclick="loadpage('test.cfm',1); document.title='(May 03, 2007) Logged in as: test ';" oncontextmenu="return loadpage('asdf',0);" onMouseOver="this.className='tbGeneralMouseOver';" onMouseOut="this.className='tbGeneral';">


	<div style="left: 170; width: 1px;" class=tbSeparator></div>
	<input style="left: 180px; width: 40px;" type="button" name="CustServ" id="CustServ" value="Help" class="tbGeneral" onclick="loadpage('test.cfm',1); document.title='(May 03, 2007) Logged in as: test ';" oncontextmenu="return loadpage('asdf',0);" onMouseOver="this.className='tbGeneralMouseOver';" onMouseOut="this.className='tbGeneral';">


</div>

<div class="tbToolbar" ID="StandardToolbar" style="left: 232px; width: 300px;">
	<div class="tbGeneral" ID="LotLOad" LANGUAGE="javascript" TBSTATE="gray" style="left: 10px; width: 0px;">Item:</div> <input type="text" id="WHLOTID_VALUE" class="tbGeneral" style="left: 40px;FONT-SIZE: 8px;	HEIGHT: 22px; width:60; BACKGROUND-COLOR: White;" title="WHLotid" onKeyPress="return loadwhlot()">

	<div class="tbGeneral" ID="InvoiceLOad" LANGUAGE="javascript" TBSTATE="gray" style="left: 110px; width: 0px;">Order:</div> <input type="text" class="tbGeneral" ID="INVOICEID_VALUE" TITLE="InvoiceID" value="" style="left: 150px;FONT-SIZE: 8px;	HEIGHT: 22px; width:60; BACKGROUND-COLOR: White;" LANGUAGE="javascript" onkeypress="return loadinvoice()">
</div>

<iframe style="height: 100%; width: 100%; top: 30px; left:-4px" src="dummy.htm" name="tbContentElement" id="tbContentElement" class="tbContentElement"></iframe>
	<script LANGUAGE="Javascript" SRC="Toolbars/toolbar.js"></script>
	<script LANGUAGE="Javascript"> tbScriptletDefinitionFile = "Toolbars/menubody.htm";</script>
	<script LANGUAGE="Javascript" SRC="Toolbars/tbmenus.js"></script>

</body>
</html>

this manually set the position of the stuff by hand....

screenshot
 
TheBuzzer said:
well, this script is using too many just ie only calls. such as document.body.all so best is to use another script.

btw. 30 dollars only in rewriting this script is not worth it.
Click to expand...

He upped it to 40 :)

And I already replaced all the IE only calls - thanks for the tips on manually moving the positions!
 
TheBuzzer said:
well here is a simple hack to get it working somewhat.
Code: 
<html>
<head>
<title>(May 03, 2007) Logged in as: test </title>
<link REL="stylesheet" TYPE="text/css" HREF="Toolbars/toolbars.css">

<script LANGUAGE="javascript">
function loadpage(URL,TAR){
if (TAR == 1){
document.frames("tbContentElement").document.location = URL;
tbContentElement.focus();}
if (TAR == 0){
window.open(URL);
return false;}
}

function loadlot(){
	 if (event.keyCode == 13) {
	 if (! isNaN(LOTID_VALUE.value)){
	 document.frames("tbContentElement").document.location = 'item.cfm?item='+LOTID_VALUE.value;
	 }
	 else{
	 	alert("You must enter a lot number.");
	 }
	}
  }

function loadwhlot(){
	 if (event.keyCode == 13) {
	  if (! isNaN(WHLOTID_VALUE.value)){
	 document.frames("tbContentElement").document.location = 'item.cfm?item='+WHLOTID_VALUE.value;
	}
	 else{
	 	alert("You must enter a lot number.");
	 }
	}
  }
function loadinvoice(){
	 if (event.keyCode == 13) {
	   if (! isNaN(INVOICEID_VALUE.value)){
	 document.frames("tbContentElement").document.location = 'invoice.cfm?invoiceid='+INVOICEID_VALUE.value;
	}
	 else{
	 	alert("You must enter an invoice number.");
	 }
	}
  }
function loadauction(){
	 if (event.keyCode == 13) {

	 document.frames("tbContentElement").document.location = 'test.cfm?='+AUCTIONID_VALUE.value;
	}
  }
  function loadtradeinid(){
	 if (event.keyCode == 13) {
	 document.frames("tbContentElement").document.location = 'test.cfm?='+TRADEINID_VALUE.value;
	}
  }
</script>
</head>
<body>
<!-- Toolbar definitions -->
<div class="tbToolbar" ID="Toolbar1" style="left: 0px; width: 230px;">
	<div style="left: 0px; width: 23px;"class="tbButton" ID="logo" TITLE="" TBTYPE="toggle" LANGUAGE="javascript" onClick="loadpage('test.cfm',1); document.title=' - Home - (May 03, 2007) Logged in as: test ';"><img class="tbIcon" src="/inc/images/logo.gif" WIDTH="23" HEIGHT="22"></div>
	<input style="left: 30px; width: 50px;" type="button" name="HOME" id="HOME" value="Home" class="tbGeneral" onClick="loadpage('test.cfm',1); document.title=' - Home - (May 03, 2007) Logged in as: test ';" onMouseOver="this.className='tbGeneralMouseOver';" onMouseOut="this.className='tbGeneral';" oncontextmenu="loadpage('test.cfm',0);">


	<div style="left: 90px; width: 1px;" class=tbSeparator></div>

	<input style="left: 100; width: 60px;" type="button" name="Warehouse" id="Warehouse" value="Products" class="tbGeneral" onclick="loadpage('test.cfm',1); document.title='(May 03, 2007) Logged in as: test ';" oncontextmenu="return loadpage('asdf',0);" onMouseOver="this.className='tbGeneralMouseOver';" onMouseOut="this.className='tbGeneral';">


	<div style="left: 170; width: 1px;" class=tbSeparator></div>
	<input style="left: 180px; width: 40px;" type="button" name="CustServ" id="CustServ" value="Help" class="tbGeneral" onclick="loadpage('test.cfm',1); document.title='(May 03, 2007) Logged in as: test ';" oncontextmenu="return loadpage('asdf',0);" onMouseOver="this.className='tbGeneralMouseOver';" onMouseOut="this.className='tbGeneral';">


</div>

<div class="tbToolbar" ID="StandardToolbar" style="left: 232px; width: 300px;">
	<div class="tbGeneral" ID="LotLOad" LANGUAGE="javascript" TBSTATE="gray" style="left: 10px; width: 0px;">Item:</div> <input type="text" id="WHLOTID_VALUE" class="tbGeneral" style="left: 40px;FONT-SIZE: 8px;	HEIGHT: 22px; width:60; BACKGROUND-COLOR: White;" title="WHLotid" onKeyPress="return loadwhlot()">

	<div class="tbGeneral" ID="InvoiceLOad" LANGUAGE="javascript" TBSTATE="gray" style="left: 110px; width: 0px;">Order:</div> <input type="text" class="tbGeneral" ID="INVOICEID_VALUE" TITLE="InvoiceID" value="" style="left: 150px;FONT-SIZE: 8px;	HEIGHT: 22px; width:60; BACKGROUND-COLOR: White;" LANGUAGE="javascript" onkeypress="return loadinvoice()">
</div>

<iframe style="height: 100%; width: 100%; top: 30px; left:-4px" src="dummy.htm" name="tbContentElement" id="tbContentElement" class="tbContentElement"></iframe>
	<script LANGUAGE="Javascript" SRC="Toolbars/toolbar.js"></script>
	<script LANGUAGE="Javascript"> tbScriptletDefinitionFile = "Toolbars/menubody.htm";</script>
	<script LANGUAGE="Javascript" SRC="Toolbars/tbmenus.js"></script>

</body>
</html>

this manually set the position of the stuff by hand....

screenshot
Click to expand...


Once I integrate these changes with the other .js files, the buttons move around after clicking them (they revert to being stacked). I'll look at making the changes in the .css instead of inline. But spacing them with styles seems to be the way to go here :)
 
Actually, most of the problems are due to absolute positioning in the .css

I'm converting them to relative so things stack nicely... plus it will scale properly if people increase their font size now as well.
 
Code: 
/* Copyright 1999 Microsoft Corporation. All rights reserved. */
/* Author: Steve Isaac, Microsoft Corporation                 */
/*                                                            */
/*
   This file (along with the companion toolbar.js file) implements full featured
   toolbars completely in DHTML.
  
   See the accompanying readme.htm for full documentation on how to use DHTML Toolbars.
 */
/* ---------------------------------------------------------------------------------------------- */
/* Public Toolbar classes                                                                                */
/* ---------------------------------------------------------------------------------------------- */
.tbContentElement
{
	display:inline;
    POSITION: ABSOLUTE;
    HEIGHT: 1px; 
    LEFT: 0px; 
    TOP: 0px; 
    WIDTH: 1px; 
}
.tbToolbar
{
	display:inline;
    POSITION: ABSOLUTE;
    BACKGROUND-COLOR: buttonface; 
    BORDER-BOTTOM: buttonshadow solid 1px; 
    BORDER-LEFT: buttonhighlight solid 1px; 
    BORDER-RIGHT: buttonshadow solid 1px; 
    BORDER-TOP:  buttonhighlight solid 1px; 
    HEIGHT: 27px; 
    TOP:0px;
    LEFT:0px;
}
.tbButton
{
	display:inline;
    POSITION: ABSOLUTE;
    BACKGROUND-COLOR: buttonface; 
	BORDER-BOTTOM: buttonface solid 1px; 
    BORDER-LEFT: buttonface solid 1px; 
    BORDER-RIGHT: buttonface solid 1px; 
    BORDER-TOP:  buttonface solid 1px; 
    TOP: 1px;
    HEIGHT: 23px; 
    WIDTH: 20px;
}
.tbIcon
{
	display:inline;
    POSITION: ABSOLUTE;
	LEFT: 2px;
	TOP: 2px;
}
.tbSeparator
{
	display:inline;
	POSITION: RELATIVE; 
	BORDER-LEFT: buttonshadow solid 1px; 
	BORDER-RIGHT: buttonhighlight solid 1px; 
	FONT-SIZE: 0px; 
    TOP: 1px; 
	WIDTH: 1px; 
}
.tbMenu
{
	display:inline;
    POSITION: RELATIVE;
    CURSOR: default;
    BACKGROUND-COLOR: buttonface; 
	BORDER-BOTTOM: buttonface solid 1px; 
    BORDER-LEFT: buttonface solid 1px; 
    BORDER-RIGHT: buttonface solid 1px; 
    BORDER-TOP:  buttonface solid 1px; 
    PADDING-TOP: 4px;
    PADDING-BOTTOM: 2px;
    TOP: 1px;
	WIDTH: 1px; 
    FONT-FAMILY: MS Sans Serif; 
    FONT-SIZE: 8px;
}
.tbMenuItem
{
	display:inline;
    CURSOR: default;
    FONT-FAMILY: MS Sans Serif; 
    FONT-SIZE: 8px;
    DISPLAY: none;    
}
.tbSubmenu 
{
	display:inline;
    CURSOR: default;
    FONT-FAMILY: MS Sans Serif; 
    FONT-SIZE: 8px;     
} 
/* .tbGeneral
{
    POSITION: ABSOLUTE;
    HEIGHT: 22px; 
    TOP:2;
}*/
.tbGeneral
{
	display:inline;
    POSITION: RELATIVE;
	HEIGHT: 22px; 
    CURSOR: default;
    BACKGROUND-COLOR: buttonface; 
	BORDER-BOTTOM: buttonface solid 1px; 
    BORDER-LEFT: buttonface solid 1px; 
    BORDER-RIGHT: buttonface solid 1px; 
    BORDER-TOP:  buttonface solid 1px; 
    PADDING-TOP: 4px;
    PADDING-BOTTOM: 2px;
   	FONT-FAMILY: MS Sans Serif; 
    FONT-SIZE: 8px;
	LEFT: 30px;
	width: 50px;
}
/* ---------------------------------------------------------------------------------------------- */
/* Private styles                                                                                 */
/* ---------------------------------------------------------------------------------------------- */
.tbHandleDiv
{
	POSITION: ABSOLUTE;
    BACKGROUND-COLOR: buttonface; 
	BORDER-LEFT: buttonhighlight solid 1px; 
	BORDER-RIGHT: buttonshadow solid 1px;
	BORDER-TOP: buttonhighlight solid 1px; 
	FONT-SIZE: 1px;
	TOP: 1px; 
	HEIGHT: 22px; 
	WIDTH: 3px;
}
.tbButtonMouseOverUp
{
    POSITION: RELATIVE;
    BACKGROUND-COLOR: buttonface; 
    BORDER-BOTTOM: buttonshadow solid 1px; 
    BORDER-LEFT: buttonhighlight solid 1px; 
    BORDER-RIGHT: buttonshadow solid 1px; 
    BORDER-TOP:  buttonhighlight solid 1px; 
    TOP: 1px;
    HEIGHT: 23px; 
    WIDTH: 24px;
}
.tbGeneralMouseOver
{
    POSITION: RELATIVE;
    BACKGROUND-COLOR: buttonface; 
    BORDER-BOTTOM: buttonshadow solid 1px; 
    BORDER-LEFT: buttonhighlight solid 1px; 
    BORDER-RIGHT: buttonshadow solid 1px; 
    BORDER-TOP:  buttonhighlight solid 1px; 
	PADDING-TOP: 4px;
    PADDING-BOTTOM: 2px;
	FONT-FAMILY: MS Sans Serif; 
    FONT-SIZE: 8px;
	HEIGHT: 22px;
	LEFT: 30px;
	width: 50px;
}
.tbGeneralMouseOut
{
    POSITION: RELATIVE;
    BACKGROUND-COLOR: buttonface; 
    BORDER-BOTTOM: buttonshadow solid 1px; 
    BORDER-LEFT: buttonhighlight solid 1px; 
    BORDER-RIGHT: buttonshadow solid 1px; 
    BORDER-TOP:  buttonhighlight solid 1px; 
    TOP: 1px;
}
.tbButtonMouseOverDown
{
    POSITION: RELATIVE;
    BACKGROUND-COLOR: buttonface; 
    BORDER-BOTTOM: buttonhighlight solid 1px; 
    BORDER-LEFT: buttonshadow solid 1px; 
    BORDER-RIGHT: buttonhighlight solid 1px; 
    BORDER-TOP:  buttonshadow solid 1px; 
    TOP: 1px;
    HEIGHT: 23px; 
    WIDTH: 24px;
}
.tbButtonDown
{
    POSITION: ABSOLUTE;
    BACKGROUND-COLOR: gainsboro; 
    BORDER-BOTTOM: buttonhighlight solid 1px; 
    BORDER-LEFT: buttonshadow solid 1px; 
    BORDER-RIGHT: buttonhighlight solid 1px; 
    BORDER-TOP:  buttonshadow solid 1px; 
    TOP: 1px;
    HEIGHT: 23px; 
    WIDTH: 24px;
}
.tbIconDown
{
    POSITION: ABSOLUTE;
	LEFT: 0px;
	TOP: 0px;
}
.tbIconDownPressed
{
    POSITION: ABSOLUTE;
	LEFT: 1px;
	TOP: 1px;
}
.tbMenuBodyOuterDiv
{
    CURSOR: default; 
    BACKGROUND-COLOR: menu;
	BORDER-BOTTOM: threeddarkshadow solid 1px; 
    BORDER-LEFT: threedface solid 1px; 
    BORDER-RIGHT: threeddarkshadow solid 1px; 
    BORDER-TOP:  threedface solid 1px; 
    POSITION: absolute;
}
.tbMenuBodyInnerDiv
{
    CURSOR: default; 
	BORDER-BOTTOM: threedshadow solid 1px; 
    BORDER-LEFT: threedhighlight solid 1px; 
    BORDER-RIGHT: threedshadow solid 1px; 
    BORDER-TOP:  threedhighlight solid 1px; 
}
.tbMenuBodyTable
{
    CURSOR: default; 
	BORDER-BOTTOM: menu solid 1px; 
    BORDER-LEFT: menu solid 1px; 
    BORDER-RIGHT: menu solid 1px; 
    BORDER-TOP:  menu solid 1px; 
}
.tbMenuSeparator
{
    DISPLAY: none;    
}
.tbMenuSeparatorTop
{
	POSITION: RELATIVE;
	BORDER-BOTTOM: buttonshadow solid 1px; 
	HEIGHT: 1px;
	WIDTH: 94%;
	FONT-SIZE: 0px;
}
.tbMenuSeparatorBottom
{
	POSITION: RELATIVE;
	BORDER-TOP: buttonhighlight solid 1px; 
	HEIGHT: 5px;
	WIDTH: 94%;
	FONT-SIZE: 0px;
}
.tbMenuBlankSpace
{
	WIDTH: 20px; 
}
.tbSubmenuGlyph
{
	FONT-FAMILY: webdings; 
	WIDTH: 20px; 
	TEXT-ALIGN: right;
}
.tbMenuItemChecked
{
	FONT-FAMILY: webdings; 
	WIDTH: 20px; 
	TEXT-ALIGN: right;
}
.tbMenuIcon
{
    BACKGROUND-COLOR: buttonface; 
    BORDER-BOTTOM: buttonface solid 1px; 
    BORDER-LEFT: buttonface solid 1px; 
    BORDER-RIGHT: buttonface solid 1px; 
    BORDER-TOP:  buttonface solid 1px; 
}
.tbMenuIconChecked
{
    BACKGROUND-COLOR: threedlightshadow; 
    BORDER-BOTTOM: buttonhighlight solid 1px; 
    BORDER-LEFT: buttonshadow solid 1px; 
    BORDER-RIGHT: buttonhighlight solid 1px; 
    BORDER-TOP:  buttonshadow solid 1px; 
}
.tbMenuIconMouseOver
{
    BACKGROUND-COLOR: buttonface; 
    BORDER-BOTTOM: buttonshadow solid 1px; 
    BORDER-LEFT: buttonhighlight solid 1px; 
    BORDER-RIGHT: buttonshadow solid 1px; 
    BORDER-TOP:  buttonhighlight solid 1px; 
}
.tbMenuIconCheckedMouseOver
{
    BACKGROUND-COLOR: gainsboro; 
    BORDER-BOTTOM: buttonhighlight solid 1px; 
    BORDER-LEFT: buttonshadow solid 1px; 
    BORDER-RIGHT: buttonhighlight solid 1px; 
    BORDER-TOP:  buttonshadow solid 1px; 
}
.tbScriptlet
{
    POSITION: ABSOLUTE;
    CURSOR: default; 
    VISIBILITY: hidden;
}
BODY
{
	MARGIN: 0px;
	BORDER: 0px;
	BACKGROUND-COLOR: buttonface;
}

This .css fixes almost all the layout issues and it looks good in IE and firefox. I'll post all the code a little later this afternoon and you can start merging...
 
awesome! does this happen to work in opera too?

Yes, the current reward is $40..I am going to see if I can get my boss to throw something else in to sweeten the deal. Also, if someone helps calebb (TheBuzzer?) i'll be happy to send them some cash or a gift.

Once it's finished - I'll send both of you guys something that I think you'll like (not cash or a gift)
 
k, I'm on ICQ and AIM - shoot me an IM :)

http://www.benefiel.net/hosted/cr/index.html

It's not perfect yet, but there are no errors at least, so everything seems to work. You can try it in Opera.

I'll keep tweaking the layout...

Also, check out the [H] logo - in IE you can click it - there is some different behavior in the javascript when that button is depressed, but it doesn't look like you were actually using it? Let me know since that functionality does not work in Firefox yet but I'm not going to work on it unless you need it...
 
It's a pretty cool toolbar - especially if you end up using the submenus. There's a lot of code that dynamically alters the stylesheet as you go...

It's just a bit old :)
 
You must log in or register to reply here.
Back
Top