Solved

Is there a minimum table cell width?

Posted on 2008-10-23
3
1,004 Views
Last Modified: 2012-05-07
Hi Experts,

I have an HTML page where I use 6 tables with different number of columns for the page layout.  Common to all tables, except tables 1 and 6, is a border in the first and last column of each table row. The border is implemented via CSS.

The first table contains a rounded corner image and the description "Invoice Header".  The last table contains an image with rounded borders.  See attached screen shot jpg below.

I am having a problem maintaining the same width of the border columns between tables 3, 4 and 5.  

Below in the code section is the html for tables 3, 4 and 5.  Below the html is the CSS I use.  Sorry it is so long.  There are many entries I do not use and they need do be purged.

Is there a minimum table column width when I define width in pixels?

How do I fix this problem?

I'm stumped because I have  class="colbdr" in the first and last column of each table row.  

You can create a directory under your document root and run the html with the css. Drop the html in a file called  "bdr1.html" (because of <form action="bdr1.html...> and the css into "ss.css".  Run it and it will nicely show the problem.

The image below shows 3 rendering problems in IE8.  In FF v3, I get 4 problems.  The 4th problem is to the left and above the "Vendor No" heading.

On the image, I have circled the border problems in red.  The horizontal lines on the left side in blue show where tables start/end.  The tables are numbered in blue in the middle.

I've assigned a bunch of points because this is part of a movie I am putting together for my resume and am currently unemployed.

Thanks much!!!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Regular Voucher Entry</title>

<link href="ss.css"  rel="stylesheet" type="text/css" />

<style type="text/css">

page {

	width: 675px;}

</style>

</head>

<body>

<form action="bdr1.html" method="post" class="page" name ="vchrAdd" id="vchrAdd">

  <table width="675" border="0" cellpadding="3" cellspacing="0" border-collapse="collapse">

    <tr>

      <td class="colbdr"></td>

      <td class="lbl">Vendor No</td>

      <td><input type="text"  id="vndrNo" name="vndrNo" class="input-box" value="<?=$vndrNo?>" size="5" maxlength="5" disabled="disabled"/></td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td>&nbsp; </td>

      <td class="colbdr"></td>

    </tr>

    <tr>

      <td  class="colbdr"></td>

      <td width="79" class="lbl">Invoice No</td>

      <td width="131"><input name="invNo" type="text"  id="invNo" class="input-box" tabindex="10" size="15" maxlength="10" value="<?=$invNo?>"/></td>

      <td width="59" class="lbl">Inv Date</td>

      <td width="97"><input name="invDate" type="text" id="invDate" tabindex="20" class="input-box" size="10" maxlength="30" value="<?=$invDate?>"/></td>

      <td width="59" class="lbl">PO No</td>

      <td width="197"><input name="poNo" type="text" id="poNo" tabindex="30" size="12" class="input-box" maxlength="12" value="<?=$poNo?>"/></td>

      <td  class="colbdr"></td>

    </tr>

    <tr>

      <td   class="colbdr"></td>

      <td class="lbl">Terms</td>

      <td ><select name="payTerms" size="1"  id="payTerms" tabindex="40" class="input-box">

          <option value="01">Net 30</option>

          <option value="02">Upon Receipt</option>

          <option value="03">0.5% 10, Net 30</option>

          <option value="04">1% 10, Net 30</option>

          <option value="05">2% 10, Net 30</option>

        </select></td>

      <td class="lbl">Due Date</td>

      <td ><input name="dueDate" type="text" id="dueDate" tabindex="50" class="input-box" size="10" value=" <?=$dueDate?>"/></td>

      <td class="lbl">Contract</td>

      <td><input type="text" id="contract" name="contract"  size="8" maxlength="8" class="input-box" tabindex="60"value="<?=$Contract?>"/></td>

      <td  class="colbdr"></td>

    </tr>

  </table>

  <table width="675" border="0" cellpadding="3" cellspacing="0" border-collapse="collapse">

    <tr>

      <td  class="colbdr"></td>

      <td width="51" class="lbl">Gross:</td>

      <td width="95"><input name="grossAmt" type="text" id="grossAmt" class="input-box" tabindex="50" size="8" maxlength="8" value="<?=$grossAmt?>"/></td>

      <td width="42">&nbsp;</td>

      <td width="69">&nbsp;</td>

      <td width="62">&nbsp;</td>

      <td width="63">&nbsp;</td>

      <td colspan="4">&nbsp;</td>

      <td  class="colbdr"></td>

    </tr>

    <tr>

      <td   class="colbdr"></td>

      <td class="lbl">Freight:</td>

      <td><input name="invFrtAmt" type="text" id="invFrtAmt" tabindex="70" class="input-box" size="8" maxlength="8" value="<?=$invFrtAmt?>"/></td>

      <td class="lbl">Other </td>

      <td><input name="invOtherAmt" type="text" id="invOtherAmt" tabindex="80" class="input-box" size="8" maxlength="8" value="<?=$invOtherAmt?>" /></td>

      <td class="lbl">Discount</td>

      <td><input name="invDscntAmt" type="text" id="invDscntAmt" tabindex="90" class="input-box" size="8" maxlength="8" value="<?=$invDscntAmt?>"/></td>

      <td width="41" class="lbl">Tax</td>

      <td width="65"><input type="text" name="invTtaxAmt" id="invTaxAmt" size="8" class="input-box" maxlength="8" tabindex="100" value="<?=$invTaxAmt?>"/></td>

      <td width="28" class="lbl">Net </td>

      <td width="84"><input name="invNetAmt2" type="text" id="invNetAmt2" tabindex="30" class="input-box" size="8" maxlength="8" value="<?=$invNetAmt?>" disabled="disabled"/></td>

      <td  class="colbdr"></td>

    </tr>

    <tr>

      <td  class="colbdr"></td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td colspan="5">&nbsp;</td>

      <td  class="colbdr"></td>

    </tr>

  </table>

</form>

</body>

</html>
 

CSS

---

@charset "utf-8";

/* CSS Document */
 

div {

	display: inline;

	white-space: nowrap;

}

.page {

	width: 675px

}

.page1 {

	width: 675px

}

.fltTxtBox1 {

      border: 0px;

      font-size: 10px;	  

}

#tdHdr1 {

      font-size: 9px;

      height:11px;

}

