Solved

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

Posted on 2008-10-26
10
930 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 

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
 

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

687 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