Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

cufon issue with Sliding door menu - first item at different position

Options
  • 19-02-2010 11:10am
    #1
    Registered Users Posts: 6,499 ✭✭✭


    I am using cufon-yui.js 1.0.9 with WordPress 2.9.1: http://www.food4thought.ie/
    The horizontal menu looks fine in IE8, FF3.6, Opera 10, Chrome 4 and
    Safari 4.

    In IE6 and IE7 (and IE8 in Compatability Mode) the first item in the
    menu is higher up than the other 4 menu items.
    I had a IE specific CSS file that only succeeded in moving the text
    down to the correct level but not the menu tab.
    #foodmenu li.page-item-19 {
    position: relative;
    top: 22px;

    }

    Anyone any ideas?
    I tried to ignore this issue but my client and a number of her customers are
    still using IE6.
    I have posted on the cufon Google group but that seems to be very low traffic.


Comments

  • Registered Users Posts: 7,468 ✭✭✭Evil Phil


    Moved from development.


  • Registered Users Posts: 6,499 ✭✭✭daymobrew


    For the moment I have decided to disable Cufon on #foodmenu in IE6 and IE7. I know that the .browser property is deprecated but I didn't find anything useful in jQuery.support.
    // Don't do Cufon replacement in IE6 or IE7 because the
    // first item (Main Courses) is on a different level
    if (jQuery.browser.msie && jQuery.browser.version.substr(0,1)<=7) {
    } else {
      Cufon.replace('#foodmenu');
    }
    
    For the IE6/IE7 specific stylesheet I make the font-style italic and the font-family cursive, in a vain attempt to make the font a little like the Cufon font.
    /* Make #foodmenu italic because Cufon messes up first menu item. */
    #foodmenu a span {
      font-style: italic;
      font-family: cursive, serif;
    }
    


Advertisement