.fltTxtBox {

      border: 0px;

      font-size: 9px;

      height:10px;

}

#tdVendor {

      line-height:0px;

      font-size: 9px;

      height:7px;

}

.white13x{

    background:#7C7C7C url(c:/wamp/www/ap/images/gray675x10_top_r8.jpg) left top no-repeat;

    height:25px; /* you define your height */

    line-height:25px; /*is the must while defining height in td, vertically centers the text*/

	font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-style: normal;

    font-weight: bold;

    color: white;

    text-decoration: none;

}

.white13y {

    background: #7994B7 url(c:/wamp/www/ap/images/gray260x15_top_r8.jpg) left top no-repeat;

    height:30px; /* you define your height */

    line-height:14px; /*is the must while defining height in td, vertically centers the text*/

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-style: normal;

    font-weight: bold;

    color: white;

    text-decoration: none;

}

.txt {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	font-weight: normal;

	color: #000000;

	text-decoration: none;

}

.lbl {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	font-weight: bolder;

	color: #000000;

	text-decoration: none;

}

.input-box {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	font-weight:500;

	color: #000000;

	text-decoration: none;

} 

.colbdr {

    width: 4px;

	background-color: #7C7C7C;

}

.graybdr {

    border-top-width: 0px;

    border-right-width: 0px;

    border-left-width: 0px;

    border-bottom-width: 0px;   

    border-top-style: solid;

    border-right-style: solid;

    border-left-style: solid;

    border-bottom-style: solid;	

    border-right-color: #7C7C7C;

    border-left-color: #7C7C7C;

    border-bottom-color: #7C7C7C;    

}

.blu-bdr-bot {

    border-top-width: 1px;

    border-right-width: 2x;

    border-left-width: 2px;

    border-bottom-width: 2px;   

    border-top-style: solid;

    border-right-style: solid;

    border-left-style: solid;

    border-bottom-style: solid;	

	border-top-color: #7C7C7C;

    border-right-color: #7C7C7C;

    border-left-color: #7C7C7C;

    border-bottom-color: #7994B7;    

}

.table-borderz1 {

    border-right-width: 1px;

    border-left-width: 1px;

    border-bottom-width: 0px;

    border-top-width: 0px;

    border-top-style: solid;

    border-right-style: solid;

    border-left-style: solid;

    border-bottom-style: solid;

    border-right-color: #7C7C7C;

    border-left-color: #7C7C7C;

}

.btn-filler-down {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    font-style: normal;

    font-weight: bolder;

    color:#FFFFFF;

    background-color: #8FCB64;

    border-style:solid;

    border-color:#989898;

    border-style:solid;

    border-width:2px;

    text-align:center;

    width: 90px;

    height: 20px;

}

