Solved

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

Posted on 2007-11-22
11
1,530 Views
Last Modified: 2013-11-19
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.
0
Comment
Question by:FrankTech
  • 6
  • 5
11 Comments
 
LVL 6

Expert Comment

by:TheKyle
ID: 20335667
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?
0
 

Author Comment

by:FrankTech
ID: 20335735
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.
0
 

Author Comment

by:FrankTech
ID: 20335743
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.
0
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
LVL 6

Expert Comment

by:TheKyle
ID: 20335764
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...
0
 

Author Comment

by:FrankTech
ID: 20335915
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.
0
 

Author Comment

by:FrankTech
ID: 20335950
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.
0
 

Author Comment

by:FrankTech
ID: 20336595
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.
0
 
LVL 6

Expert Comment

by:TheKyle
ID: 20336966
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.
0
 
LVL 6

Accepted Solution

by:
TheKyle earned 500 total points
ID: 20351053
The element that is blocking your way to the scrollbar is the fifth "tab".  For some reason, even though it's visibility is set to hidden, it's still blocking you from clicking the scrollbar.

Try changing your code to use "display" instead of "visibility".  So, everything that says "visibility: hidden" should be changed to "display: none".  And everything that says "visibility: visible" should be changed to "display: block".

I changed the fifth tab to display none, and I was able to click on the scrollbar again.  Try it out and let me know how it worked for you.
0
 

Author Comment

by:FrankTech
ID: 20351419
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
0
 
LVL 6

Expert Comment

by:TheKyle
ID: 20351437
No problem... I'm glad I could help!

Thanks for the points. :)
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now