Solved

Coldfusion Dropdown Menu Browser Incompatibility Issue with CSS

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CFIf Syntax and Logic 27 42
Divi Them Help with Full Width header 20 58
Remove third quote mark from widget 6 23
Testing Responsiveness for Different Devices 4 27
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

815 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

11 Experts available now in Live!

Get 1:1 Help Now