Active Reports HTML viewer skinning

My company recently migrated from Microsoft's reporting services to Active Reports.  I wrote a post here about my complaints and assessment of the product.

One of the big problems with the HTML viewer is the HTML code it generates and its heavy reliance on absolute positioning.  It is some of the worst code I have seen a control generate, I suppose it is supposed to be for flexibility, however none of the flexibility has been made available to us yet.

In order to make this control work for my companies spreadsheet style reporting, I had to come up with a cross between the HtmlView and the RawHTML output.  The raw HTML worked better in page flow usually, but it didn't have paging which is a pretty nice feature.  So I generating the following CSS snippet in an attempt to make the HtmlView just a little closer to the RawHTML output.

.rptDiv and #controlTable and #rptFilter are my own personal divs wrapping the viewer output and my custom parameters, they should not be necessary for the CSS to function correctly.

There are three main features that this CSS changes.  Overflow to remove the extra scrollbars that the viewer adds to the page.  Left and top positioning to get rid of the dumb one inch white space margin that the viewer creates.  And Z-index because moving the main panel one inch up and left causes an invisible portion of the viewer control to be placed on top of any controls in the nearby area; and so it needs to be stuff behind them.

#viewer-layout-main-panel > div > div > div > div > span {
    border:solid 1px;
    border-color:white;
}
.rptDiv,
.viewer-layout-container,
.viewer-layout-container div {
    overflow:visible !important;
    z-index:2;
}
#controlTable,
.viewer-layout-main-panel {
    border:none !important;
}
.viewer-layout-main-panel > div > div {
    left:-1in;
    top:-1in;
    width:0px !important;
           
}
#rptFilter,
#viewer-layout-toolbar-panel {
    z-index:3 !important;
    position:relative;
}

Unwanted space between li elements in IE

I ran into an old problem today... a problem where some extra white space was appearing between items in a list.

In this particular case it was only appearing below list elements in an ul where the li contained an image.

Caused the problem:

<ul>

<li><img src="submenu.gif" /></li>

<li>Contact Us</li>

</ul>

Fixed the problem:

<ul>

<li><img src="submenu.gif" />& nbsp;</li>

<li>Contact Us</li>

</ul>

To fix the issue I ended up manually adding a space with the html code & nbsp;

I recall this issue occuring with some floated divs in IE6 as well, though this time I was having the issue with IE7.

It's a really odd fix to a bug in IE7, but it does seem to work and doesn't seem to cause adverse affects in other browsers.

IE7 div centering with margin auto

I've been having some problems getting a div to center on a webpage.  All the websites I have visited said the fix was easy and gave me various forms of this as a solution:

<div style="text-align:center;">
<div style="text-align:left;">

Content goes here.

</div>

</div>

However, no matter what I put in my stylesheet I couldn't get it to work.  Turns out this fix has to be applied inline.  Putting it in a stylesheet doesn't work.  Once I got that figured out and grumbled for a bit everything worked great.

CSS hack for viewing reporting services in FireFox

**** CSS Fix For FireFox ***

Source Page

Add the following CSS to this file:
C:\Program Files\Microsoft SQL Server\MSSQL.2\Reporting Services\ReportManager\Styles\ReportingServices.css

/* Fix report IFRAME height for Firefox */

.DocMapAndReportFrame
{
min-height: 860px;
min-width: 1024px;
}

Scrollable Table with fixed header using CSS

Scrollable Table with Fixed Header, repeat print header and ... This frozen / locked HTML table header is a usability advance done without HTML fakery such as hidden tables, frames, or JavaScript. Tested in (Windows) Mozilla-spawned browsers (incl. Netscape 6+ and Firefox) and IE5+. IE has problems with the screen behavior of the footer—but thanks to a clever expression provided by Renato Cherullo, even IE6 can have a modern footer. Mozilla self-induces display problems cramming the scrollbar into the last column, which can be corrected with advanced selector syntax. Surprisingly, both render the printed version of the table consistently well, including the repeated headers and footers. --------------------- Ever wanted to create a table to display data which head frozen headers and/or frozen footers like MS Excel allows? read this article to find out how. I have searched long and hard for a solution like this and now that I found such a simple one it is rather embarrassing that I didn't think of it myself.

CSS2 Reference

CSS2 Reference This page has a complete listing of all CSS properties and the values they can be set to. Very useful. It also has the well known and legendary w3schools.com name to add value to the content.