Thread

I’m developing an EE site and things are going well except for a stubborn problem with firefox and absolute positioning of a CCS drop down menu. It renders perfectly in Safari and IE8. Can’t figure what FFs problem is.

Here’s the dev site : http://riverdistrict.dnsalias.com/

If you hover over the Commercial tab you’ll see how the drop menu slide all the way to the left in FF.

Hi Stephen,

Your submenu slides all the way to the left because your <li>-tags have display:table; on them. You can’t also set the position attribute on a table cell.

Greetz,
Wouter

Thanks Wouter. I used displayLtable to get the nav items to center vertically as requested by the client. I understand what you’re saying about trying to position a table cell. Drat.

Do you have an alternative suggestion to get the nav to center vertically?

Thanks for your help.

Hi Stephen,

Your submenu slides all the way to the left because your <li>-tags have display:table; on them. You can’t also set the position attribute on a table cell.

Greetz,
Wouter

Do you have an alternative suggestion to get the nav to center vertically?

Since your setting a width and height to your LI element, you can specify a width and height for your link element.

Add the following properties to your ul#sub_navigation a

display: table-cell;
height: 55px;
text-align: center;
width: 86px;

This should do the trick.

Cue,

Thanks for the suggestion! That with a couple other tweaks and it’s working perfectly in all browsers.

Thanks!