473,372 Members | 1,076 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 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 3043
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

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

Similar topics

by: Pete | last post by:
I'm working (playing) on a mouse following script. Yes, the sort no one likes but I'm having great fun tinkering with it - sad. Anyway, if there's enough page content to cause scrolling and I...
by: Mel | last post by:
Are we going backwards ? (please excuse my spelling...) In my opinion an absolute YES ! Take a look at what we are doing ! we create TAGS, things like <H1> etc. and although there are tools...
by: Frances Del Rio | last post by:
why do I keep getting scroll bars on frames even though I have scrolling set to "no"?? (am on IE..) I mean even if you put an img in there or sthg that's a bit larger than the frame if you set...
by: Jim M | last post by:
I have had great success with using <iframe> with overflow-y set to auto. I can get a similar look with the <iframe> tag. BUT... In all cases I need to have fixed heights. Is there a way to...
by: webdev | last post by:
lo all, some of the questions i'll ask below have most certainly been discussed already, i just hope someone's kind enough to answer them again to help me out.. so i started a python 2.3...
by: zerobearing2 | last post by:
Hi all- I'm migrating to postgres from the MS SQL Server land, as I can see a great potential with postgres, I was wondering if anyone has experimented or started a project with XML inside user...
by: dnphamus13 | last post by:
I'm new to this and drowning right now. I would like to put my database online for viewing. I managed to do the filtering but i need to do PAGING as the XML doc get bigger. From what i understand...
by: gunimpi | last post by:
http://www.vbforums.com/showthread.php?p=2745431#post2745431 ******************************************************** VB6 OR VBA & Webbrowser DOM Tiny $50 Mini Project Programmer help wanted...
by: Tarik Monem | last post by:
I have been working on an all AJAX/DOM web site which is set to go live today and I thought I'd share my discoveries with all of you whom have helped me when I have encountered different issues along...
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.