1

Problem Description

  • Browser Version: IE 7 only (or compatibility mode)
  • Use Case: Box with rounded corners using PIE (http://css3pie.com) behavior which contains a scrollable div
  • Issue: Cannot scroll using the drag handle

Workarounds

You can refactor the contents of the DIV -- some structures give the issue, some do not. This is not really a viable solution, since it would only be temporary. I could fix the issue now, and some other developer might add to what I did and break it again.

Use Case

I am trying to refactor a bunch of portlets (or rounded corner boxes that have a blue header) to use a simple CSS 3 structure and use PIE behavior in IE 7 and 8. The old code used a complicate HTML structure using background images.

I have removed as much unnecessary HTML and CSS from the example code, but originally the portlet contained a table of "combo boxes". A combo box is an input box that functions like a drop down (which has a toggle button which shows a popup onclick showing auto complete suggestions). After updating the portlet HTML (and not touching the content) now in IE 7 the content is no longer scrollable when dragging the scroll handle.

Reproduction Steps

Drew Gaynor
  • 8,292
  • 5
  • 40
  • 53
codefactor
  • 1,616
  • 2
  • 18
  • 41

1 Answers1

0

I have modified your code as below and it works under IE 9's IE 7 browser mode ( I did not have IE 7 installed so I tried using IE7 browser mode from IE 9's developer tool, I was able to recreate your bug using the same )

Basically, I removed nested spans ( I removed 3 nested spans and kept the main span )

I am not sure about the reason why its not working when you have nested spans but that was one thing that I noticed while looking at your code and removing it seems to work.

<!DOCTYPE HTML>
    <html>
    <head>
    <style>
      .box {
          padding: 10px;
          width: 600px;
          behavior: url(PIE.htc);
          border: 1px solid black;
          border-radius: 10px;
          background-color: white;
      }
      .scroller {
          overflow: auto;
          *overflow-x: auto;
          *overflow-y: hidden;
          *padding-bottom: 17px;
      }
      .box input {
          width: 320px;
      }
      .combo {
          white-space: nowrap;
      }
    </style>
    </head>
    <body>
      <div class="box">
        <div class="scroller">
          <table>
            <tr>
              <td>
                <div>
                  <span class="combo"><input /></span>
                </div>
              </td>
              <td>
                <div>
                  <span class="combo"><input /></span>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </body>
    </html>
N30
  • 3,463
  • 4
  • 34
  • 43