Databases
StackOverflow2013
Postsdbo
POWhy won't a div with a scrollbar drag in IE 8?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy won't a div with a scrollbar drag in IE 8?
    primarykey
    data
    text
    <p>I have a div with the following rules:</p> <pre><code>div#eventBox { overflow: auto; text-align: center; height: 300px; border: 2px inset #888; width: 95%; margin: auto; -moz-border-radius: 5px 0px 0px 5px; -ms-border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px; background-color: #1a5c17; background-image: url("/Images/Background_Images/GrungePaper.jpg"); behavior: url(/Resources/PIE.htc); } </code></pre> <p>Everything works perfectly in it, except for in IE 8 (tests fine in IE 9). In IE 8 when I try to "click and drag" the scrollbar, it immediately becomes "unclicked" just after mousedown, preventing any IE users on 32-bit machines from using this scrollbar feature. Everything else about the scrollbar works fine, like clicking the arrows, clicking the space between an arrow and the scrollbar, and using the mousewheel.</p> <p>I have tried removing the <code>behavior: url(/Resources/PIE.htc);</code> rule, but the problem persists.</p> <p>Do div's with overflow auto not work/have bugs in IE 8?</p> <p>Also, this has been tested in 32-bit and 64-bit versions of FF and Chrome, and everything works fine there, too.</p> <p><strong>Update:</strong></p> <p>I have tested this consistently and I can't seem to figure out what's going on, nor can I see any examples of this ever happening to anyone else online. I tested it with the only rule for <code>div#eventBox</code> being <code>overflow: auto;</code>, <code>overflow: scroll;</code>, <code>overflow-y: auto;</code>, and/or <code>overflow-y: scroll;</code> and the problem STILL persists. Every time I click the scrollbar in IE 8 (no compatibility mode) it loses focus.</p> <p>I find it as hard to believe that this is a known bug (because of the zero relevant search results) as it is to believe that this is something I have messed up, since all it takes is one div with overflowing content producing a scrollbar to cause this glitch.</p> <p>If I was a rich man, back when Internet Explorer 8 was being developed, I would have gladly paid for everyone from Microsoft's Internet Explorer Project Team to take a class on "best practices" and "adhering to standards".</p> <p><strong>Update 2:</strong></p> <p>Actually if I double-click the scrollbar really fast and hold down the second click, I can actually get a hold of it in IE 8. Of course, this is still no good from an end-user perspective, but perhaps that behavior will help explain the cause.</p> <p><strong>Final Update (Solution):</strong></p> <p>From the advice I received from the comments to this post, I decided to remove all script and CSS and start adding things back in, one at a time. The error wasn't in any script, but in CSS. For whatever reason the <code>behavior: url(/Resources/PIE.htc);</code> set on the main site wrapper div (Far up the DOM tree from the problem element) was apparently causing the problem. I still don't know how, but the solution for me was to simply remove PIE from that element, which in turn broke the other two PIE references, which I was able to fix by setting their position to relative. For now, everything seems to work fine in IE 8, but the moment I experience any other problems as a result of using PIE, I will purge it from my site.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USVoidKing
    1. USVoidKing
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhy won't a div with a scrollbar drag in IE 8?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POWhy won't a div with a scrollbar drag in IE 8?
      1. This table or related slice is empty.
      1. VTUpMod
    1. CODo you have any JavaScript on the page that intercepts mouseDown or click events?
      singulars
      1. POWhy won't a div with a scrollbar drag in IE 8?
      1. USPatrick Moore
    2. CO@SetSailMedia Yes, Sir, I do
      singulars
      1. POWhy won't a div with a scrollbar drag in IE 8?
      1. USVoidKing
    3. CO@SetSailMedia I have several `$("#elementID").click(function(){//do stuff here });` jQuery event handlers, to be specific.
      singulars
      1. POWhy won't a div with a scrollbar drag in IE 8?
      1. USVoidKing
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload