Search code examples
jquerycsspaddingeasing

trying to get padding and line-height to display properly in FF

I have a menu which uses jquery to toggle a submenu. Looks fine in chrome, EI and Safari. Firefox just isn't rendering the padding right. The site is www.caitmizzi.com/home

i have a jsfiddle here http://jsfiddle.net/6GwjA/ - You have to check the box Query UI 1.8.16 on the left for it to work

any help greatly appreciated

Thanks Greg

Solution

  • I'm not sure why you have the following css: 

    .subMenu{
    font-size: 115px;
    line-height: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
}

    This is creating a small line height shrinking the size of the element but adding padding, expanding the size of the element again. I'm guessing different browsers are interpreting that edge case differently.

    If you remove those properties (and let it inherit the same settings as the other list elements) you can override the style of the inner list and get a more consistent effect.

    I updated your jsfiddle: http://jsfiddle.net/6GwjA/8/

    The key changes are to the .subMenu and additions to the .subMenuStyle classes.

    .subMenu{
    font-family: Impact, Charcoal, sans-serif;
    list-style-type: none;
}
.subMenuStyle {
    font-size: 15px;
    line-height: 30px;
}