Solved

HTML CSS DIV Scroll bar doesn't appear till rollover side link

Posted on 2008-10-26
10
896 Views
Last Modified: 2013-11-19
I have HTML CSS DIV Scroll bars on this client's website (the old site used frames and we are trying to make it more search engine and user friendly) and when you go to the address http://www.missionkayaking.com/test/kayaks/index.php you will see the bottom right area has a scroll panel.

However, if you click on the Kayak button at the top navigation it will reload the page and won't show the scroll bar. If you go over to the sub navigation on the left hand side and hover over some of the links the scroll bar appears. The same happens if you click on the Lake or River links on the side navigation.

But if you go to the Contact button on the top navigation, it doesn't do this,

Any suggestions?
0
Comment
Question by:littlemutts
  • 5
  • 5
10 Comments
 
LVL 5

Expert Comment

by:jose_juan
ID: 22810661
Hi,

you have some problems.

First, you must take practice over CSS, a example: the onmouseover effect is trivial using CSS

.myStyle {
   // style when not mouseover
}

.myStyle:hover {
  // style when mouseover
}

Minimize javascript!

On the other hand, your problem with scrollbar on content, appear only on IE (not in firefox, not in safari, ...), you have content inside a div with class "scroll4", see the next blog to solve your problem with IE

http://blog.josh420.com/archives/2007/11/fixing-the-ie-overflow-vertical-scrollbar-bug.aspx

Regards.
0
 

Author Comment

by:littlemutts
ID: 22811109
I'm sorry - I don't understand how that blog solves the problem - are you able to be more specific and tell me the code as I already have overflow set in my stylesheet I believe.

Thanks for the javascript mouseover help, I think I have fixed that now
0
 
LVL 5

Accepted Solution

by:
jose_juan earned 500 total points
ID: 22811271
Hi,

ok. Your CSS code are correct but it is not good for IE. You must put on your CSS code a conditional style. IE have a bug, to see it, you can change the size of window when scroll is hidden, then it will appear.

I can't try your page in my local (when use the file system then IE7 have not bug!).

A more specific solutions in

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp

(search overflow inside).

Good luck!
0
 

Author Comment

by:littlemutts
ID: 22818290
Sorry - I still don't understand what needs to be added. Is there anyway you can do a sample and send me the code? I can sen you the stylesheet and one of the files.

For the moment, I have made a style which is set to scroll by default, but that isn't really good enough because we need it to determine whether it needs to scroll or not.
0
 
LVL 5

Expert Comment

by:jose_juan
ID: 22819594
Yes, your think is correct.

Send me your stylesheet and one file, with this problem!

Regards.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:littlemutts
ID: 22820134
Hi,

Thanks for your quick response and I appreicate your help.

I could not work out how to attach a CSS file and PHP file, so I have renamed them as txt files in my ZIP. You will need to rename the mission.txt in the style folder to mission.css, and the index.txt file in the kayaks folder to index.php.

Thanks heaps!
problem-sample.zip
0
 
LVL 5

Expert Comment

by:jose_juan
ID: 22820230
Hi littlemutts,

you have provide bad files.

what do you think?
how can I check your code?

I need your problem, but you must provide local files (pure htm).

If I download your generate page (from your url) and save it to my disk, then, the bug don't appear!

I need a local version of your problem.

Regards.
0
 

Author Comment

by:littlemutts
ID: 22836693
Sorry - not sure what you mean by local files. Do you just want me to delete the php coding part and make it a static page?
0
 
LVL 5

Expert Comment

by:jose_juan
ID: 22838905
Yes, if your result htm have the same original error.
0
 

Author Comment

by:littlemutts
ID: 24654638
Thanks, worked well
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

708 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