Solved

Coldfusion Dropdown Menu Browser Incompatibility Issue with CSS

Posted on 2010-11-09
1
245 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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

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!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

821 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