Solved

Problem with dropdowns

Posted on 2008-10-21
20
277 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
ID: 22767977
Using IE7 everything looked fine.  I did not check other browsers though.  
What exactly should I be looking for?
0
 

Author Comment

by:Simonrepro
ID: 22768024
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
ID: 22772443
What browser(s) are experiencing the problem?
0
 

Author Comment

by:Simonrepro
ID: 22773721
Ie7
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 22773758
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
ID: 22773839
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
ID: 22773859
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
ID: 31508241
Thank You
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22779113
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
ID: 22779335
Many thanks for this suggestion I will give it a go.

Simon
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 22780414
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
ID: 22780489
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
ID: 22783609
I was talking about the drop down rendering off screen.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 22783637
Okay, phew.
0
 

Author Comment

by:Simonrepro
ID: 22787780
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
ID: 22788482
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
ID: 22788874
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
ID: 22788900
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
ID: 22789324
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
ID: 22789373
minor error in that code above:  line 8 should be a less than or equal relationship, i.e. i<=ScrollTop
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jquery daterange picker not showing up correctly in Spry TabbedPanels 8 419
Resume template for HTML/Dreamweaver website 9 513
Wrapping 2 Divs in a Container 8 562
Need icon art 9 98
For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
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 …
Windows 10 is mostly good. However the one thing that annoys me is how many clicks you have to do to dial a VPN connection. You have to go to settings from the start menu, (2 clicks), Network and Internet (1 click), Click VPN (another click) then fi…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

895 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

14 Experts available now in Live!

Get 1:1 Help Now