Hi , I met the similar problem the page is with CSS in static html is ok, but when you trying to put in Tapestry , it does not look same.
regards, Vincent On 3/2/06, Ryan Pan <[EMAIL PROTECTED]> wrote: > It is the example HTML file. > <html> > <head> > <style type="text/css"> > </style> > </head> > <body> > <div id="tableContainer" class="tableContainer"> > <table id="tableLineInformation" width="940" > class="scrollTable"> > > <thead class="fixedHeader"> > > <tr id="headTR"> > > <th>rrrr</th> > > <th>eeee</th> > > <th>wwww</th> > > <th>qqqq</th> > > </tr> > > </thead> > > <tbody class="scrollContent"> > > <span jwcid="@For" source="ognl:fff" > value="eee"> > <tr> > > <td><span jwcid="@Insert" > value="ognl:ddd"/></td> > > <td><span jwcid="@InsertText" > value="ognl:ccc"/></td> > > <td><span jwcid="@InsertText" > value="ognl:bbb"/></td> > > <td><span jwcid="@InsertText" > value="ognl:aaa"/></td> > > </tr> > </span> > </tbody> > > </table> > </div> > </body> > </html> > > 2006/3/2, Ryan Pan <[EMAIL PROTECTED]>: > > > > Hi all, > > Is there anyone who can help me to solve this problem? > > I download an CSS file from Internet which can make a scrollable table > > with fixed header,and I tried for an normal HTML file it is okay.But when > > I changed it to tapestry and visit it through Tomcat,I 've got a abnormal > > layout of HTML,the header of the table moved to somewhere it was not ought > > to be.So I guess there may be something wrong with render of tapestry. > > Who can tell me why its appearance was different while using some CSS > > file and HTML file?(I attached the css file as below) > > > > Thanks, > > Ryan. > > > > Note: > > Below is the content of CSS file: > > /* Terence Ordona, portal[AT]imaputz[DOT]com */ > > /* http://creativecommons.org/licenses/by-sa/2.0/ */ > > > > /* begin some basic styling here */ > > > > /* end basic styling */ > > > > /* define height and width of scrollable area. Add 16px to width for > > scrollbar */ > > div.tableContainer { > > clear: both; > > border: 1px solid #963; > > height: 245px; > > overflow: scroll; > > width: 956px > > } > > > > /* Reset overflow value to hidden for all non-IE browsers. */ > > html>body div.tableContainer { > > overflow: hidden; > > width: 956px > > } > > > > /* define width of table. IE browsers only */ > > div.tableContainer table { > > float: left; > > width: 940px > > } > > > > /* define width of table. Add 16px to width for scrollbar. */ > > /* All other non-IE browsers. */ > > html>body div.tableContainer table { > > width: 956px > > } > > > > /* set table header to a fixed position. WinIE 6.xonly > > */ > > /* In WinIE 6.x, any element with a position property set to relative and > > is a child of */ > > /* an element that has an overflow property set, the relative value > > translates into fixed. */ > > /* Ex: parent element DIV with a class of tableContainer has an overflow > > property set to auto */ > > thead.fixedHeader tr { > > position: relative; > > } > > > > /* set THEAD element to have block level attributes. All other non-IE > > browsers */ > > /* this enables overflow to work on TBODY element. All other non-IE, > > non-Mozilla browsers */ > > html>body thead.fixedHeader tr { > > display: block > > } > > > > /* make the TH elements pretty */ > > thead.fixedHeader th { > > background: #C96; > > border-left: 1px solid #EB8; > > border-right: 1px solid #B74; > > border-top: 1px solid #EB8; > > font-weight: normal; > > padding: 4px 3px; > > text-align: left > > } > > > > /* make the A elements pretty. makes for nice clickable > > headers */ > > thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited > > { > > /*color: #FFF;*/ > > display: block; > > text-decoration: none; > > /*width: 100%*/ > > } > > > > /* make the A elements pretty. makes for nice clickable > > headers */ > > /* WARNING: swapping the background on hover may cause problems in WinIE > > 6.x */ > > thead.fixedHeader a:hover { > > /*color: #FFF;*/ > > display: block; > > text-decoration: underline; > > /*width: 100%*/ > > } > > > > /* define the table content to be > > scrollable */ > > /* set TBODY element to have block level attributes. All other non-IE > > browsers */ > > /* this enables overflow to work on TBODY element. All other non-IE, > > non-Mozilla browsers */ > > /* induced side effect is that child TDs no longer accept width: > > auto */ > > html>body tbody.scrollContent { > > display: block; > > height: 262px; > > overflow: auto; > > /*width: 100%*/ > > } > > > > /* make TD elements pretty. Provide alternating classes for striping the > > table */ > > /* http://www.alistapart.com/articles/zebratables/ > > */ > > tbody.scrollContent td, tbody.scrollContent tr.normalRow td { > > /*background: #FFF;*/ > > border-bottom: none; > > border-left: none; > > border-right: 1px solid #CCC; > > border-top: 1px solid #DDD; > > padding: 2px 3px 3px 4px > > } > > > > tbody.scrollContent tr.alternateRow td { > > /*background: #EEE;*/ > > border-bottom: none; > > border-left: none; > > border-right: 1px solid #CCC; > > border-top: 1px solid #DDD; > > padding: 2px 3px 3px 4px > > } > > > > /* define width of TH elements: 1st, 2nd, and 3rd respectively. > > */ > > /* Add 16px to last TH for scrollbar padding. All other non-IE browsers. > > */ > > /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors > > */ > > html>body thead.fixedHeader th { > > /*width: 200px*/ > > } > > > > html>body thead.fixedHeader th + th { > > /*width: 240px*/ > > } > > > > html>body thead.fixedHeader th + th + th { > > /*width: 316px*/ > > } > > > > /* define width of TD elements: 1st, 2nd, and 3rd respectively. > > */ > > /* All other non-IE browsers. > > */ > > /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors > > */ > > html>body tbody.scrollContent td { > > /*width: 200px*/ > > } > > > > html>body tbody.scrollContent td + td { > > /*width: 240px*/ > > } > > > > html>body tbody.scrollContent td + td + td { > > /*width: 300px*/ > > } > > > >