.btn-filler {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 11px;

    font-style: normal;

	color: #FFFFFF;

    font-weight: bolder;

    background-color: #7994B7;

    border-style:solid;

    border-color:#E2E2E2;

    border-style:solid;

    border-width:2px;

    text-align:center;

    width :90px;

    height :20px;

}

.blu-11 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	font-style: normal;

	font-weight: bolder;

	color: #0F5795;

	text-decoration: none;

}

.blu12 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	font-weight: normal;

	color: #CDD7DC;

	text-decoration: none;

}

.blu-12Ab {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	font-weight: normal;

	color: #CDD7DC;

	text-decoration: none;

}

.blu-12b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	font-style: normal;

	font-weight: bold;

	color: #0F5795;

	text-decoration: none;

}

.blu-13b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 13px;

	font-style: normal;

	font-weight: bold;

	color: #0F5795;

	text-decoration: none;

}

.blu-b15 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 15px;

	font-style: normal;

	font-weight: bolder;

	color: #0F5795;

	text-decoration: none;

}

.drk-red-11 {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 11px;

    font-style: normal;

    font-weight: normal;

    color: #ffffff;

    text-decoration: none;

}

.drk-red-11b {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 11px;

    font-style: normal;

    font-weight: bold;

    color: #ffffff;

    text-decoration: none;

}

.white11 {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 11px;

    font-style: normal;

    font-weight: normal;

    color: #FFFFFF;

    text-decoration: none;

}

.white11b {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 11px;

    font-style: normal;

    font-weight:bold;

    color: #FFFFFF;

    text-decoration: none;

}

.white12 {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    font-style: normal;

    font-weight: normal;

    color: #FFFFFF;

    text-decoration: none;

}

.white12b {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    font-style: normal;

    font-weight: bold;

    color: #FFFFFF;

	background-color: #7994b7;

    text-decoration: none;

}

.white13 {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-style: normal;

    font-weight: normal;

    color: #FFFFFF;

	background-color: #7994b7;

    text-decoration: none;

}

.white13b {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-style: normal;

    font-weight: bold;

    color: white;

	background-color: #7994b7;

    text-decoration: none;

}
 

.white14 {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: normal;

    color: #FFFFFF;

    text-decoration: none;

}

.white14b  {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: bold;

    color: #FFFFFF;

    text-decoration: none;

}

.blck9 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 9px;

	font-style: normal;

	font-weight: normal;

	color: #000000;

	text-decoration: none;

}

.blck9b {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 9px;

    font-style: normal;

    font-weight: bolder;

    color: #000000;

    text-decoration: none;

}

.blck10 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 10px;

	font-style: normal;

	font-weight: normal;

	color: #000000;

	text-decoration: none;

}

.blck10b {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

    font-style: normal;

    font-weight: bolder;

    color: #000000;

    text-decoration: none;

}

.blck11 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	font-style: normal;

	font-weight: normal;

	color: #000000;

	text-decoration: none;

}

.blck11b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	font-style:normal;

	font-weight:bold;

	color: #000000;

	text-decoration: none;

}

.blck12 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	font-weight: normal;

	color: #000000;

	text-decoration: none;

}

.blck12b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	font-weight: bolder;

	color: #000000;

	text-decoration: none;

}

.blck12ht {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	font-weight: normal;

	color: #000000;

	text-decoration: underline;

}

.blck13 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 13px;

	font-style: normal;

	font-weight: normal;

	color: #000000;

	text-decoration: none;

}

.blck13b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 13px;

	font-style: normal;

	font-weight: bolder;

	color: #000000;

	text-decoration: none;

}

.blck14b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	font-style: normal;

	font-weight: bolder;

	color: #000000;

	text-decoration: none;

}

.blck15b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 15px;

	font-style: normal;

	font-weight: bolder;

	color: #000000;

	text-decoration: none;

}

.blck16b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 16px;

	font-style: normal;

	font-weight: bolder;

	color: #000000;

	text-decoration: none;

}

.blck17b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 17px;

	font-style: normal;

	font-weight: bolder;

	color: #000000;

	text-decoration: none;

}

.blck18b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 18px;

	font-style: normal;

	font-weight: bolder;

	color: #000000;

	text-decoration: none;

}

.blck19b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 19px;

	font-style: normal;

	font-weight: bolder;

	color: #000000;

	text-decoration: none;

}

.blck21b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 21px;

	font-style: normal;

	font-weight: bolder;

	color: #000000;

	text-decoration: none;

}

.blck22b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 22px;

	font-style: normal;

	font-weight: bolder;

	color: #000000;

	text-decoration: none;

}

