Solved

Problem with dropdowns

Posted on 2008-10-21
20
276 Views
Last Modified: 2012-05-05
Please check this link and on the left of the site is some arrows which when clicked on do not drop down properly or neatly, this only seems to happen in ie7, does anyone know how to fix this please?

http://www.clarewebdesignclients.co.uk/reprographic_new/index.html
0
Comment
Question by:Simonrepro
  • 7
  • 7
  • 5
  • +1
20 Comments
 
LVL 30

Expert Comment

by:LZ1
Comment Utility
Using IE7 everything looked fine.  I did not check other browsers though.  
What exactly should I be looking for?
0
 

Author Comment

by:Simonrepro
Comment Utility
If you click a drop down which is near the bottom of the screen it opens up without moving the screen up so that the full dropdown can be viewed.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
What browser(s) are experiencing the problem?
0
 

Author Comment

by:Simonrepro
Comment Utility
Ie7
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
I'm pretty sure that's just the way IE7 renders.  I'm not at all sure there is anything you can do about it.
0
 

Author Comment

by:Simonrepro
Comment Utility
Is there any suggestions you have as it does not look professional baing like this?
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
Comment Utility
Reduce the number of items in the menu so that lower-resolution users don't see the problem?  Just like LZ1, I initially didn't see the issue either because I'm running at 1280 x 1024 and I have plenty of vertical space for the menus to expand.

0
 

Author Closing Comment

by:Simonrepro
Comment Utility
Thank You
0
 
LVL 14

Expert Comment

by:yessirnosir
Comment Utility
I realize this question has been closed, but something else that would improve that page would be to change the menu links from href="#" to something like href="#nowhere".  That prevents the page from jumping back up to the top if the user scrolls down the page, and then clicks on one of those links.  If you put a bogus anchor instead of href="#", then clicking the link won't cause the page to jump, so your page layout as you currently have it would be much more usable, even if you don't shrink the menu.
0
 

Author Comment

by:Simonrepro
Comment Utility
Many thanks for this suggestion I will give it a go.

Simon
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
Wait, are you talking about the page jumping up to the header or the drop down rendering "off-screen?"

If the latter, my advice stands.  If the former, then my answer is not correct...
0
 
LVL 14

Expert Comment

by:yessirnosir
Comment Utility
Jason, I think your answer is correct.  My suggestion is really just a band-aid that makes things a little better without much effort.
0
 

Author Comment

by:Simonrepro
Comment Utility
I was talking about the drop down rendering off screen.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
Okay, phew.
0
 

Author Comment

by:Simonrepro
Comment Utility
Jason,

I have done this now and it certainly seems more stable but it still is not lifting the page so that the whole dropdown can be viewed when opened, any ideas?

Cheers

Simon
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
Again, it's an issue with how IE renders these things.  You don't have a ton of control over it aside from using a different method to display menus.  Generally speaking, this is why you don't see a lot of vertical sliders used for navigation and left menus tend to have flyouts instead.
0
 
LVL 14

Expert Comment

by:yessirnosir
Comment Utility
Here's one possible approach:  use a bit of JavaScript to scroll the page when the user clicks on one of those links.  eg.  <a href="#nowhere" onclick="window.scrollTo(0,350)"> would cause the page to  scroll 350 px down the page.  I tried that with your FAQ link, and that seemed to work pretty well.  There is also a scrollBy command that just scrolls the screen relative to the starting point.  I'm no Javascript expert, so there may be other functions that would be useful too.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
Good idea, but a pain in the arse for some users across multiple resolutions.  If I am browsing this site and every click causes the page to scroll whether I want (expect) it to or not, I'll probably just leave.  Having stuff moving all over the place would give me a headache.
0
 
LVL 14

Expert Comment

by:yessirnosir
Comment Utility
agree about the unexpected jumping being distracting... although a script could be written to smooth it out.  just messing around a bit and came up with function below, that moves the screen one pixel at a time.  kind of cool actually... until an hour ago I didn't know I could make the user's screen scroll like that!  
call with <a href="#nowhere" onclick="scroll(350)">
 

<script type="text/javascript">

function scroll(ScrollTop) 

{

if (!(ScrollTop == window.pageYOffset)) 

	{

	for (i=0;i<ScrollTop;i=i+1) 

		{

		window.scrollTo(0,i)

		}

	}

}

</script>

Open in new window

0
 
LVL 14

Expert Comment

by:yessirnosir
Comment Utility
minor error in that code above:  line 8 should be a less than or equal relationship, i.e. i<=ScrollTop
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…

763 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

12 Experts available now in Live!

Get 1:1 Help Now