CSS in table cell/td

[Heinz Stapff]

I set the width of cell[0] by CSS style sheet to 8%
but it renders about 25% and
crunches the other cells to the right?

Pseudo HTML 'code':p

var addcode=itemrow.insertCell(0);//part of insertrow
addcode.className='code';
addcode.appendChild(document.createTextNode(code));

.code {width:8%; text-align:left; padding-left:5px;
border-right:1px solid black; white-space:nowrap;}

/* .code width is about 25% and crunches up the other
td/cells in the row*/:confused:

[almostbob]

complete code required for one of the mavens to be able to point and fix, those three lines are not enough

[Heinz Stapff]

almostbob
the insertRow works fine and generates 9 cell/td row
className '.itemrow'. The CSS to controll the width of each
cell so that they line up with each header is the problem.
code setattribute axis codehead would be great if the width
of the header row th/cells where duplicated in the tbody
'itemrow' cells.

THE COMPLETE THEAD & BODY CSS??

#carttable {position:relative; left:0px; top:17px; width:100%; background:#ffffff; font:normal normal normal 120%/120% "times new roman", arial, courier; border-spacing:0px;border-collapse:collapse;}

tr { vertical-align:middle; height:24px;}
th { background:#2c3664; color:#666; border-bottom:1px solid #2c3664;}
td { background:#ffffff; color:#2c3664; border-bottom:1px solid #2c3664;}

/*==============HEAD & BODY CELLS===================*/

#header {position:relative; top:0; left:0; width:95.5%;}

#headcode {width:8%; text-align:left; padding-left:2px;
white-space:nowrap; height:24px;}/*NO PROBLEM 8%

.code {width:8%; text-align:left; padding-left:5px;/*PROBLEM 25%
border-right:1px solid black; white-space:nowrap;}

#headitem {width:20%; text-align:left; padding-left:5px;
white-space:nowrap;}/*NO PROBLEM 20%

.item {width:5%; text-align:left; padding-left:5px; white-space:nowrap;}/*PROBLEM WAY OVER TO RIGHT

#headcolor {width:10%; text-align:center; white-space:nowrap;}
.color {width:10%; text-align:center; white-space:nowrap;}
#headsize {width:10%; text-align:center; white-space:nowrap;}
.size {width:10%; text-align:center; white-space:nowrap;}
#headprice {width:10%; text-align:left; padding-left:3px; white-space:nowrap;}
.price {width:10%; text-align:left; padding-left:3px; white-space:nowrap;}
#headquantity {width:10%; text-align:center; white-space:nowrap;}
.quantity {width:10%; text-align:center; padding-left:2%; padding-right:2%; white-space:nowrap;}
#headcost {width:10%; text-align:left; padding-left:12px; white-space:nowrap;}
.cost {width:10%; text-align:left; padding-left:12px; white-space:nowrap;}
#headtotal {width:10%; text-align:left; padding-left:4px; white-space:nowrap;}
.rowsubtotal {width:10%; text-align:left; padding-left:4px; white-space:nowrap;}
#headclear {width:8%; padding-left:2px; white-space:nowrap;}
.clear {width:10%; text-align:center; padding-left:1px; padding-left:1px; background:#2c3664; white-space:nowrap;}

I mixed up pixels and percentages to test both but would preffer %

How about the HTML - are we supposed to guess which id/class refers to what element? That little aside to AlmostBob at the start ain't enough.

[Heinz Stapff]

ardav

The row with the problem is generated with javascript from another window. It is
'Pseudo' HTML the insertRow function works fine. The CSS width on cell[0]/td[0] className 'item' in row className 'itemrow' inserted at row index[0] is the problem.
The HTML for the table on the page dose not mention the afffected row cells.

<div id="tablecontainer">
<form name="formcheckout" id="formcheckout" method="post" action="" onsubmit="">
<table id="carttable" cellspacing="0" cellpadding="0">
<thead id="carthead">
<tr id="header" class="header">
<th id="headcode">Code</th>
<th id="headitem">Item</th>
<th id="headcolor">Color</th>
<th id="headsize">Size</th>
<th id="headprice">Item Price</th>
<th id="headquantity">Quantity</th>
<th id="headcost">Cost</th>
<th id="headtotal">Total</th>
<th id="headclear">Clear</th>
</tr>
</thead>
<!=====================INSERTROW HTML WOULD BE===========================>
<tr class="itemrow"> <!---new tbody.rows[0]--->
<th class="code"></td>
<th class="color"></td>
<th class="size"></td>
<th class="price"></td>
<th class="quantity"></td>
<th class="cost"></td>
<th class="rowsubtotal"></td>
<th class="clear"></td>
</tr> <!---ALL CELLS ARE GENERATED CELL[0].CODE IS 25% NOT 10%???--->
<!=====================BEGINING OF #CARTBODY===========================>
<tbody id="cartbody">
<tr class="dumy"  id="dumy"><!--TBODY.ROWS[0]INSERT POINT OF NEW ROW CLASS .ITEMROW-->
<td class="clientmessage" id="clientmessage">Are you ready to shop?</td>
</tr>
</tbody>
</table>
</br>
<div id="submitordercontainer">
<button type="button" class="button" id="submitbutton" value="">Submit Order</button>
<p class="continueshopping" id="tablecontinueshopping">
<span id="printorder">Print Your Order.</span>&nbsp;&nbsp;
<span id="orderinfo">Change Your Info.</span>&nbsp;
<span id="continueshopping">Continue Shopping.</span>
</p>
</div>
</div>

More like it. Anybody?

[almostbob]

I have a solution,
offended, screw em

[Heinz Stapff]

Sorry for the previous thread format.

This is CSS versus HTML. It took me a while to abreviate both and it's
still long. Basicaly #tablecontainer width is not following the style rule.
Can anybody see why?:confused: All the other relative positioned divs do. :mad:

<head>
<title>checkout</title>
<style type="text/css">
body { width:100%; }
#content { position:absolute; left:0; top:4px; width:99.5%; margin-right:4px; }
#tablecontainer { position:relative; left:0%; top:0%; width:100%; height:100% background:grey; margin-top:0px; 
margin-bottom:16px; } /*width not 60% of #content div!!!why???*/
#carttable { position:relative; left:0px; top:17px; width:100%; background:transparent;
font:normal  normal normal 16px/16px "times new roman", arial, courier; border-spacing:0px;
border-collapse:collapse; } /*width varies by row of #tablecontainer div!!!why???*/
#all other divs { position:relative; left:0%; top:0%; width:100%; }
/*are are longer than 100% of #content div. why??*/
</style>
</head>
<body>
<div id="content">
<form name="checkout">
<div id="tablecontainer">
<thead id="carthead">
</thead>
<tfoot id="cartfoot">
</tfoot>
<tbody id="cartbody">
</tbody>
</table>
<div id="submitordercontainer">
</div>
</div>
<!==END OF #TABLECONTAINER==>
<div id="logincontainer">
<fieldset id="loginfield">
</fieldset>
</div>
<!==END OF #LOGINCONTAINER==>
<div id="billcontainer">
<fieldset id="billfield">
</fieldset>
<div id="logbillbuttoncontainer">
</div>
</div>
<!==END OF #BILLCONTAINER==>
<div id="shipcontainer">
<fieldset id="shipfield">
</fieldset>
<div id="logshipbuttoncontainer">
</div>
</div>
<!==END OF #SHIPCONTAINER==> 
<div id="paycontainer"> 
<fieldset id="payfield">
</fieldset>
<div id="logpaybuttoncontainer">
</div>
</div>
<!==END OF #PAYCONTAINER==>
</form>
</div>
<!==END OF #CONTENT==>
<script src="scripts/checkout.js"></script>
</body>
</html>