.blck23b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 23px;

	font-style: normal;

	font-weight: bolder;

	color: #000000;

	text-decoration: none;

}

.blck24b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 24px;

	font-style: normal;

	font-weight: bolder;

	color: #000000;

	text-decoration: none;

}

.blck28-h {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 28px;

	font-style: normal;

	font-weight: bolder;

	color: #000000;

	text-decoration: none;

}

.verdana-blck11 {

	font-family:Verdana, sans-serif;

	font-size: 11px;

	font-style: normal;

	font-weight:normal;

	color:#000000;

	text-decoration: none;

}

.verdana-blck11b {

	font-family:Verdana, sans-serif;

	font-size: 11px;

	font-style: normal;

	font-weight: bolder;

	color:#000000;

	text-decoration: none;

}

.verdana-blck12 {

	font-family:Verdana, sans-serif;

	font-size: 12px;

	font-style: normal;

	font-weight:normal;

	color:#000000;

	text-decoration: none;

}

.verdana-blck12b {

	font-family:Verdana, sans-serif;

	font-size: 12px;

	font-style: normal;

	font-weight: bolder;

	color:#000000;

	text-decoration: none;

}

.verdana-blck13 {

	font-family:Verdana, sans-serif;

	font-size: 13px;

	font-style: normal;

	font-weight:normal;

	color:#000000;

	text-decoration: none;

}

.verdana-blck13b {

	font-family:Verdana, sans-serif;

	font-size: 13px;

	font-style: normal;

	font-weight: bolder;

	color:#000000;

	text-decoration: none;

}

.verdana-blck16 {

	font-family:Verdana, sans-serif;

	font-size: 16px;

	font-style: normal;

	font-weight:normal;

	color:#000000;

	text-decoration: none;

}

.verdana-blck16b {

	font-family:Verdana, sans-serif;

	font-size: 16px;

	font-style: normal;

	font-weight: bolder;

	color:#000000;

	text-decoration: none;

}

.red-12 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	font-weight: normal;

	color:#FF0000;

	text-decoration: none;

}

.red-12b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	font-weight: bolder;

	color:#FF0000;

	text-decoration: none;

}

.red-13 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 13px;

	font-style: normal;

	font-weight: normal;

	color:#FF0000;

	text-decoration: none;

}

.red-13b {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 13px;

	font-style: normal;

	font-weight: bolder;

	color:#FF0000;

	text-decoration: none;

}

.font-filler-button {

	font-family:Verdana, sans-serif;

	font-size:12px;

	font-style: normal;

	font-weight:bold;

	background-color:#FFFF99;

	border-style:solid;

	border-color:#000000;

	border-width:2px;

}

.btn-dl-filler-down {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    font-style: normal;

    font-weight: bolder;

    background-color: #8FCB64;

    border-style:solid;

    border-color:#989898;

    border-style:solid;

    border-width:2px;

    text-align:center;

    width: 20px;

    height: 20px;

}

.btn-dl-filler {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 11px;

    font-style: normal;

    font-weight: bolder;

    background-color: #7994B7;

    border-style:solid;

    border-color:#E2E2E2;

    border-style:solid;

    border-width:2px;

    text-align:center;

    width :20px;

    height :20px;

}

Open in new window

border-problem1.JPG
0
Comment
Question by:IT79637
3 Comments
 
LVL 18

Accepted Solution

by:
Matthew Kelly earned 350 total points
ID: 22791368
Inner tables cell dimensions are tricky with browsers rendering because they do not maintain their specified widths and heights, browsers only use them as "recommendations". It will enlarge or shrink them as it sees fit.

The best thing to do is to re-write the tables with one large table around it so that the whole gray space is one column. See the code below as a demo based on the code you supplied:

http://www.matthewstevenkelly.com/formatting/bdr1.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Regular Voucher Entry</title>

<link href="ss.css"  rel="stylesheet" type="text/css" />

<style type="text/css">

page {

	width: 675px;}

</style>

</head>

<body>

<form action="bdr1.html" method="post" class="page" name ="vchrAdd" id="vchrAdd">

