Solved

Coldfusion Dropdown Menu Browser Incompatibility Issue with CSS

Posted on 2010-11-09
1
251 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Technology Partners: 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

Suggested Solutions

Title # Comments Views Activity
ASP.NET Content Page 3 64
Text color in a select 11 32
How to get chosen background-color on every line? 10 44
Selenium cssSelector and attribute 5 13
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

751 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