Incomprehensible geek babble

[spudtater]

I have been attempting to acheive what you would think would be a relatively simple bit of HTML: to display an iframe with vertical scrollbars only*. Unfortunately, with IE it's never that simple.

The simple way to do it would be via the 'overflow-x' and 'overflow-y' properties. These are not standard in CSS2, but were introduced by Microsoft, have since been taken up by Firefox, Opera etc., and are to be made formal in CSS3.

But despite being an IE invention, the properties don't work properly in IE. For other elements they seem to work as expected, but the iframe ignores them, only responding to 'scrolling="yes/no/auto"' or 'overflow: visible/hidden/scroll/auto', which of course affect both scrollbars.

The first part of my solution I stumbled upon quite by accident, and is slightly bizarre on the face of it (as it uses the exact opposite of the expected CSS). If you give a horizontal scrollbar to a surrounding div, then the iframe itself does not get the opportunity to display its own horizontal scrollbars. The result is a grayed-out horizontal scrollbar:

   <div style="width: 608px; height: 500px; overflow-x: scroll; overflow-y: hidden;">
      <iframe src="http://some.url.here/some/page.html" frameborder="0" style="width: 608px; height: 500px;"></iframe>
   </div>

I have not, as of yet, seen this solution suggested on any site. Thus I claim this technique as my own invention, and dub it "scrollbar inversion".   8^)

The grayed-out look, despite being all too familiar to IE users, is not ideal. And I am a perfectionist. My next trick is to chop off the horizontal scrollbar using a 'clipper' div which is 18 pixels shorter than its contents. But not every user has an 18px scrollbar, so they might see a thin slice of grayed-out scrollbar. For my final trick, I take advantage of some IE-only CSS rules determining scrollbar colour:

    <style type="text/css">
	.horizontalScrollbarCutter {
	    overflow-x: scroll;		/* Show _this_ div's horizontal scrollbar */
	    overflow-y: hidden;		/* Children can display vertical scrollbar */
	    /* IE-only: completely whited-out scrollbars */
	    scrollbar-face-color: white;
	    scrollbar-arrow-color: white;
	    scrollbar-track-color: white;
	    scrollbar-shadow-color: white;
	    scrollbar-highlight-color: white;
	    scrollbar-3dlight-color: white;
	    scrollbar-darkshadow-Color: white;
	}
	.clipper {
	    overflow: hidden;
	}
    </style>

   <div style="width: 608px; height: 500px;" class="clipper">
      <!-- Content is 18px taller (most common scrollbar height) -->
      <div style="width: 608px; height: 518px;" class="horizontalScrollbarCutter">
         <iframe src="http://some.url.here/some/page.html" frameborder="0" style="width: 608px; height: 518px;"></iframe>
      </div><!-- END horizontalScrollbarCutter -->
   </div><!-- END clipper -->

Ta-da! It works. Now, I've just spent far too long getting that working, given the relatively small benefit of hiding a scrollbar from the user, but... all part of life's rich pageant.

(N.B. this entire chunk can be surrounded by conditional comments, in order that only IE sees it. All other browsers can just show the iframe as normal.)

* The page inside has, unfortunately, a whole lot of blank space to the right of the actual content.