<table width="675" border="0" cellpadding="3" cellspacing="0" border-collapse="collapse">

 <tr>

  <td class="colbdr"></td> 

  <td>

  <table width="675" border="0" cellpadding="3" cellspacing="0" border-collapse="collapse">

    <tr>

      <td class="lbl">Vendor No</td>

      <td><input type="text"  id="vndrNo" name="vndrNo" class="input-box" value="<?=$vndrNo?>" size="5" maxlength="5" disabled="disabled"/></td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td>&nbsp; </td>

    </tr>

    <tr>

      <td width="79" class="lbl">Invoice No</td>

      <td width="131"><input name="invNo" type="text"  id="invNo" class="input-box" tabindex="10" size="15" maxlength="10" value="<?=$invNo?>"/></td>

      <td width="59" class="lbl">Inv Date</td>

      <td width="97"><input name="invDate" type="text" id="invDate" tabindex="20" class="input-box" size="10" maxlength="30" value="<?=$invDate?>"/></td>

      <td width="59" class="lbl">PO No</td>

      <td width="197"><input name="poNo" type="text" id="poNo" tabindex="30" size="12" class="input-box" maxlength="12" value="<?=$poNo?>"/></td>

    </tr>

    <tr>

      <td class="lbl">Terms</td>

      <td ><select name="payTerms" size="1"  id="payTerms" tabindex="40" class="input-box">

          <option value="01">Net 30</option>

          <option value="02">Upon Receipt</option>

          <option value="03">0.5% 10, Net 30</option>

          <option value="04">1% 10, Net 30</option>

          <option value="05">2% 10, Net 30</option>

        </select></td>

      <td class="lbl">Due Date</td>

      <td ><input name="dueDate" type="text" id="dueDate" tabindex="50" class="input-box" size="10" value=" <?=$dueDate?>"/></td>

      <td class="lbl">Contract</td>

      <td><input type="text" id="contract" name="contract"  size="8" maxlength="8" class="input-box" tabindex="60"value="<?=$Contract?>"/></td>

      </tr>

  </table>

  <table width="675" border="0" cellpadding="3" cellspacing="0" border-collapse="collapse">

    <tr>

      <td width="51" class="lbl">Gross:</td>

      <td width="95"><input name="grossAmt" type="text" id="grossAmt" class="input-box" tabindex="50" size="8" maxlength="8" value="<?=$grossAmt?>"/></td>

      <td width="42">&nbsp;</td>

      <td width="69">&nbsp;</td>

      <td width="62">&nbsp;</td>

      <td width="63">&nbsp;</td>

      <td colspan="4">&nbsp;</td>

    </tr>

    <tr>

      <td class="lbl">Freight:</td>

      <td><input name="invFrtAmt" type="text" id="invFrtAmt" tabindex="70" class="input-box" size="8" maxlength="8" value="<?=$invFrtAmt?>"/></td>

      <td class="lbl">Other </td>

      <td><input name="invOtherAmt" type="text" id="invOtherAmt" tabindex="80" class="input-box" size="8" maxlength="8" value="<?=$invOtherAmt?>" /></td>

      <td class="lbl">Discount</td>

      <td><input name="invDscntAmt" type="text" id="invDscntAmt" tabindex="90" class="input-box" size="8" maxlength="8" value="<?=$invDscntAmt?>"/></td>

      <td width="41" class="lbl">Tax</td>

      <td width="65"><input type="text" name="invTtaxAmt" id="invTaxAmt" size="8" class="input-box" maxlength="8" tabindex="100" value="<?=$invTaxAmt?>"/></td>

      <td width="28" class="lbl">Net </td>

      <td width="84"><input name="invNetAmt2" type="text" id="invNetAmt2" tabindex="30" class="input-box" size="8" maxlength="8" value="<?=$invNetAmt?>" disabled="disabled"/></td>

    </tr>

    <tr>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td colspan="5">&nbsp;</td>

    </tr>

  </table>

  </td>

  <td class="colbdr"></td> 

 </tr>

</table>

</form>

</body>

</html>

Open in new window

0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 150 total points
ID: 22791550
"Is there a minimum table column width when I define width in pixels?"

Absolutely not.  You can set a table width to 0 if you want.  Remember each browser pads a table differently, so IE gives more padding to table cells than firefox, typical 2 margin, 2 padding, 2 border.  Unless you style this down, you will get the minimum -- suggest this --

TABLE { padding:0px; margin:0px, border:0px }

to get all browsers the same spacing.

"How do I fix this problem? "

EXACTLY what problem?  You need to be specific to the pixel if need be, after using the above CSS.
0
 
LVL 1

Author Closing Comment

by:IT79637
ID: 31623603
Redoing my code was a big help.  I dropped it in and I got the results I wanted.  Thank you very much.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery Animation faster 5 43
Enter key on html form page 11 48
How to loop bootstrap columns which contain database records 9 25
Put shading on half of picture 8 28
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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…

863 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

25 Experts available now in Live!

Get 1:1 Help Now