Table and Div alignment problem - please help!

[zinja]

I am trying to add another display area to the right of the 6 divs that make up the display. How would I do this:


Here is the code that defines the display

document.write('<div id="calculator" class="calculator" style="position:absolute; z-index:69; visibility:hidden">'+
               '<table border="0" cellspacing="0" cellpadding="0" style="' + cssCalculator + '">' +
               '<tr><td colspan="' + Width + '" class="titlebar" style="' + cssTitleBar + '">' + AppTitle +
               '<input type="button" value="&times;" style="' + cssButtonClose +
               '" onClick="hideCalc()" onFocus="this.blur()"></td></tr>' +
			   
			   
			   '</td></tr>' +
               '<tr><td colspan="9" align="center">' +
               '<div id="calcDisplay0" style="' + cssDisplay + '"></div>' +
			   '<div id="calcDisplay1" style="' + cssDisplay + '"></div>' +
			   '<div id="calcDisplay2" style="' + cssDisplay + '"></div>' +
			   '<div id="calcDisplay3" style="' + cssDisplay + '"></div>' +
			   '<div id="calcDisplay4" style="' + cssDisplay + '"></div>' +
			   '<div id="calcDisplay5" style="' + cssDisplay + '"></div>' +
			   '<div id="calcTotal" style="' + cssTotal + '"></div>' +
       		   '<div style="width:100%;height:30px;position:relative;top:0px;left:0px;"></div>' +
               '</td></tr>' + '<tr>' + makeButtons() +  '</tr></table></div>');

if(DOM) obj = document.getElementById('calculator');
else if(IE4) obj = document.all.calculator;
if(obj) sobj = obj.style;

Here is the style information:

var cssCalculator = (BgColor ? 'background-color: ' + BgColor + '; ' : '') +
                    (Border ? 'border: ' + Border + '; ' : '');

var cssTitleBar = 'width: 100px; ' +
				  'cursor: default; ' +
                  'font-family: Arial, Helvetica; ' +
				  'text-align: center; ' +
                  'font-size: 48px; ' +
                  'font-weight: bold; ' +
                  'padding: 2px; ' +
                  (TitleColor ? 'color: ' + TitleColor + '; ' : '') +
                  (TitleBgColor ? 'background-color: ' + TitleBgColor + '; ' : '');

var cssDisplay = 'width: 500px; ' +
                 'height: 30px; ' +
				 'font-family: Arial, Helvetica; ' +
                 'font-size: 22px; ' +
                 'font-weight: bold; ' +
                 'text-align: right; ' +
                 'margin: 0px; ' +
                 'padding: 0px; ' +
                 'overflow: hidden; ' +
                 'white-space: nowrap; ' +
                 (RegisterColor ? 'color: ' + RegisterColor + '; ' : '') +
                 (RegisterBgColor ? 'background-color: ' + RegisterBgColor + '; ' : '') +
                 (RegisterBorder ? 'border: ' + RegisterBorder + '; ' : '');

var cssDisplay_Hide = 'width: 500px; ' +
                 'height: 30px; ' +
				 'visible: hidden ' +
				 'font-family: Arial, Helvetica; ' +
                 'font-size: 22px; ' +
                 'font-weight: bold; ' +
                 'text-align: right; ' +
                 'margin: 0px; ' +
                 'padding: 0px; ' +
                 'overflow: hidden; ' +
                 'white-space: nowrap; ' +
                 (RegisterColor ? 'color: ' + RegisterColor + '; ' : '') +
                 (RegisterBgColor ? 'background-color: ' + RegisterBgColor + '; ' : '') +
                 (RegisterBorder ? 'border: ' + RegisterBorder + '; ' : '');


var cssTotal = 'width: 250px; ' +
                 'height: 30px; ' +
				 'rows: 7; ' +
                 'font-family: Arial, Helvetica; ' +
                 'font-size: 30px; ' +
                 'font-weight: bold; ' +
                 'text-align: right; ' +
                 'margin: 2px; ' +
                 'padding: 4px; ' +
                 'overflow: hidden; ' +
                 'white-space: nowrap; ' +
                 (RegisterColor ? 'color: ' + RegisterColor + '; ' : '') +
                 (RegisterBgColor ? 'background-color: ' + RegisterBgColor + '; ' : '') +
                 (RegisterBorder ? 'border: ' + RegisterBorder + '; ' : '');

var cssDisplayMode = 'width: 100px; ' +
	                 'height: 70px; ' +
                     'font-family: Arial, Helvetica; ' +
                     'font-weight: normal; ' +
                     'font-size: 20px; ' +
                     'white-space: nowrap; ' +
                     'float: left; ' +
                     (RegisterColor ? ' color: ' + RegisterColor + '; ' : '');

var cssDisplayOp = 'width: 70px; ' +
                   'font-family: Arial, Helvetica; ' +
                   'font-weight: normal; ' +
                   'font-size: ' + Math.round(FontSize / 1.5) + 'px; ' +
                   'text-align: left; ' +
                   'float: left; ' +
                   (RegisterColor ? ' color: ' + RegisterColor + '; ' : '');

Any help would be greatly appreciated!



LJ Wilson

My personal saying - Just remember, it can always get worse, and usually will.

 

[Einstein47]

Is there a reason you are doing everything in JavaScript - concatenating lots of strings to create your HTML and your CSS? Just curious.

Einstein47
There are no kangaroos in Austria!
[[]Starbase47.com]

 

[zinja]

Probably because I don't know better. This script started off as a simple calculator and I am using some of that code along with much of my own to create a point of sale system. I am very new to javascript so I don't know how to fix the issue (heck I don't even know what the issue is). If you think there is a better way, let me know. I am open to any suggestions.

Thanks!

LJ Wilson

My personal saying - Just remember, it can always get worse, and usually will.

 

[BillyRayPreachersSon]

If you need help with styling or markup, I'd ask in the HTML / CSS forum:

forum215

You're far far better off ditching all the JS guff and doing it in plain old HTML.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]