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,524 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

705 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

17 Experts available now in Live!

Get 1:1 Help Now