471,594 Members | 1,780 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,594 software developers and data experts.

CSS with XSL & XML: Scrolling Table ... almost there!

Dear all,

I have been working to implement a scrolling table into an xml / xsl interface and so far have managed to put together an acceptable version using <thead> and <tbody> syntax. Indeed for the html examples that I found out there this seems to work perfectly.

On the surface it also works perfectly in my xml / xsl implementation too (also based on html underneath). Indeed, using IE6*, you can take a look at a cut-down example by going to this link ...


... and then selecting 'Milan', 'Report Test' and clicking on 'Run'.

This gives a nice scrolling list which is exactly what I want.

However ...

If you scroll to the bottom of the list in the scrolling area (the list is short as I have removed most of the data and all the reports except for this one) and then resize the window, the headers are distorted. With more data (which is normally the case for us) the distortion is even worse.

I have spent many hours tweaking my CSS (contain in the XSL file for convenience) and the HTML but just can't get rid of the 'distortion-on-resize' problem.

I am hoping that either ...
a.) There is a way to block the browser from being resized (I don't know if there is?)
... or ...
b.) Someone can take a look at my syntax and offer a suggestion to sort this out.

The source code can be obtained by clicking on the two hyperlinks 'xml file' and 'xsl file' included in the link. Indeed, I believe that the problem (and solution) may lie in some dynamic CSS declarations ( e.g. top: expression(offsetParent.scrollTop); /*IE5+ only*/ ) which I have obtained from various examples but don't understand completely.

Many thanks for any help that you can give as this could be a great little tool if we can sort out this last hurdle.

Alan Searle

*: This solution is only designed to work with IE as that is what we have in-house.

CSS: Here are the CSS declarations which are contained in the XSL file ...

<style type="text/css" media="screen">
table {width: 99%;
background-color: #E2EFFE;
border-style: solid;
border-color: #316AC5;}
table.displayframe {
background-color: white;
border: solid 1px #316AC5;}
h1 {margin-top: 1em; font-variant: normal;}
h2 {margin-left:5px;}
h3 {margin-left:5px;}
div.tableContainer {
width: 100%; /* table width will be 99% of this*/
height: 344px; /* must be greater than tbody*/
overflow: auto;
margin: 0 auto;}
table.cont {
width: 98%; /*100% of container produces horiz. scroll in Mozilla*/
border: none;
background-color: #E2EFFE;}
table.cont>tbody {
/* child selector syntax which IE6 and older do not support*/
overflow: auto;
height: 301px;
overflow-x: hidden;}
thead.cont tr {
border: none;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
thead.cont td, thead.cont th {
font-size: 14px;
background-color: white;
color: blue;
border: none;
/* border-top: solid 1px #d8d8d8; */
td.cont {
color: #000;
padding-right: 2px;
font-size: 8px;
border-bottom: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;}
table.cont tfoot tr { /*to help IE*/
position: relative; overflow-x: hidden;
top: expression(parentNode.parentNode.offsetHeight >= offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);
a:link {text-decoration: underline;}
a:hover {text-decoration: underline;
color: #851D9E;}
a:visited {text-decoration: underline;
color: #8080C0;}
Nov 24 '07 #1
1 2915
7,435 Expert 4TB
No, the browser cannot be forced to a fixed size.

I can't help you with the "expression" problem because it is non-standard and I know nothing about it.

I also don't have IE available till I get home tonight but I'm very rusty on my xml and not sure I can help anyway.
Nov 24 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

7 posts views Thread by Pete | last post: by
5 posts views Thread by Frances Del Rio | last post: by
4 posts views Thread by webdev | last post: by
reply views Thread by zerobearing2 | last post: by
reply views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.