Solved

Coldfusion Dropdown Menu Browser Incompatibility Issue with CSS

Posted on 2010-11-09
1
242 Views
Last Modified: 2012-05-10
Hello All,

      I am trying to modify a version of the coldfusion drop down solution: http://www.stunicholls.com/menu/pro_dropdown_2.html

and I am noticing a strange incompatibility issue across browsers.  The sample drop down I am working on is here:  http://www.dmsecureweb5.com/wtf/include-headNew.cfm

If you mouse over a where it says "cases by category" a drop down list appears; this just fine. But if you mouse over the first choice "Adoption" a slide out description is supposed to appear: this works fine in IE but in firefox the box doesn't go around the entire description text.  I believe this is an issue involving the CSS of the pro dropdown but I am unsure how to modify it.  The CSS code can be downloaded from the above link or I can paste it here as necessary.  

This is an extremely time sensitive issue, so any help you can offer would be extremely appreciated; thanks!
0
Comment
Question by:andrewaiello
1 Comment
 
LVL 22

Accepted Solution

by:
remorina earned 500 total points
ID: 34098551
Hi andrewaiello,
The problem is being caused by the height:18px for the sub level anchor along with the height:20px for the list item.

Try updating the 2 below rules in your CSS and see if it solves the issue for you.




#nav li:hover ul.sub li
{display:block; height:auto; position:relative; float:left; width:150px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; min-height:18px; width:148px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #ff8d06;}

Open in new window

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
SharePoint 2013 Searchbox Branding 11 41
CSS Position not returning 2 46
Autoprefixer and text editors 1 25
Error on link 14 37
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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).

911 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

19 Experts available now in Live!

Get 1:1 Help Now