Topic: Interesting CSS Bug

I do not have an environment setup where I can easily display code, but I am hoping that maybe you can supply me with an answer faster than the vendor support can (deadlines and all).

My company purchased dhtmlXGrid http://www.scbr.com/docs/products/dhtmlxGrid/ which is great, but I have an interesting problem in IE6.

The basic layout is:
[code]
<div style="overflow:auto">
<div id="grid"></div>
<table id="form"></table>
</div>

The overflow div presents a scrollbar, but only the table scrolls vertically, the grid remains fixed, and the content of the table appears to scroll under the table.

Since I am in IE I can not really inspect the CSS as well as I can under FF so this gets a little annoying.

Does anyone have a vague idea on where I should look to figure out what might be causing this type of behavior. I do not see any absolute positioning going on with FireBug in FF, but then again I do not see this problem cropping up in FF.

Dan
Code Town | Zombie Head | How Much TP?

[quickie] FYI inspect your page in IE [/quickie]

Another quickie is that there is a way to get Firebug sort of working under other browsers read more here

If it didn't work in IE6 by default, ask for your money back. IE6 is the most popular browser.

The example you gave in your post seems to work equally well under IE6, so I'm wondering if it's an issue with your own implementation, is this possible?

Blaise: Do I miss something or Firebug lite is just a console thingy ? if so, it's not that useful. I guess many web developers already made that kind of thing for/by themselves.

reisio: All the more since they claim to support IE 5.x and above. Heck I even got a JavaScript when trying their thing IE 7. Also I don't have the vertical scrollbar in Opera 9.2 or IE7. And in FF2 the vertical scroll bar disappeared when I clicked on a TH to sort a column. And they charge $149. Wow.

It sure look good and is an ambitious thing to do in JS but when one claim cross browser support and charges for it, it better work.

poiIt's not just a console it has the HTML view as well, and I think a bit of the DOM stuff from firebug, the screenshots show some information.

I didn't get any errors when I tried that site on my IE versions, that includes some of the examples they offer.

[quickie] I got an error in IE when I double clicked a table cell using IE7. [/quickie]

[quickie]Just tested in IE7 and 6, works fine for me, no errors, checked my settings, alerts are on.[/quickie]

I think the problem is that the existing layout somehow really is screwing up the document flow. I have tried recreating the site's layout and I just can not reproduce this type of scrolling.

I gave a border to the containing grid's div:

<div id="grid" style="border: 1px solid black">
... all the grid code ...
</div>

It turns out that the grid div scrolls as should be expected. But the content that is inside the grid stays in a fixed place. Using the IE Developer Toolbar (which turned on following my uninstallation of it, that is another story) I was able to pinpoint that an internal div with a class of objbox is the item that is remaining where I do not want it to be, and it has a position: relative; set on it.

Now if I change the <div id="grid" to have a position: relative; it takes on fixed position qualities.

To resolve this issue I set the <div id="grid" parent div which has the overflow:auto property and set it to have position: relative and blamo the problem was fixed.

Now, I can not really say why that setting the parent position to relative fixed this issue. When I saw what was really going on something in the back of my head let me know that setting the parents position might fix the problem. I must have read it somewhere in the past.

If anyone could give me a better explanation as to what might be going on with the documents flow I would be very interested.

As for the other issue with the IE Development Toolbar, which I find to be the most interesting item of my day.

This morning I was going through my computer and cleaning it out, getting rid of all the old any moldy applications that I did not need. While in Add/Remove programs I see IE Development Toolbar, I remember having installed it a few months back and remember the frustration of not being able to get it to show up in IE. Since it is not working I decided it would be a great idea to uninstall it. So I did.

Later it comes time for testing the application in IE and I see a new icon on my toolbar, IE Development Toolbar, and at the same time the JavaScript Editor window pops up to let me know that there is an error on the page (the page being google.com) and asking me if I would like to debug. I click no, close the dialog, and load up my application, and the window pops up again warning me of an error. This continues on every single page I visit.

It turns out there is a bug in the IE Developer Toolbar:
var collSelectors = selectFactory.createSeletorCollection();
part of the IE Developer's toolbar internal library is spawning an error on every single page I visit.

So this is officially the first time that I have chosen to uninstall a piece of software and end up having it install the software. Now I am going to have to figure out some way of routing this out of my computer because although being able to inspect the code on all of my pages is great, having an error spawn on every page I visit really removes that benefit.

So to end all this.

1. If anyone could explain what might be causing that weird document flow issue with the position: relative I would be interested.
2. If anyone know how to really uninstall the IE Developer Toolbar I would be more than interested to know.

Thanks,
Dan

Dan
Code Town | Zombie Head | How Much TP?