Solved

Problem with dropdowns

Posted on 2008-10-21
20
278 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
ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

 

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
 
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

Ransomware: The New Cyber Threat & How to Stop It

This infographic explains ransomware, type of malware that blocks access to your files or your systems and holds them hostage until a ransom is paid. It also examines the different types of ransomware and explains what you can do to thwart this sinister online threat.  

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Problem with updating record and sending email 3 215
Record Button 3 221
Remove LF from html text 5 417
DW UserID Session from Login 1 111
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…
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…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

831 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