Link to home
Start Free TrialLog in
Avatar of FrankTech
FrankTech

asked on

Conflict Between CSS and Javascript? Scrolling Divs (within "Tabs" Made of Hide/Unhide Divs) Won't Scroll When Using Stylesheet

There is a strange bug in this page: http://216.92.58.65/divtest.htm . Please help me figure out why the scrollable divs don't scroll when using the stylesheet (unless I first click on the final tab's radio button).

    The page has five divs that hide or unhide by clicking on radio buttons at the top. The radio buttons activate a Javascript that hides/unhides the correct "tab" (div).
    PROBLEM: When the page first loads, the scrolling divs will not scroll.
   STRANGE BUG:  The scrolling divs within the "tabbed" pages _will_ scroll properly if I click on the Fifth radio button, and then come back to the First "tab". The same problem shows up on tabs "Fourth" (and sometimes on Third). The scrolling divs in those "tabs" won't work unless I first click on tab Fifth's radio button.
   ANOTHER STRANGE BUG:  If I remove the css stylesheet, the scrolling divs all work properly most of the time.  But I need to use the stylesheet.  You can see the stylesheet here: http://216.92.58.65/Style-css.htm .

    I'm using IE6. What could be causing this problem?  Some conflict between the CSS and Javascript that switches the tab-divs?  Why would all scrolling divs scroll properly after clicking the Fifth radio button, but not when the page first loads?

I'm giving maximum points, as this sounds complicated to me and it might take some time for an expert to help figure it out. Thanks.
Avatar of TheKyle
TheKyle
Flag of United States of America image

IE6 could easily be causing the problem.  I don't have IE6 in front of me, so I can't test.

I'm using Firefox and IE7, and it looks fine to me in both.  I'm assuming by "scroll" you mean that the divs show up with scroll bars and not that they actually have animated scrolling, right?
Avatar of FrankTech
FrankTech

ASKER

TheKyle,
    Right. For me on IE6, the scroll bars show up, but they seem to be locked. The mouse cannot make them move by clicking the arrows nor by dragging the scrollbars.  Note, only some of the scroll areas have a problem -- usually the 1st one on a page (i.e., the first one within a "tab").
     I agree that it works properly in FireFox (except that the scrollbars are not showing up at all on the scrolling div of Tab Third.)
    But unfortunately, I believe the users of this page will have IE6 (it's in controlled corporate envivornment where their computers have IE6).  So I hope an expert with IE6 installed can take a look. If you happen to think of anything (even without having IE6 installed), please let me know. Thanks.
Just to clarify again, the problem is that the mouse cannot make the div scroll. When I click on the scroll arrows, nothing happens. And I can't drag the scrollbars up and down; they seem to be locked.
Judging by what you said, I would guess what's happening is that one of your div's are covering the scroll bars (via css).  Then, when you click over to another "tab", the javascript uses css to hide/show several elements, and a side effect is that whichever div was covering the scroll bars is moved or hidden or resized.

If you don't have it already, I would highly recommend that you download and install the IE Developer Toolbar...
http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

That will allow you to inpect the page and see exactly where each of your elements are showing up on the page.  You can also edit the css dynamically in the browser.

I'm sorry I'm not able to help much more than that.  I'm at home today, and I don't have IE6 installed here...
It's good to know about that developer toolbar. I downloaded and installed it, but it doesn't show up in my list of toolbars even after re-starting IE. I'll keep trying to get it working so I can inspect the page with it.
    I'll appreciate if you can try the page on IE6 tomorrow. Thanks.
OK. I got the toolbar working. Wow! It's a very useful tool.  I can see where something might be overlapping the top of the vertical scrollbar in a couple of places, but I can't figure out exactly what's going on or what to do about it. And it all looks the same when I go back to tab First after clicking on tab Fifth (even though the vertical scrollbars work properly in tab First after clicking on tab Fifth). So, again, I'll appreciate your further insight tomorrow.
Here's a hack that seems to make the vertical scrollbars able to be dragged, but it also seems to slow down the page load and probably uses more memory:

    <body onLoad="switchDiv('fifth'); switchDiv('first');">

That programatically emulates clicking the Fifth tab and then clicking the First tab.
    That's not really a solution; just a band-aid. Still hoping to discover what is causing the problem.
Yeah, there has to be a way to fix it without resorting to the "band-aid".  Unfortunately I probably won't have access to an IE6 browser until I get back to work on Monday, so I won't be able to dive into it until then.  

Hopefully someone else can help you out sooner.
ASKER CERTIFIED SOLUTION
Avatar of TheKyle
TheKyle
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
TheKyle,
    That seems to do the trick for me, too. I guess IE6 likes that style better.  I'm glad you were the one who read my question, because you knew how to find and fix the problem. Thanks so much,
Frank
No problem... I'm glad I could help!

Thanks for the points. :)