SQL Reporting Services - CSS fix for Firefox
SSRS 2005 is pretty slick, but the HTML is just terrible. Reports are displayed in an IFRAME that's deep in nested table land, and the IFRAME's height setting only works in IE. The end result is that reports don't display correctly in Firefox - the IFRAME's height defaults to a few hundred pixels, so you only see the top 2 inches of the report. However, they did the right thing by designating CSS classes for most of the important elements, so we can fix it by adding a min-height setting. I'm sure there are other issues with getting SSRS to display correctly in Firefox, and possibly other answers (let me hear them in the comments below), but this CSS fix at least lets the reports show.
Add the following to the ReportingServices.css file (by default, it's found in "C:\Program Files\Microsoft SQL Server\MSSQL.3\Reporting Services\ReportManager\Styles\"):
/* Fix report IFRAME height for Firefox */
.DocMapAndReportFrame
{
min-height: 860px;
}
If you're really lazy, you can just run this batch script which will make the change for you:
::Add to C:\Program Files\Microsoft SQL Server\MSSQL.3\Reporting Services\ReportManager\Styles\ReportingServices.css
SET CSSFILE=%ProgramFiles%\Microsoft SQL Server\MSSQL.3\Reporting Services\ReportManager\Styles\ReportingServices.css
IF NOT EXIST "%CSSFILE%.bak" COPY "%CSSFILE%" "%CSSFILE%.bak"
echo. >> "%CSSFILE%"
echo. >> "%CSSFILE%"
echo /* Fix report IFRAME height for Firefox */ >> "%CSSFILE%"
echo .DocMapAndReportFrame >> "%CSSFILE%"
echo { >> "%CSSFILE%"
echo min-height: 860px; >> "%CSSFILE%"
echo } >> "%CSSFILE%"
Notes / Disclaimers / Retractions
This just adds a min-height attribute to the class used for the IFRAME. Of course, you can set the min-height to another value if you'd like; if you make it larger than your end user's screen height they'll see a scroll bar and may go into convulsions.
This change isn't needed for IE7. One of the big changes to IE7's CSS handling is that it will stop treating height and width as min-height and min-width, but IE7 and Firefox still treat height=100% differently (at leat for IFRAMES).
Please let me know if there's a better way to fix this, more to be fixed, etc. Please also let Phil know what you'd do if you won the lottery.
Update
This only fixes height for charts. Another common problem is width - for instance, tablular reports end up smashed horizontally. I haven't found a CSS fix for this; the best option I've found so far is to add an empty textbox that stretches the width of the report.