I guess I'll have to pixel everything?

[Heinz Stapff]

Fang Thanks again. You are right. The problem has to do with the HTML document itself. The generated row contains 9 cells as written in the JS. Unfortunatley the first cell .code dosen't follow the CSS rule width of 10%, instead appearing as 25%+ and sibling cells appear to follow the CSS rules while the row .itemrow itself dose span 100% of the table, the other rows vary in width according to the amount of td/th tags they hold. This means that the document HTML div tags CSS positioning rules are wrong.

I figured this out by setting the back-ground color of .tablecontainer to 'grey' and was amazed that no grey appeared on screen. Then I set .tablecontainer height to 100% and could see that the .tablecontainer 100% width was only 25%+ matching .code width.

CSS rules are strict and only as good as the HTML they support.

Remembering that the HTML was working fine untill I decided to automate 'Scaleing' of elements by changing height values from pixels to percentages I now have to go back through all the CSS rules for each element and change them back to pixel units

Most browsers claim to support height:% values for most elements and apparently the table elements Siblings fall short of these claims and maybe the cause for utilizing nested div tags with display:table-cell; and display:table-row; CSS rules.

'Don't fix it if it is not broken' sounds reasonable but saving your file as a different named file when closing the file is appropriate when trying to upgrade site ability from fixed/absolute units to relevant/scaleable units.

I never 'cloned' the thead to change it's relative position to fixed which seems to be the popular method in use today. Nor did I change the thead className as I would then had to change the className of each and every td in the thead itself in order not to break the thead CSS rules. Instead I set the tr in the thead by CSS rules to

