[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

drop down menu not working

Posted on 2011-05-01
7
Medium Priority
?
235 Views
Last Modified: 2012-05-11
Hi!

The drop down menu on this page does not work when using IE9 in compatibility mode.
http://www.topsecurityinc.com/
Any specific correction(s) to the drop down menu's rule(s) would be appreciated.
The drop down menu's rules start at topnav-wrap and ul.dropdown
TIA
0
Comment
Question by:TrueBlue
  • 5
  • 2
7 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 35504441
Try this. Remove position:relative from these two css rules:

.content .roundcont1{background-color:#FFF;position:relative;width:1000px;background-image:none;}

.roundcont1{margin-left:0px;width:1000px;background:#FFF;position:relative;}

You will have to look at the site carefully afterward to make sure the edit does not adversely affect some other element. It's difficult to troubleshoot complex sites in IE compatibility mode.
0
 

Author Comment

by:TrueBlue
ID: 35504827
tommyBoy,
I uploaded your suggested changes to the stylesheet.
It fixed the drop down menus, but it causes the text starting with "If only ... " be moved way down the page and the copyright box at the bottom of the page now has a margin at the top and bottom.
It broke the box on this page: http://www.topsecurityinc.com/cellular-backup.asp
It also broke the boxes on this page: http://www.topsecurityinc.com/security-systems.asp
Is there a way to fix these?
TIA
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35505079
I'll take another look. I was hoping that would be the quick fix. The drop downs, when they are isolated from the rest of the page, work just fine in compatibility mode. Something else on the page is causing the problem. In the mean time, you can add the position:relative back in just so the site is not messed up.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 38

Expert Comment

by:Tom Beck
ID: 35505165
I looked at your stylesheet from the website and the two lines that I suggested you remove position:relative from were completely commented out.

I only wanted you to remove position:relative, not comment out the two rules completely. Have you tried removing position:relative from both places?
0
 

Author Comment

by:TrueBlue
ID: 35505384
tommyBoy,
I commented the original rules out.
And copied the new rules below the commented out rules without the position statement.
HTH
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35505518
Sorry, I completely missed that. I'm looking at it now.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35505977
I'm going back to my original suggestion of removing position:relative from those two rules. It solves the problem with the drop downs not working in IE compatibility mode. It has no affect on rendering issues with the other elements you cited in post ID:35504827. Those problems existed in compatibility mode before the position:relative edit and they will persist after the edit. You can try this yourself by testing compatibility mode both with and without the edit. If you want to open a new question on those issues, I would be happy to take a look specifically at that.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

867 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