#header { position:relative; left:0px; top:16px; width:95.5% }

/*width set to overide tendancy for the row to surpass the containing div .tablecontainer and top set not to cover rows[0] when the header psition was changed from relative to fixed*/ and then called document getElementById('header') style position = 'fixed' in the external JS file which worked fine untill I changed the measurment units in the CSS from pixels to percentage.

It is not the end of the Iframe that is necessary as it provides for simple cleaner HTML file TEMPLATES to be added to a page easily without the massive asp style HTML pages that scroll on forever. It probably is the end of the table element as we know it. With new CSS rules, display:table-row; and display:table-cell; the latter I consider redundant.

Consider this:

<div id="tablecontainer" style="blah">

<div id="header" style="blah">

<p>

<span class="headcode" style="text-align:left; width:20%;"></span>

<span class="headitem" style="text-align:center; width:20%;"></span>

<span class="headcost" style="text-align:center; width:20%;"></span>

<span class="headtotal" style="text-align:right;"></span>

</p>

</div>

<!--Pseudo HTML generated by script function-->

<div class="itemrow" style="display:table-row;">

<p>

<span class="code" style="text-align:left; width:20%;"></span>

<span class="item" style="text-align:center; width:20%;"></span>

<span class="cost" style="text-align:center; width:20%;"></span>

<span class="total" style="text-align:right;"></span>

</p>

</div>

<!--end of Pseudo HTML generated by script function-->

</div>

<script type=javascript>

function insertItemRow(button){
var fs=button.parentNode.parentNode;
var q=fs.getElementsByTagName('select')[2].value;
if(q!='' || q!=0) {
var code = fs.getElementsByTagName('input')[0].value;
var item = fs.getElementsByTagName('input')[1].value;
var color = fs.getElementsByTagName('select')[0].value;
var size = fs.getElementsByTagName('select')[1].value;
var price = fs.getElementsByTagName('input')[2].value;
var quantity = fs.getElementsByTagName('select')[2].value;
var val =  [[quantity],[price]];
var multiply = 0;
multiply+= (val[0]*val[1]);

var subtotal = top.frames['register'].document.getElementById('subtotal');
var tablecontainer=document.getElementById('tablecontainer');

var header=document.getElementById('header');

var itemrow=document.createElement(div); 
itemrow.setAttribute('title','Item that you have ordered.');
itemrow.setAttribute('id','itemrow[]');
itemrow.setAttribute('name','itemrow[]');
itemrow.className='itemrow';

var p=document.createElement(p);

itemrow.appendChild(p);

var addcode=document.createElement(span);

addcost.className='code';

addcost.appendChild(document.createTextNode(code));

tablecontainer.appendChild(itemrow);

//one span added to p added to itemrow added to tablecontainer

itemrow.insert:after(header);

// in my situation insertrows[0]

</script>

I'm already months late but would consider the createElement(div) change from the insertrow and HTML table if it gauranteed scalability of the index page on load to the client monitor or screen. The Iframe positions, heights and widths are all relative units or percentages as well as the index page divs, it's only the table rows that have to be absolute/fixed units of height to change header position from relative to fixed. It has been popular to use clientheight and width scripts to adjust for the client screen or monitor size and this bulks up the external JS files with repetitive calls to clientHieght functions etc.

Given the introduction of new CSS rules display:table-row; which according to published standards causes the element to render like a table row, even though display:block; should work fine in my example.

it looks like the table element may be a thing of the past as far as webpages are concerned but the Iframe should be a protected element as it provides for the simplest addition of HTML templates and video feed technologies. I would guess that Iphone and Ipad followed by others have already used this to generate thier collective fortunes by iradicating the troublesome table element.

Sorry again about the length of this thread. Any directional advice would be greatly apprieciated.

I will foeward this to Jaimons Blog as Jaimon currently is the master of the 'cloneNode' and fixed header in table element script, though he readily admits that the table rows are not scalable to client monitor/screen resolution as thier unit heights are fixed/absolute. I'd like his feed back on the new CSS rules and what he thinks the future holds for the table and Iframe elements.

[Heinz Stapff]

About the new style of Dani Web site. I remain greatfull to those who dedicate thier time to helping others with lesser understanding of valuable education. I would suggest that the fixed footer row is excelent and that it is the appropriate place for members to have a 'Post-Thread' button which should have a select index menu that links to all forums. The days of scrolling to find a button to click should be long gone. HTML layout is everything and the heart of web design. Thanks for all your consideration.

Are you quite finished? You writing a book or something? You're just using up terabytes of storage.